Add service worker back after Esbuild switch

Dockerfile

@@ -72,9 +72,9 @@ COPY api/data /app/data
 
 RUN apt-get update \
   # Required dependencies
-  && apt-get install -y libdlib19 \
+  && apt-get install -y libdlib19 ffmpeg \
   # Optional dependencies
-  && apt-get install -y ffmpeg darktable; exit 0 \
+  && apt-get install -y darktable; exit 0 \
   # Cleanup
   && apt-get clean && rm -rf /var/lib/apt/lists/*
 

ui/build.js

@@ -64,4 +64,10 @@ if (watchMode) {
   })
 } else {
   esbuild.buildSync(esbuildOptions)
+
+  require('workbox-build').generateSW({
+    globDirectory: 'dist/',
+    globPatterns: ['**/*.{png,svg,woff2,ttf,eot,woff,js,ico,html,json,css}'],
+    swDest: 'dist/service-worker.js',
+  })
 }

ui/package.json

@@ -55,10 +55,10 @@
     "jest": "^26.6.3",
     "lint-staged": "^10.5.3",
     "mapbox-gl": "^1.13.0",
-    "parcel-plugin-sw-cache": "^0.3.1",
     "prettier": "^2.2.1",
     "react-router-prop-types": "^1.0.5",
-    "react-test-renderer": "^17.0.1"
+    "react-test-renderer": "^17.0.1",
+    "workbox-build": "^6.1.1"
   },
   "cache": {
     "swDest": "service-worker.js"

ui/src/registerServiceWorker.js

@@ -8,33 +8,16 @@
 // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
 // This link also includes instructions on opting out of this behavior.
 
-const isLocalhost = Boolean(
+const isProduction = process.env.NODE_ENV === 'production'
-  window.location.hostname === 'localhost' ||
-    // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
-    // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
-)
 
 export default function register() {
-  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+  if (isProduction && 'serviceWorker' in navigator) {
     window.addEventListener('load', () => {
       const swUrl = `/service-worker.js`
 
-      if (isLocalhost) {
+      if (!isProduction) {
         // This is running on localhost. Lets check if a service worker still exists or not.
         checkValidServiceWorker(swUrl)
-
-        // Add some additional logging to localhost, pointing developers to the
-        // 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://goo.gl/SC7cgQ'
-          )
-        })
       } else {
         // Is not local host. Just register service worker
         registerValidSW(swUrl)