Better installation wizard

Summary: A few improvements to the installation wizard.

Reviewed By: antonk52

Differential Revision: D49145069

fbshipit-source-id: 1aadd85e1d187bd61983a0b4201b530cbdbf509a

desktop/flipper-ui-core/src/chrome/PWAppInstallationWizard.tsx

@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import {Modal, Button} from 'antd';
+import {Image, Modal, Button} from 'antd';
 import {getFlipperLib, Layout, _NuxManagerContext} from 'flipper-plugin';
 import {getRenderHostInstance} from 'flipper-frontend-core';
 import isProduction from '../utils/isProduction';
@@ -19,6 +19,7 @@ type Props = {
 
 type TrackerEvents = {
   'pwa-installation-wizard-should-show': {show: boolean; reason: string};
+  'pwa-installation-wizard-should-never-show': {};
   'pwa-installation-wizard-shown': {};
   'pwa-install-outcome': {
     installed: boolean;
@@ -44,8 +45,13 @@ function isElectron() {
 }
 
 const lastShownTimestampKey = 'flipper-pwa-wizard-last-shown-timestamp';
+const neverAskAgainKey = 'flipper-pwa-wizard-never-ask-again';
 export function shouldShowPWAInstallationWizard(): boolean {
-  if (!isProduction() || isElectron()) {
+  if (isElectron()) {
+    return false;
+  }
+
+  if (!isProduction()) {
     return false;
   }
 
@@ -57,13 +63,20 @@ export function shouldShowPWAInstallationWizard(): boolean {
     return false;
   }
 
+  let neverAskAgain = undefined;
+  try {
+    neverAskAgain = window.localStorage.getItem(neverAskAgainKey);
+  } catch (e) {}
+  if (neverAskAgain !== undefined) {
+    return false;
+  }
+
   let lastShownTimestampFromStorage = undefined;
   try {
     lastShownTimestampFromStorage = window.localStorage.getItem(
       lastShownTimestampKey,
     );
   } catch (e) {}
-
   if (lastShownTimestampFromStorage) {
     const withinOneDay = (timestamp: number) => {
       const Day = 1 * 24 * 60 * 60 * 1000;
@@ -98,6 +111,19 @@ export function shouldShowPWAInstallationWizard(): boolean {
   return true;
 }
 
+function neverShowPWAInstallationWizard() {
+  try {
+    // Only interested in setting any value. However,
+    // in this case, the time in which this option was selected is
+    // stored as it may be relevant in the future.
+    const neverShowTimestamp = Date.now();
+
+    window.localStorage.setItem(neverAskAgainKey, String(neverShowTimestamp));
+  } catch (e) {}
+
+  tracker.track('pwa-installation-wizard-should-never-show', {});
+}
+
 async function install(event: any) {
   event.prompt();
 
@@ -123,7 +149,7 @@ export default function PWAInstallationWizard(props: Props) {
   const contents = (
     <Layout.Container gap>
       <Layout.Container style={{width: '100%', paddingBottom: 15}}>
-        <>
+        <p>
           Please install Flipper as a PWA. Installed Progressive Web Apps run in
           a standalone window instead of a browser tab. They're launchable from
           your home screen, dock, taskbar, or shelf. It's possible to search for
@@ -131,7 +157,16 @@ export default function PWAInstallationWizard(props: Props) {
           part of the device they're installed on. New capabilities open up
           after a web app is installed. Keyboard shortcuts, usually reserved
           when running in the browser, become available too.
-        </>
+        </p>
+        <p>
+          <b>Install it by clicking the 'Install' button below.</b>
+        </p>
+        <p>
+          Alternatively, click on{' '}
+          <Image width={18} height={18} src="./install_desktop.svg" /> which can
+          be found at the right-side of the search bar next to the bookmarks
+          icon.{' '}
+        </p>
       </Layout.Container>
     </Layout.Container>
   );
@@ -140,10 +175,18 @@ export default function PWAInstallationWizard(props: Props) {
     <>
       <Button
         type="ghost"
-        onClick={async () => {
+        onClick={() => {
           props.onHide();
         }}>
-        Not now
+        Not now, remind me next time
+      </Button>
+      <Button
+        type="ghost"
+        onClick={() => {
+          neverShowPWAInstallationWizard();
+          props.onHide();
+        }}>
+        Don't ask again
       </Button>
       <Button
         type="primary"
@@ -151,6 +194,11 @@ export default function PWAInstallationWizard(props: Props) {
           const installEvent = (globalThis as any).PWAppInstallationEvent;
           if (installEvent) {
             await install(installEvent).then(props.onHide);
+          } else {
+            console.warn(
+              '[PWA] Installation event was undefined, unable to install',
+            );
+            props.onHide();
           }
         }}>
         Install
@@ -160,13 +208,16 @@ export default function PWAInstallationWizard(props: Props) {
 
   return (
     <Modal
-      visible
+      closable={false}
+      keyboard={false} // Don't allow escape to close modal
+      maskClosable={false} // Don't allow clicking away
+      open
       centered
       onCancel={() => {
         props.onHide();
       }}
       width={570}
-      title="Install Flipper to Desktop"
+      title="Install Flipper"
       footer={footer}>
       {contents}
     </Modal>

desktop/scripts/build-flipper-server-release.tsx

@@ -234,6 +234,7 @@ async function copyStaticResources(outDir: string, versionNumber: string) {
     'icons.json',
     'index.web.dev.html',
     'index.web.html',
+    'install_desktop.svg',
     'loading.html',
     'offline.html',
     'service-worker.js',

desktop/static/install_desktop.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="M320-120v-80H160q-33 0-56.5-23.5T80-280v-480q0-33 23.5-56.5T160-840h320v80H160v480h640v-120h80v120q0 33-23.5 56.5T800-200H640v80H320Zm360-280L480-600l56-56 104 103v-287h80v287l104-103 56 56-200 200Z"/></svg>