feat: PWA hint dialog for mobile devices

packages/client/components/client/index.tsx

@@ -26,30 +26,43 @@ const clientContext = createContext(null! as ClientController);
  * Mount the modal controller
  */
 export function ClientContext(props: { state: State; children: JSXElement }) {
-  const { openModal } = useModals();
+  const { openModal, isOpen } = useModals();
 
   // eslint-disable-next-line solid/reactivity
   const controller = new ClientController(props.state);
   onCleanup(() => controller.dispose());
 
   createEffect(() => {
-    const lastIndex = props.state.settings.getValue("changelog:last_index");
-    if (controller.lifecycle.state() === LifecycleState.Ready) return;
+    const cycleState = controller.lifecycle.state();
+
+    //Show Changelog modal
+    if (cycleState !== LifecycleState.Ready) {
+      const lastIndex = props.state.settings.getValue("changelog:last_index");
+
+      if (
+        lastIndex !== CHANGELOG_MODAL_CONST.index &&
+        new Date() < CHANGELOG_MODAL_CONST.until
+      ) {
+        openModal({
+          type: "changelog",
+          initial: CHANGELOG_MODAL_CONST.index,
+        });
+
+        props.state.settings.setValue(
+          "changelog:last_index",
+          CHANGELOG_MODAL_CONST.index,
+        );
+      }
+    }
 
+    //Show TryPWA modal
     if (
-      lastIndex !== CHANGELOG_MODAL_CONST.index &&
-      new Date() < CHANGELOG_MODAL_CONST.until
-    ) {
-      openModal({
-        type: "changelog",
-        initial: CHANGELOG_MODAL_CONST.index,
-      });
-
-      props.state.settings.setValue(
-        "changelog:last_index",
-        CHANGELOG_MODAL_CONST.index,
-      );
-    }
+      props.state.isMobile &&
+      cycleState === LifecycleState.Connected &&
+      !props.state.settings.getValue("pwa:shown") &&
+      !isOpen("try_pwa")
+    )
+      openModal({ type: "try_pwa" });
   });
 
   createEffect(

packages/client/components/modal/modals.tsx

@@ -53,6 +53,7 @@ import { ServerInfoModal } from "./modals/ServerInfo";
 import { SettingsModal } from "./modals/Settings";
 import { SignOutSessionsModal } from "./modals/SignOutSessions";
 import { SignedOutModal } from "./modals/SignedOut";
+import { TryPWAModal } from "./modals/TryPWA";
 import { UserProfileModal } from "./modals/UserProfile";
 import { UserProfileMutualFriendsModal } from "./modals/UserProfileMutualFriends";
 import { UserProfileMutualGroupsModal } from "./modals/UserProfileMutualGroups";
@@ -183,6 +184,8 @@ export function RenderModal(props: ActiveModal & { onClose: () => void }) {
       return <ResetBotTokenModal {...modalProps} />;
     case "edit_category":
       return <EditCategoryModal {...modalProps} />;
+    case "try_pwa":
+      return <TryPWAModal {...modalProps} />;
 
     default:
       console.error(

packages/client/components/modal/modals/TryPWA.tsx

@@ -0,0 +1,45 @@
+import { Trans } from "@lingui-solid/solid/macro";
+
+import { Dialog, DialogProps, iconSize } from "@revolt/ui";
+
+import MdInfo from "@material-design-icons/svg/outlined/error.svg?component-solid";
+
+import { t } from "@lingui/core/macro";
+import { useState } from "@revolt/state";
+import { Modals } from "../types";
+
+export function TryPWAModal(props: DialogProps & Modals & { type: "try_pwa" }) {
+  const state = useState();
+
+  return (
+    <Dialog
+      icon={<MdInfo {...iconSize(24)} />}
+      show={props.show}
+      onClose={() => {
+        state.settings.setValue("pwa:shown", true);
+        props.onClose();
+      }}
+      title={<Trans>Did you know?</Trans>}
+      actions={[
+        { text: <Trans>Close</Trans> },
+        {
+          text: <Trans>Install</Trans>,
+          onClick: () => {
+            // @ts-expect-error PWA event not recognized
+            if (state.pwaPrompt) state.pwaPrompt.prompt();
+            else
+              alert(
+                t`Sorry, your device doesn't support auto-install. Check your browser's menu for the 'Add to Home Screen' option.`,
+              );
+          },
+        },
+      ]}
+    >
+      <Trans>
+        You can <b>install</b> this Web App on your devive for conveient access
+        from the Home Screen. Tap the button below or open your browser's menu
+        and choose <b>Add to Home Screen</b>.
+      </Trans>
+    </Dialog>
+  );
+}

packages/client/components/modal/types.ts

@@ -314,4 +314,7 @@ export type Modals =
       type: "edit_category";
       server: Server;
       category: CategoryData;
+    }
+  | {
+      type: "try_pwa";
     };

packages/client/components/state/index.tsx

@@ -11,6 +11,7 @@ import { SetStoreFunction, createStore } from "solid-js/store";
 import equal from "fast-deep-equal";
 import localforage from "localforage";
 
+import { isMobileBrowser } from "@livekit/components-core";
 import { AbstractStore, Store } from "./stores";
 import { Auth } from "./stores/Auth";
 import { Draft } from "./stores/Draft";
@@ -47,6 +48,9 @@ export class State {
   private setStore: SetStoreFunction<Store>;
   private writeQueue: Record<string, number>;
 
+  isMobile: boolean;
+  pwaPrompt: Event | undefined;
+
   // define all stores
   auth = new Auth(this);
   draft = new Draft(this);
@@ -99,6 +103,7 @@ export class State {
     this.store = store as never;
     this.setStore = setStore;
     this.writeQueue = {};
+    this.isMobile = isMobileBrowser();
   }
 
   /**

packages/client/components/state/stores/Settings.ts

@@ -68,6 +68,11 @@ interface SettingsDefinition {
    * Last read changelog index
    */
   "changelog:last_index": number;
+
+  /**
+   * Whether the user has seen the TryPWA dialog
+   */
+  "pwa:shown": boolean;
 }
 
 /**
@@ -95,6 +100,7 @@ const EXPECTED_TYPES: { [K in keyof SettingsDefinition]: ValueType<K> } = {
   "advanced:copy_id": "boolean",
   "advanced:admin_panel": "boolean",
   "changelog:last_index": "number",
+  "pwa:shown": "boolean",
 };
 
 /**

packages/client/src/index.tsx

@@ -108,8 +108,12 @@ function BotRedirect() {
   return <PWARedirect />;
 }
 
+let pwaPrompt: Event;
+addEventListener("beforeinstallprompt", (e) => (pwaPrompt = e));
+
 function MountContext(props: { children?: JSX.Element }) {
   const state = useState();
+  state.pwaPrompt = pwaPrompt;
 
   /**
    * Tanstack Query client