Remove PWA functionality

frontend/public/sw.js

@@ -1,67 +1,19 @@
-/* eslint-disable no-restricted-globals */
+// TODO: This is temporary, as I've made the decision to move away
+// from a PWA, so must remove all existing service workers
 
-import { clientsClaim, skipWaiting } from 'workbox-core'
-import { ExpirationPlugin } from 'workbox-expiration'
-import { precacheAndRoute, createHandlerBoundToURL, cleanupOutdatedCaches } from 'workbox-precaching'
-import { registerRoute } from 'workbox-routing'
-import { StaleWhileRevalidate, NetworkFirst } from 'workbox-strategies'
-
-skipWaiting()
-clientsClaim()
-
-// Injection point
-precacheAndRoute(self.__WB_MANIFEST)
-
-cleanupOutdatedCaches()
-
-const fileExtensionRegexp = new RegExp('/[^/?]+\\.[^/]+$')
-registerRoute(
-  // Return false to exempt requests from being fulfilled by index.html.
-  ({ request, url }) => {
-    // If this isn't a navigation, skip.
-    if (request.mode !== 'navigate') {
-      return false
-    } // If this is a URL that starts with /_, skip.
-
-    if (url.pathname.startsWith('/_')) {
-      return false
-    } // If this looks like a URL for a resource, because it contains // a file extension, skip.
-
-    if (url.pathname.match(fileExtensionRegexp)) {
-      return false
-    } // Return true to signal that we want to use the handler.
-
-    return true
-  },
-  createHandlerBoundToURL('index.html')
-)
-
-registerRoute(
-  // Add in any other file extensions or routing criteria as needed.
-  ({ url }) => url.origin === self.location.origin && (
-    url.pathname.endsWith('.png')
-    || url.pathname.endsWith('.svg')
-    || url.pathname.endsWith('.jpg')
-    || url.pathname.endsWith('.jpeg')
-    || url.pathname.endsWith('.ico')
-    || url.pathname.endsWith('.ttf')
-    || url.pathname.endsWith('.woff')
-    || url.pathname.endsWith('.woff2')
-  ), // Customize this strategy as needed, e.g., by changing to CacheFirst.
-  new StaleWhileRevalidate({
-    cacheName: 'res',
-    plugins: [
-      // Ensure that once this runtime cache reaches a maximum size the
-      // least-recently used images are removed.
-      new ExpirationPlugin({ maxEntries: 50 }),
-    ],
+self.addEventListener("install", () => {
+  self.skipWaiting()
 })
-)
 
-registerRoute(
-  // Add in any other file extensions or routing criteria as needed.
-  ({ url }) => url.origin === self.location.origin && url.pathname.includes('i18n'),
-  new NetworkFirst({
-    cacheName: 'i18n',
+self.addEventListener("activate", () => {
+  self.registration
+    .unregister()
+    .then(() => self.clients.matchAll())
+    .then((clients) => {
+      clients.forEach((client) => {
+        if (client.url && "navigate" in client) {
+          client.navigate(client.url)
+        }
+      })
+    })
 })
-)

frontend/src/components/AvailabilityEditor/AvailabilityEditor.tsx

@@ -1,12 +1,12 @@
 import { Fragment, useCallback, useMemo, useRef, useState } from 'react'
 
 import Content from '/src/components/Content/Content'
+import { usePalette } from '/src/hooks/usePalette'
 import { useTranslation } from '/src/i18n/client'
 import { useStore } from '/src/stores'
 import useSettingsStore from '/src/stores/settingsStore'
 import { calculateTable, makeClass } from '/src/utils'
 
-import { usePalette } from '/hooks/usePalette'
 import styles from '../AvailabilityViewer/AvailabilityViewer.module.scss'
 
 interface AvailabilityEditorProps {

frontend/src/components/AvailabilityViewer/AvailabilityViewer.tsx

@@ -6,13 +6,13 @@ import { Temporal } from '@js-temporal/polyfill'
 import Content from '/src/components/Content/Content'
 import Legend from '/src/components/Legend/Legend'
 import { PersonResponse } from '/src/config/api'
+import { usePalette } from '/src/hooks/usePalette'
 import { useTranslation } from '/src/i18n/client'
 import { useStore } from '/src/stores'
 import useSettingsStore from '/src/stores/settingsStore'
 import { calculateAvailability, calculateTable, makeClass, relativeTimeFormat } from '/src/utils'
 
 import styles from './AvailabilityViewer.module.scss'
-import { usePalette } from '/hooks/usePalette'
 
 interface AvailabilityViewerProps {
   times: string[]

frontend/src/components/Settings/Settings.tsx

@@ -41,6 +41,16 @@ const Settings = () => {
     document.body.classList.toggle('dark', store?.theme === 'Dark')
   }, [store?.theme])
 
+  // TODO: This is temporary, as I've made the decision to move away
+  // from a PWA, so must remove all existing service workers
+  if (process.env.NODE_ENV !== 'development') {
+    useEffect(() => {
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.register('/sw.js')
+      }
+    }, [])
+  }
+
   return <>
     <button
       type="button"