feat(service-worker): Add new service worker configuration

f-eld-ch · Feb 9, 2024 · 1fa68c8 · 1fa68c8
1 parent f0dda34
commit 1fa68c8
Show file tree

Hide file tree

Showing 20 changed files with 2,784 additions and 225 deletions.
diff --git a/ui/index.html b/ui/index.html
@@ -1,21 +1,22 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta
+      http-equiv="Content-Security-Policy"
+      content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; style-src-attr 'self'; child-src 'none'; worker-src 'self' blob:; script-src-elem 'self' https://api.mapbox.com; connect-src 'self' ws://* wss://* https://*;"
+    />
+    <meta name="description" content="SitRep" />
+    <link rel="icon" href="/favicon-48x48.ico" sizes="48x48" />
+    <link rel="icon" href="/favicon.ico" sizes="64x64" />
+    <link rel="icon" href="/logo.svg" sizes="any" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" />
+    <title>Sitrep</title>
+  </head>
 
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="/favicon.ico" />
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <meta http-equiv="Content-Security-Policy"
-    content="default-src 'self'; img-src 'self' data:; style-src 'self' 'unsafe-inline'; style-src-attr 'self'; child-src 'none'; worker-src 'self' blob:; script-src-elem 'self' https://api.mapbox.com; connect-src 'self' ws://* wss://* https://*;" />
-  <meta name="description" content="SitRep" />
-  <link rel="apple-touch-icon" href="/logo192.png" />
-  <link rel="manifest" href="/manifest.json" />
-  <title>Sitrep</title>
-</head>
-
-<body class="has-navbar-fixed-top">
-  <div id="root"></div>
-  <script type="module" src="/src/index.tsx"></script>
-</body>
-
-</html>
+  <body class="has-navbar-fixed-top">
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>
diff --git a/ui/package.json b/ui/package.json
@@ -40,7 +40,8 @@
     "start": "VERSION=dev GIT_SHA=HEAD vite",
     "build": "tsc && vite build",
     "test": "vitest",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "generate-pwa-assets": "pwa-assets-generator"
   },
   "eslintConfig": {
     "extends": [
@@ -78,8 +79,10 @@
     "@types/react-color": "^3.0.11",
     "@types/react-dom": "^18.2.18",
     "@types/react-router-dom": "^5.3.3",
+    "@types/semver": "^7",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
+    "@vite-pwa/assets-generator": "^0.2.3",
     "@vitejs/plugin-react-swc": "^3.6.0",
     "@vitest/coverage-v8": "^1.2.2",
     "eslint": "^8.56.0",
@@ -90,21 +93,23 @@
     "lint-staged": "^15.2.0",
     "prettier": "^3.2.4",
     "sass": "^1.70.0",
+    "semver": "^7.6.0",
     "source-map-explorer": "^2.5.3",
     "ts-jest": "^29.1.2",
     "typescript": "^4.9.5",
     "vite": "^5.0.12",
     "vite-plugin-checker": "^0.6.4",
     "vite-plugin-eslint": "^1.8.1",
+    "vite-plugin-pwa": "^0.17.5",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.1",
     "vitest": "^1.2.2"
   },
   "resolutions": {
     "json5": "^2.2.3",
-    "semver": "^5.7.2",
     "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.18"
+    "@types/react-dom": "^18.2.18",
+    "sharp": "^0.33.2"
   },
   "packageManager": "[email protected]"
 }
diff --git a/ui/public/apple-touch-icon-180x180.png b/ui/public/apple-touch-icon-180x180.png
diff --git a/ui/public/favicon-48x48.ico b/ui/public/favicon-48x48.ico
diff --git a/ui/public/favicon.ico b/ui/public/favicon.ico
diff --git a/ui/public/logo.svg b/ui/public/logo.svg
diff --git a/ui/public/logo192.png b/ui/public/logo192.png
diff --git a/ui/public/logo512.png b/ui/public/logo512.png
diff --git a/ui/public/manifest.json b/ui/public/manifest.json
diff --git a/ui/public/maskable-icon-512x512.png b/ui/public/maskable-icon-512x512.png
diff --git a/ui/public/pwa-192x192.png b/ui/public/pwa-192x192.png
diff --git a/ui/public/pwa-512x512.png b/ui/public/pwa-512x512.png
diff --git a/ui/public/pwa-64x64.png b/ui/public/pwa-64x64.png
diff --git a/ui/pwa-assets.config.ts b/ui/pwa-assets.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from "@vite-pwa/assets-generator/config";
+
+export default defineConfig({
+  /* remember to include the preset for favicons and apple touch icon */
+  headLinkOptions: {
+    preset: "2023",
+  },
+  preset: {
+    transparent: {
+      sizes: [64, 192, 512],
+      favicons: [
+        [48, "favicon-48x48.ico"],
+        [64, "favicon.ico"],
+      ],
+    },
+    maskable: {
+      sizes: [512],
+    },
+    apple: {
+      sizes: [180],
+    },
+  },
+  images: ["public/logo.svg"],
+});
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -1,18 +1,14 @@
 import { lazy, Suspense, useEffect, useState } from "react";
-import { HashRouter as Router, Navigate, Route, Routes } from "react-router-dom";
+import { Navigate, Route, HashRouter as Router, Routes } from "react-router-dom";
 
 import "./App.scss";
 
