Improve service worker config

gdg-x · Jan 22, 2022 · 1f4e18b · 1f4e18b
1 parent 13aaf4d
commit 1f4e18b
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 9 deletions.
diff --git a/data/resources.json b/data/resources.json
@@ -18,6 +18,8 @@
   "offlineMessage": "You can still work offline.",
   "cachingComplete": "Caching complete! Future visits will work offline.",
   "newVersionAvailable": "A new version of this app is available.",
+  "newVersionDownloading": "A update is being installed in the background.",
+  "serviceWorkerError": "Error caching for offline use.",
   "refresh": "Refresh",
   "position": "Position",
   "country": "Country",

diff --git a/firebase.json b/firebase.json
@@ -37,6 +37,15 @@
             "value": "same-origin"
           }
         ]
+      },
+      {
+        "source": "/@(service-worker|firebase-messaging-sw).js",
+        "headers": [
+          {
+            "key": "Cache-Control",
+            "value": "no-cache, no-store, must-revalidate"
+          }
+        ]
       }
     ]
   },

diff --git a/src/service-worker-registration.ts b/src/service-worker-registration.ts
@@ -20,8 +20,18 @@ export const registerServiceWorker = () => {
         duration: 0,
       });
     },
+    updatefound() {
+      showToast({
+        message: '{$ newVersionDownloading $}',
+        duration: 0,
+      });
+    },
     error(e) {
       error('Service worker registration failed:', e);
+      showToast({
+        message: '{$ serviceWorkerError $}',
+        duration: 0,
+      });
     },
   });
 };

diff --git a/workbox.config.ts b/workbox.config.ts
@@ -3,15 +3,21 @@
 import type { GenerateSWOptions } from 'workbox-build';
 
 const ONE_WEEK = 60 * 60 * 24 * 7;
-const FIREBASE_RESERVED_URLS = /^(?!\/__).*/;
+// Firebase Reserved URLs https://firebase.google.com/docs/hosting/reserved-urls
+const FIREBASE_RESERVED_URLS = /^\/__\/.*/;
+const FIREBASE_COFIG_URL = '/__/firebase/init.json';
+const STATIC_EXPIRATION = {
+  maxAgeSeconds: ONE_WEEK,
+  maxEntries: 200,
+};
 
 export const workboxConfig: GenerateSWOptions = {
+  mode: 'debug', // TODO: Remove mode
   swDest: 'dist/service-worker.js',
   navigateFallback: '/index.html',
-  navigateFallbackDenylist: [
-    FIREBASE_RESERVED_URLS, // Private Firebase URLs
-  ],
+  navigateFallbackDenylist: [FIREBASE_RESERVED_URLS],
   skipWaiting: true,
+  clientsClaim: true,
   offlineGoogleAnalytics: true,
   globDirectory: 'dist',
   globPatterns: ['**/*.{html,js,css,json,svg,md}'],
@@ -21,31 +27,34 @@ export const workboxConfig: GenerateSWOptions = {
       handler: 'NetworkFirst',
       options: {
         cacheName: 'images-cache',
-        expiration: {
-          maxAgeSeconds: ONE_WEEK,
-          maxEntries: 200,
-        },
+        expiration: STATIC_EXPIRATION,
       },
     },
     {
       urlPattern: /https:\/\/maps\.googleapis\.com\/maps.*/,
       handler: 'NetworkFirst',
       options: {
         cacheName: 'google-maps-cache',
+        expiration: STATIC_EXPIRATION,
       },
     },
     {
-      urlPattern: FIREBASE_RESERVED_URLS,
+      urlPattern: FIREBASE_COFIG_URL,
       handler: 'NetworkFirst',
       options: {
         cacheName: 'firebase-cache',
+        expiration: {
+          maxAgeSeconds: ONE_WEEK,
+          maxEntries: 10,
+        },
       },
     },
     {
       urlPattern: /https:\/\/firebasestorage\.googleapis\.com\/.*/,
       handler: 'NetworkFirst',
       options: {
         cacheName: 'firebase-storage-cache',
+        expiration: STATIC_EXPIRATION,
       },
     },
     {
@@ -56,6 +65,7 @@ export const workboxConfig: GenerateSWOptions = {
         cacheableResponse: {
           statuses: [0, 200],
         },
+        expiration: STATIC_EXPIRATION,
       },
     },
   ],