From bc3de9915313939028a326ce681943bee07cf936 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20W=C3=B3jcik?=
 <1711174+lwojcik@users.noreply.github.com>
Date: Sun, 20 Aug 2023 16:02:13 +0200
Subject: [PATCH] Improve service worker implementation + make it optional
 (#63)

---
 _11ty/plugins.js                              | 34 +++++++++++++++----
 content/_data/siteConfig.js                   |  3 +-
 .../partials/head/service-worker.njk          | 34 +++++++++++++++++--
 3 files changed, 62 insertions(+), 9 deletions(-)

diff --git a/_11ty/plugins.js b/_11ty/plugins.js
index e1a3caf..17c99a9 100644
--- a/_11ty/plugins.js
+++ b/_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];
diff --git a/content/_data/siteConfig.js b/content/_data/siteConfig.js
index 1b621e3..ff96431 100644
--- a/content/_data/siteConfig.js
+++ b/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',
diff --git a/content/_includes/partials/head/service-worker.njk b/content/_includes/partials/head/service-worker.njk
index 728dc83..a1d67c4 100644
--- a/content/_includes/partials/head/service-worker.njk
+++ b/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>
\ No newline at end of file
+  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 %}
\ No newline at end of file