-import {
-  Editor as IncidentEditor,
-  List as IncidentList,
-  New as IncidentNew
-} from "views/incident";
+import { Editor as IncidentEditor, List as IncidentList, New as IncidentNew } from "views/incident";
 import {
   Editor as JournalEditor,
   List as JournalMessageList,
   New as JournalNew,
-  Overview as JournalOverview
+  Overview as JournalOverview,
 } from "views/journal";
 
 import { List as ImmediateMeasuresList } from "views/measures/immediateMeasures";
@@ -29,7 +25,7 @@ import MessageSheet from "views/journal/MessageSheet";
 import { Layout } from "views/Layout";
 import { default as client } from "./client";
 
-const Map = lazy(() => import('views/map'));
+const Map = lazy(() => import("views/map"));
 
 function App() {
   const [userState, setUserState] = useState<UserState>({ isLoggedin: false, email: "", username: "" });
@@ -39,24 +35,27 @@ function App() {
     fetch("/oauth2/userinfo", { credentials: "include" })
       .then((response) => {
         if (!response.ok) {
-          throw new Error("unauthenticated")
+          throw new Error("unauthenticated");
         }
         return response.json();
       })
       .then((userInfo) => {
-        setUserState({ isLoggedin: true, email: userInfo.email, username: userInfo.user || userInfo.preferredUsername });
+        setUserState({
+          isLoggedin: true,
+          email: userInfo.email,
+          username: userInfo.user || userInfo.preferredUsername,
+        });
       })
       .catch(() => {
         setUserState({ isLoggedin: false, email: "", username: "" });
         // redirect to the login page of oAuth2Proxy
-        window.location.replace('/oauth2/sign_in');
+        window.location.replace("/oauth2/sign_in");
       });
   };
 
-
   useEffect(() => {
     setUserStateFromUserinfo();
-    i18n.changeLanguage()
+    i18n.changeLanguage();
 
     const interval = setInterval(() => {
       setUserStateFromUserinfo();
@@ -127,10 +126,7 @@ function App() {
                     path=":journalId"
                     element={
                       <Layout>
-                        <JournalMessageList
-                          showControls={false}
-                          autoScroll={true}
-                        />
+                        <JournalMessageList showControls={false} autoScroll={true} />
                       </Layout>
                     }
                   />
@@ -156,7 +152,7 @@ function App() {
                   path="map"
                   element={
                     <Layout>
-                      <Suspense fallback={<Spinner />} >
+                      <Suspense fallback={<Spinner />}>
                         <Map />
                       </Suspense>
                     </Layout>
@@ -192,7 +188,7 @@ function App() {
           </Routes>
         </Router>
       </ApolloProvider>
-    </UserContext.Provider >
+    </UserContext.Provider>
   );
 }
 

diff --git a/ui/src/ReloadSWPromt.tsx b/ui/src/ReloadSWPromt.tsx
@@ -0,0 +1,38 @@
+import { useRegisterSW } from "virtual:pwa-register/react";
+
+function ReloadPrompt() {
+  const {
+    offlineReady: [offlineReady, setOfflineReady],
+    needRefresh: [needRefresh, setNeedRefresh],
+    updateServiceWorker,
+  } = useRegisterSW({
+    onRegistered(r) {
+      // eslint-disable-next-line prefer-template
+      console.log("SW Registered: " + r);
+    },
+    onRegisterError(error) {
+      console.log("SW registration error", error);
+    },
+  });
+
+  const close = () => {
+    setOfflineReady(false);
+    setNeedRefresh(false);
+  };
+
+  return (
+    <>
+      {needRefresh && offlineReady && (
+        <div className="notification is-info">
+          <button className="delete" onClick={close}></button>
+          <span>New content available, click on reload button to update.</span>
+          <button className="button is-primary is-light" onClick={() => updateServiceWorker(true)}>
+            Reload
+          </button>
+        </div>
+      )}
+    </>
+  );
+}
+
+export default ReloadPrompt;
diff --git a/ui/src/index.tsx b/ui/src/index.tsx
@@ -1,3 +1,4 @@
+import ReloadPrompt from "ReloadSWPromt";
 import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./App";
@@ -9,6 +10,7 @@ const container = document.getElementById("root");
 const root = createRoot(container!);
 root.render(
   <React.StrictMode>
+    <ReloadPrompt />
     <App />
   </React.StrictMode>,
 );

diff --git a/ui/src/vite-env.d.ts b/ui/src/vite-env.d.ts
@@ -1,12 +1,14 @@
 /// <reference types="vite/client" />
 /// <reference types="vite-plugin-svgr/client" />
+/// <reference types="vite-plugin-pwa/client" />
+/// <reference types="vite-plugin-pwa/react" />
 
-import { FC, SVGProps } from 'react';
+import { FC, SVGProps } from "react";
 
-declare module '*.png';
-declare module '*.jpeg';
-declare module '*.jpg';
-declare module '*.svg' {
-    const content: FC<SVGProps<SVGElement>>;
-    export default content;
-}
+declare module "*.png";
+declare module "*.jpeg";
+declare module "*.jpg";
+declare module "*.svg" {
+  const content: FC<SVGProps<SVGElement>>;
+  export default content;
+}