feat: Install PWA button

apps/antalmanac/src/components/InstallPWABanner.tsx

@@ -0,0 +1,103 @@
+import { IconButton, Button } from '@material-ui/core';
+import { Close } from '@mui/icons-material';
+import BrowserUpdatedIcon from '@mui/icons-material/BrowserUpdated';
+import { Alert, Box, Slide } from '@mui/material';
+import { useEffect, useState } from 'react';
+import { shallow } from 'zustand/shallow';
+
+import { getLocalStoragePWADismissalTime, setLocalStoragePWADismissalTime } from '$lib/localStorage';
+import { BeforeInstallPromptEvent, usePWAStore } from '$stores/PWAStore';
+import { useThemeStore } from '$stores/SettingsStore';
+
+function InstallPWABanner() {
+    const [setInstallPrompt, setCanInstall, canInstall, installPrompt] = usePWAStore(
+        (state) => [state.setInstallPrompt, state.setCanInstall, state.canInstall, state.installPrompt],
+        shallow
+    );
+
+    const [bannerVisibility, setBannerVisibility] = useState(false);
+    const isDark = useThemeStore((store) => store.isDark);
+
+    useEffect(() => {
+        const timeoutIn = setTimeout(() => {
+            setBannerVisibility(true);
+        }, 15000);
+
+        const beforeInstallHandler = (e: BeforeInstallPromptEvent) => {
+            e.preventDefault();
+            setCanInstall(true);
+            setInstallPrompt(e);
+        };
+
+        const disableInstallHandler = () => {
+            setCanInstall(false);
+            window.removeEventListener('beforeinstallprompt', beforeInstallHandler);
+        };
+
+        window.addEventListener('beforeinstallprompt', beforeInstallHandler);
+        window.addEventListener('appinstalled', disableInstallHandler);
+
+        return () => {
+            clearTimeout(timeoutIn);
+            window.removeEventListener('beforeinstallprompt', beforeInstallHandler);
+            window.removeEventListener('appinstalled', disableInstallHandler);
+        };
+    }, []);
+
+    const handleInstall = (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (installPrompt) {
+            e.preventDefault();
+            if (!installPrompt) return;
+            installPrompt.prompt();
+        }
+    };
+
+    const PWADismissalTime = getLocalStoragePWADismissalTime();
+
+    const dismissedRecently =
+        PWADismissalTime !== null && Date.now() - parseInt(PWADismissalTime) < 4 * 7 * 24 * 3600 * 1000;
+
+    const displayPWABanner = bannerVisibility && !dismissedRecently && canInstall;
+
+    return (
+        <Box
+            sx={{
+                position: 'fixed',
+                top: 90,
+                left: '50%',
+                transform: 'translate(-50%, -50%)',
+                zIndex: 999,
+            }}
+        >
+            <Slide direction="down" in={displayPWABanner} timeout={500} mountOnEnter unmountOnExit>
+                <Alert
+                    icon={false}
+                    severity="info"
+                    style={{
+                        color: isDark ? '#ece6e6' : '#2e2e2e',
+                        backgroundColor: isDark ? '#2e2e2e' : '#ece6e6',
+                    }}
+                    action={
+                        <IconButton
+                            aria-label="close"
+                            size="small"
+                            color="inherit"
+                            onClick={() => {
+                                setLocalStoragePWADismissalTime(Date.now().toString());
+                                setBannerVisibility(false);
+                            }}
+                        >
+                            <Close fontSize="inherit" />
+                        </IconButton>
+                    }
+                >
+                    <Button id="install-pwa-button" startIcon={<BrowserUpdatedIcon />} onClick={handleInstall}>
+                        Install AntAlmanac app
+                    </Button>
+                </Alert>
+            </Slide>
+        </Box>
+    );
+}
+
+export default InstallPWABanner;

apps/antalmanac/src/lib/localStorage.ts

@@ -14,6 +14,7 @@ enum LocalStorageKeys {
     unsavedActions = 'unsavedActions',
     helpBoxDismissalTime = 'helpBoxDismissalTime',
     columnToggles = 'columnToggles',
+    pwaDismissalTime = 'pwaDismissalTime',
 }
 
 const LSK = LocalStorageKeys;
@@ -195,3 +196,12 @@ export function setLocalStorageColumnToggles(value: string) {
 export function getLocalStorageColumnToggles() {
     return window.localStorage.getItem(LSK.columnToggles);
 }
+
+// Helper functions for pwaDismissalTime
+export function setLocalStoragePWADismissalTime(value: string) {
+    window.localStorage.setItem(LSK.pwaDismissalTime, value);
+}
+
+export function getLocalStoragePWADismissalTime() {
+    return window.localStorage.getItem(LSK.pwaDismissalTime);
+}

apps/antalmanac/src/routes/Home.tsx

@@ -6,6 +6,7 @@ import Split from 'react-split';
 
 import { ScheduleCalendar } from '$components/Calendar/CalendarRoot';
 import Header from '$components/Header';
+import InstallPWABanner from '$components/InstallPWABanner';
 import NotificationSnackbar from '$components/NotificationSnackbar';
 import PatchNotes from '$components/PatchNotes';
 import ScheduleManagement from '$components/SharedRoot';
@@ -93,6 +94,7 @@ export default function Home() {
             <CssBaseline />
 
             <PatchNotes />
+            <InstallPWABanner />
 
             {isMobileScreen ? <MobileHome /> : <DesktopHome />}
 

apps/antalmanac/src/stores/PWAStore.ts

@@ -0,0 +1,43 @@
+import { create } from 'zustand';
+
+// Adapted from https://stackoverflow.com/questions/51503754/typescript-type-beforeinstallpromptevent
+type UserChoice = Promise<{
+    outcome: 'accepted' | 'dismissed';
+    platform: string;
+}>;
+
+export interface BeforeInstallPromptEvent extends Event {
+    readonly platforms: string[];
+    readonly userChoice: UserChoice;
+    prompt(): Promise<UserChoice>;
+}
+
+declare global {
+    interface WindowEventMap {
+        beforeinstallprompt: BeforeInstallPromptEvent;
+    }
+}
+
+export interface PWAStore {
+    canInstall: boolean;
+    installPrompt: BeforeInstallPromptEvent | null;
+    setInstallPrompt: (e: BeforeInstallPromptEvent) => void;
+    setCanInstall: (canInstall: boolean) => void;
+}
+
+export const usePWAStore = create<PWAStore>((set) => {
+    return {
+        canInstall: false,
+        installPrompt: null,
+        setInstallPrompt: (e: BeforeInstallPromptEvent) => {
+            set({
+                installPrompt: e,
+            });
+        },
+        setCanInstall: (canInstall: boolean) => {
+            set({
+                canInstall,
+            });
+        },
+    };
+});