fix(frontend): service worker registration (#757)

www/package.json

@@ -147,6 +147,7 @@
     "stylelint": "14.15.0",
     "typescript": "4.9.3",
     "vite": "3.2.4",
+    "vite-plugin-pwa": "0.13.3",
     "vitest": "0.25.2",
     "wait-on": "6.0.1"
   }

www/src/components/layout/WithApplicationUpdate.tsx

@@ -6,13 +6,11 @@ import {
 } from 'react'
 
 import * as serviceWorker from '../../serviceWorkerRegistration'
-
 import PluralConfigurationContext from '../../contexts/PluralConfigurationContext'
 
 const COMMIT_KEY = 'git-commit'
 
 export const DEFAULT_COMMIT = 'plural-default-commit'
-
 export const getCommit = () => sessionStorage.getItem(COMMIT_KEY) || DEFAULT_COMMIT
 export const setCommit = sha => sessionStorage.setItem(COMMIT_KEY, sha)
 

www/src/service-worker.ts

@@ -10,8 +10,6 @@ clientsClaim()
 
 // Precache all the assets generated by your build process.
 // Their URLs are injected into the manifest variable below.
-// This variable must be present somewhere in your service worker file,
-// even if you decide not to use precaching. See https://cra.link/PWA
 // Filter out the "index.html" so that it is not cached as it breaks
 // the application when the code changes and SW caches it
 // @ts-expect-error

www/src/serviceWorkerRegistration.ts

@@ -1,7 +1,7 @@
 const isProduction = import.meta.env.PROD
-const url = import.meta.env.BASE_URL || ''
+const url = import.meta.url || ''
 const isServiceWorkerAvailable = 'serviceWorker' in navigator
-const serviceWorkerURL = `${url}/service-worker.js`
+const serviceWorkerURL = '/service-worker.js'
 const isLocalhost = Boolean(window.location.hostname === 'localhost'
   // [::1] is the IPv6 localhost address.
   || window.location.hostname === '[::1]'
@@ -25,7 +25,7 @@ export const register = (config: Config): void => {
   if (publicURL.origin !== window.location.origin) {
     // Our service worker won't work if PUBLIC_URL is on a different origin
     // from what our page is served on. This might happen if a CDN is used to
-    // serve assets; see https://github.com/facebook/create-react-app/issues/2374
+    // serve assets
     return
   }
 
@@ -53,7 +53,7 @@ const onLoad = config => async () => {
   // service worker/PWA documentation.
   navigator.serviceWorker.ready.then(() => {
     console.log('This web app is being served cache-first by a service '
-      + 'worker. To learn more, visit https://cra.link/PWA')
+      + 'worker.')
   })
 }
 
@@ -97,7 +97,7 @@ const onServiceWorkerStateChange = (registration: ServiceWorkerRegistration, con
   }
 
   console.log('New content is available and will be used when all '
-    + 'tabs for this page are closed. See https://cra.link/PWA.')
+    + 'tabs for this page are closed.')
 
   // Execute callback
   if (config?.onUpdate) {

www/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "target": "ESNext",
     "useDefineForClassFields": true,
-    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "lib": ["DOM", "DOM.Iterable", "ESNext", "WebWorker"],
     "allowJs": false,
     "skipLibCheck": true,
     "esModuleInterop": false,

www/vite.config.ts

@@ -4,12 +4,19 @@ import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 import basicSsl from '@vitejs/plugin-basic-ssl'
 import GlobalPolyFill from '@esbuild-plugins/node-globals-polyfill'
+import { VitePWA } from 'vite-plugin-pwa'
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     basicSsl(),
     react(),
+    VitePWA({
+      injectRegister: null,
+      filename: 'service-worker.ts',
+      srcDir: 'src',
+      strategies: 'injectManifest',
+    }),
   ],
   server: {
     port: 3001,