From 292546893af22f0e7652132630f1e0710765c153 Mon Sep 17 00:00:00 2001
From: Kristóf Marussy <kristof@marussy.com>
Date: Fri, 19 Aug 2022 19:54:55 +0200
Subject: feat(frontend): add PWA manifest

---
 subprojects/frontend/src/RegisterServiceWorker.tsx | 85 ++++++++++++++++++++++
 subprojects/frontend/src/index.tsx                 | 19 ++---
 2 files changed, 95 insertions(+), 9 deletions(-)
 create mode 100644 subprojects/frontend/src/RegisterServiceWorker.tsx

(limited to 'subprojects/frontend/src')

diff --git a/subprojects/frontend/src/RegisterServiceWorker.tsx b/subprojects/frontend/src/RegisterServiceWorker.tsx
new file mode 100644
index 00000000..c9b2e353
--- /dev/null
+++ b/subprojects/frontend/src/RegisterServiceWorker.tsx
@@ -0,0 +1,85 @@
+import Button from '@mui/material/Button';
+import {
+  type OptionsObject as SnackbarOptionsObject,
+  useSnackbar,
+} from 'notistack';
+import React, { useEffect } from 'react';
+// eslint-disable-next-line import/no-unresolved -- Importing virtual module.
+import { registerSW } from 'virtual:pwa-register';
+
+import { ContrastThemeProvider } from './theme/ThemeProvider';
+import getLogger from './utils/getLogger';
+
+const log = getLogger('RegisterServiceWorker');
+
+function UpdateSnackbarActions({
+  closeCurrentSnackbar,
+  enqueueSnackbar,
+  updateSW,
+}: {
+  closeCurrentSnackbar: () => void;
+  enqueueSnackbar: (
+    message: string,
+    options?: SnackbarOptionsObject | undefined,
+  ) => void;
+  updateSW: (reloadPage: boolean) => Promise<void>;
+}): JSX.Element {
+  return (
+    <ContrastThemeProvider>
+      <Button
+        color="primary"
+        onClick={() => {
+          closeCurrentSnackbar();
+          updateSW(true).catch((error) => {
+            log.error('Failed to update service worker', error);
+            enqueueSnackbar('Failed to download update', {
+              variant: 'error',
+            });
+          });
+        }}
+      >
+        Reload
+      </Button>
+      <Button color="inherit" onClick={closeCurrentSnackbar}>
+        Dismiss
+      </Button>
+    </ContrastThemeProvider>
+  );
+}
+
+export default function RegisterServiceWorker(): null {
+  const { enqueueSnackbar, closeSnackbar } = useSnackbar();
+  useEffect(() => {
+    if (import.meta.env.DEV) {
+      return;
+    }
+    if (!('serviceWorker' in navigator)) {
+      log.debug('No service worker support found');
+      return;
+    }
+    const updateSW = registerSW({
+      onNeedRefresh() {
+        const key = enqueueSnackbar('An update for Refinery is available', {
+          persist: true,
+          action: (
+            <UpdateSnackbarActions
+              closeCurrentSnackbar={() => closeSnackbar(key)}
+              enqueueSnackbar={enqueueSnackbar}
+              updateSW={updateSW}
+            />
+          ),
+        });
+      },
+      onOfflineReady() {
+        log.debug('Service worker is ready for offline use');
+      },
+      onRegistered() {
+        log.debug('Registered service worker');
+      },
+      onRegisterError(error) {
+        log.error('Failed to register service worker', error);
+      },
+    });
+  }, [enqueueSnackbar, closeSnackbar]);
+  return null;
+}
diff --git a/subprojects/frontend/src/index.tsx b/subprojects/frontend/src/index.tsx
index 2176b277..b108df6d 100644
--- a/subprojects/frontend/src/index.tsx
+++ b/subprojects/frontend/src/index.tsx
@@ -1,6 +1,4 @@
 import CssBaseline from '@mui/material/CssBaseline';
-import React, { Suspense, lazy } from 'react';
-import { createRoot } from 'react-dom/client';
 import '@fontsource/jetbrains-mono/400.css';
 import '@fontsource/jetbrains-mono/400-italic.css';
 import '@fontsource/jetbrains-mono/700.css';
@@ -8,15 +6,15 @@ import '@fontsource/jetbrains-mono/700-italic.css';
 import '@fontsource/jetbrains-mono/variable.css';
 import '@fontsource/jetbrains-mono/variable-italic.css';
 import '@fontsource/roboto/300.css';
-import '@fontsource/roboto/300-italic.css';
 import '@fontsource/roboto/400.css';
-import '@fontsource/roboto/400-italic.css';
 import '@fontsource/roboto/500.css';
-import '@fontsource/roboto/500-italic.css';
 import '@fontsource/roboto/700.css';
-import '@fontsource/roboto/700-italic.css';
+import { SnackbarProvider } from 'notistack';
+import React, { Suspense, lazy } from 'react';
+import { createRoot } from 'react-dom/client';
 
 import Loading from './Loading';
+import RegisterServiceWorker from './RegisterServiceWorker';
 import RootStore, { RootStoreProvider } from './RootStore';
 import ThemeProvider from './theme/ThemeProvider';
 import getLogger from './utils/getLogger';
@@ -79,9 +77,12 @@ const app = (
     <RootStoreProvider rootStore={rootStore}>
       <ThemeProvider>
         <CssBaseline enableColorScheme />
-        <Suspense fallback={<Loading />}>
-          <App />
-        </Suspense>
+        <SnackbarProvider>
+          <RegisterServiceWorker />
+          <Suspense fallback={<Loading />}>
+            <App />
+          </Suspense>
+        </SnackbarProvider>
       </ThemeProvider>
     </RootStoreProvider>
   </React.StrictMode>
-- 
cgit v1.2.3-54-g00ecf