From e7781e10c939522274c1981b9774c4e89bb3559e Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Tue, 31 May 2022 20:58:51 +0400
Subject: [PATCH] Main Menu: Support "Install App" action (#1901)

---
 src/components/left/main/LeftMainHeader.tsx | 14 +++++++++++++-
 src/global/actions/ui/initial.ts            |  8 ++++++++
 src/global/types.ts                         |  4 ++++
 src/index.tsx                               |  5 +++++
 src/util/environment.ts                     |  1 +
 src/util/installPrompt.ts                   | 21 +++++++++++++++++++++
 6 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 src/util/installPrompt.ts

diff --git a/src/components/left/main/LeftMainHeader.tsx b/src/components/left/main/LeftMainHeader.tsx
index 7a8d15ad8..cc981c6e9 100644
--- a/src/components/left/main/LeftMainHeader.tsx
+++ b/src/components/left/main/LeftMainHeader.tsx
@@ -29,6 +29,7 @@ import { isChatArchived } from '../../../global/helpers';
 import useLang from '../../../hooks/useLang';
 import useConnectionStatus from '../../../hooks/useConnectionStatus';
 import { useHotkeys } from '../../../hooks/useHotkeys';
+import { getPromptInstall } from '../../../util/installPrompt';
 
 import DropdownMenu from '../../ui/DropdownMenu';
 import MenuItem from '../../ui/MenuItem';
@@ -67,7 +68,7 @@ type StateProps =
     areChatsLoaded?: boolean;
     hasPasscode?: boolean;
   }
-  & Pick<GlobalState, 'connectionState' | 'isSyncing'>;
+  & Pick<GlobalState, 'connectionState' | 'isSyncing' | 'canInstall'>;
 
 const PRODUCTION_HOSTNAME = 'web.telegram.org';
 const LEGACY_VERSION_URL = 'https://web.telegram.org/?legacy=1';
@@ -96,6 +97,7 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
   isConnectionStatusMinimized,
   areChatsLoaded,
   hasPasscode,
+  canInstall,
 }) => {
   const {
     openChat,
@@ -345,6 +347,15 @@ const LeftMainHeader: FC<OwnProps & StateProps> = ({
               </MenuItem>
             </>
           )}
+          {canInstall && (
+            <MenuItem
+              icon="install"
+              onClick={getPromptInstall()}
+            >
+              Install App
+              <span className="menu-item-badge">{lang('New')}</span>
+            </MenuItem>
+          )}
         </DropdownMenu>
         <SearchInput
           inputId="telegram-search-input"
@@ -436,6 +447,7 @@ export default memo(withGlobal<OwnProps>(
       isConnectionStatusMinimized,
       areChatsLoaded: Boolean(global.chats.listIds.active),
       hasPasscode: Boolean(global.passcode.hasPasscode),
+      canInstall: Boolean(global.canInstall),
     };
   },
 )(LeftMainHeader));
diff --git a/src/global/actions/ui/initial.ts b/src/global/actions/ui/initial.ts
index ba6ae8f9e..1fdd4d55f 100644
--- a/src/global/actions/ui/initial.ts
+++ b/src/global/actions/ui/initial.ts
@@ -47,6 +47,14 @@ addActionHandler('init', (global) => {
   }
 });
 
+addActionHandler('setInstallPrompt', (global, actions, payload) => {
+  const { canInstall } = payload;
+  return {
+    ...global,
+    canInstall,
+  };
+});
+
 addActionHandler('setIsUiReady', (global, actions, payload) => {
   const { uiReadyState } = payload!;
 
diff --git a/src/global/types.ts b/src/global/types.ts
index 2b88f1c2d..cbe778f27 100644
--- a/src/global/types.ts
+++ b/src/global/types.ts
@@ -121,6 +121,7 @@ export interface ServiceNotification {
 
 export type GlobalState = {
   appConfig?: ApiAppConfig;
+  canInstall?: boolean;
   isChatInfoShown: boolean;
   isStatisticsShown?: boolean;
   isLeftColumnShown: boolean;
@@ -599,6 +600,9 @@ export interface ActionPayloads {
   signOut: { forceInitApi?: boolean } | undefined;
   apiUpdate: ApiUpdate;
 
+  // Misc
+  setInstallPrompt: { canInstall: boolean };
+
   // Accounts
   reportPeer: {
     chatId?: string;
diff --git a/src/index.tsx b/src/index.tsx
index f8f18c091..cb9d45ac6 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,6 +6,8 @@ import TeactDOM from './lib/teact/teact-dom';
 
 import { getActions, getGlobal } from './global';
 import updateWebmanifest from './util/updateWebmanifest';
+import { setupBeforeInstallPrompt } from './util/installPrompt';
+import { IS_INSTALL_PROMPT_SUPPORTED } from './util/environment';
 import './global/init';
 
 import { DEBUG } from './config';
@@ -19,6 +21,9 @@ if (DEBUG) {
   console.log('>>> INIT');
 }
 
+if (IS_INSTALL_PROMPT_SUPPORTED) {
+  setupBeforeInstallPrompt();
+}
 getActions().init();
 
 if (DEBUG) {
diff --git a/src/util/environment.ts b/src/util/environment.ts
index 37e478d69..47e5b2dad 100644
--- a/src/util/environment.ts
+++ b/src/util/environment.ts
@@ -91,6 +91,7 @@ export const IS_BACKDROP_BLUR_SUPPORTED = !IS_TEST && (
 );
 export const IS_COMPACT_MENU = !IS_TOUCH_ENV;
 export const IS_SCROLL_PATCH_NEEDED = !IS_MAC_OS && !IS_IOS && !IS_ANDROID;
+export const IS_INSTALL_PROMPT_SUPPORTED = 'onbeforeinstallprompt' in window;
 
 // Smaller area reduces scroll jumps caused by `patchChromiumScroll`
 export const MESSAGE_LIST_SENSITIVE_AREA = IS_SCROLL_PATCH_NEEDED ? 300 : 750;
diff --git a/src/util/installPrompt.ts b/src/util/installPrompt.ts
new file mode 100644
index 000000000..1d308cb76
--- /dev/null
+++ b/src/util/installPrompt.ts
@@ -0,0 +1,21 @@
+import { getActions } from '../global';
+
+let promptInstall: () => Promise<void>;
+
+export function setupBeforeInstallPrompt() {
+  window.addEventListener('beforeinstallprompt', (e: any) => {
+    promptInstall = async () => {
+      e.prompt();
+      const userChoice = await e.userChoice;
+      const isInstalled = userChoice.outcome === 'accepted';
+
+      if (!isInstalled) return;
+      getActions().setInstallPrompt({ canInstall: false });
+    };
+    getActions().setInstallPrompt({ canInstall: true });
+  });
+}
+
+export function getPromptInstall() {
+  return promptInstall;
+}