Improve service worker implementation + make it optional (#63)

_11ty/plugins.js

@@ -1,4 +1,3 @@
-/* eslint-disable indent */
 const { IS_PRODUCTION } = require('./constants');
 const siteConfig = require('../content/_data/siteConfig');
 const pluginRss = require('@11ty/eleventy-plugin-rss');
@@ -18,6 +17,32 @@ const productionPlugins = IS_PRODUCTION
     ]
   : [];
 
+const pwaPluginConfig = siteConfig.enablePWA
+  ? [
+      {
+        body: pluginPWA,
+        options: {
+          cacheId: siteConfig.site.title,
+          runtimeCaching: [
+            {
+              urlPattern: /\/$/,
+              handler: 'NetworkFirst',
+            },
+            {
+              urlPattern: /\.html$/,
+              handler: 'NetworkFirst',
+            },
+            {
+              urlPattern:
+                /^.*\.(jpg|png|mp4|gif|webp|ico|svg|woff2|woff|eot|ttf|otf|ttc|json)$/,
+              handler: 'StaleWhileRevalidate',
+            },
+          ],
+        },
+      },
+    ]
+  : [];
+
 const plugins = [
   {
     body: EleventyHtmlBasePlugin,
@@ -31,9 +56,6 @@ const plugins = [
   {
     body: eleventyNavigationPlugin,
   },
-  {
-    body: pluginPWA,
-  },
   {
     body: syntaxHighlight,
   },
@@ -52,8 +74,8 @@ const plugins = [
         background_color: siteConfig.manifestJson.backgroundColor,
         orientation: 'any',
       },
-    }
+    },
   },
 ];
 
-module.exports = [...plugins, ...productionPlugins];
+module.exports = [...plugins, ...pwaPluginConfig, ...productionPlugins];

content/_data/siteConfig.js

@@ -145,8 +145,9 @@ module.exports = {
     postsPerPage: 10,
   },
   // ---------------------------------------------------------------------------
-  // Settings for PWA manifest file
+  // Settings for PWA
   // ---------------------------------------------------------------------------
+  enablePWA: false, // If enabled, service worker for PWA will be registered
   manifestJson: {
     // Language of PWA application
     language: 'en-US',

content/_includes/partials/head/service-worker.njk

@@ -1,3 +1,33 @@
+{% if siteConfig.enablePWA %}
 <script>
-  if ('serviceWorker' in navigator) navigator.serviceWorker.register('/service-worker.js');
-</script>
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.register('/service-worker.js')
+    .then(registration => {
+      registration.addEventListener('updatefound', () => {
+        const newWorker = registration.installing;
+
+        newWorker.addEventListener('statechange', () => {
+          if (newWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              window.location.reload();
+            }
+          }
+        });
+      });
+    })
+    .catch(error => {
+      console.error('Service Worker registration failed:', error);
+    });
+  }
+</script>
+{% else %}
+<script>
+  if ('serviceWorker' in navigator)  {
+    navigator.serviceWorker.getRegistrations().then(function(registrations) {
+      for(let registration of registrations) {
+        registration.unregister();
+      }
+    });
+  }
+</script>
+{% endif %}