diff --git a/desktop/flipper-ui-core/src/chrome/PWAppInstallationWizard.tsx b/desktop/flipper-ui-core/src/chrome/PWAppInstallationWizard.tsx index ff1b2a66d..b13e2c5b2 100644 --- a/desktop/flipper-ui-core/src/chrome/PWAppInstallationWizard.tsx +++ b/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 = ( - <> +

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. - +

+

+ Install it by clicking the 'Install' button below. +

+

+ Alternatively, click on{' '} + which can + be found at the right-side of the search bar next to the bookmarks + icon.{' '} +

); @@ -140,10 +175,18 @@ export default function PWAInstallationWizard(props: Props) { <> +