feat(#6): Add PWA functionality and service worker

src/assets/manifest.webmanifest

@@ -4,12 +4,12 @@
   "description": "A fun and simple selection wheel.",
   "icons": [
     {
-      "src": "./android-chrome-192x192.png",
+      "src": "android-chrome-192x192.png",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "./android-chrome-512x512.png",
+      "src": "android-chrome-512x512.png",
       "sizes": "512x512",
       "type": "image/png"
     }

src/index.ts

@@ -1,4 +1,5 @@
 import * as d3 from 'd3';
+import loadServiceWorker from './loadServiceWorker';
 
 require('./assets/favicon.ico');
 require('./assets/android-chrome-192x192.png');
@@ -208,3 +209,7 @@ function startSpinning() {
 
 const button = document.getElementById('startSpinning');
 button.onclick = startSpinning;
+
+if (process.env.NODE_ENV === 'production') {
+  loadServiceWorker();
+}

src/loadServiceWorker.ts

@@ -0,0 +1,28 @@
+export default function loadServiceWorker() {
+  let deferredPrompt;
+
+  window.addEventListener('beforeinstallprompt', (e) => {
+    const installApp = document.getElementById('install-offline-app');
+
+    installApp.addEventListener('click', async () => {
+      if (deferredPrompt !== null) {
+        deferredPrompt.prompt();
+        const { outcome } = await deferredPrompt.userChoice;
+        if (outcome === 'accepted') {
+          deferredPrompt = null;
+        }
+      }
+    });
+
+    document.getElementById('install-app-btn-container').style.display = 'block';
+    deferredPrompt = e;
+  });
+
+  window.addEventListener('load', () => {
+    navigator.serviceWorker.register('/service-worker.js');
+  });
+
+  if (window.matchMedia('(display-mode: standalone)').matches) {
+    document.getElementById('install-app-btn-container').style.display = 'none';
+  }
+}

src/serviceWorker.js

@@ -0,0 +1,22 @@
+import { precacheAndRoute } from 'workbox-precaching';
+import * as navigationPreload from 'workbox-navigation-preload';
+import { NetworkFirst, CacheFirst } from 'workbox-strategies';
+import { registerRoute, NavigationRoute, Route } from 'workbox-routing';
+
+// Precache the manifest
+// eslint-disable-next-line no-underscore-dangle, no-restricted-globals
+precacheAndRoute(self.__WB_MANIFEST);
+
+// Enable navigation preload - this should reduce navigation latency
+navigationPreload.enable();
+
+const navigationRoute = new NavigationRoute(new NetworkFirst({
+  cacheName: 'navigations',
+}));
+
+const imageAssetRoute = new Route(({ request }) => request.destination === 'image', new CacheFirst({
+  cacheName: 'image-assets',
+}));
+
+registerRoute(navigationRoute);
+registerRoute(imageAssetRoute);

src/template.html

@@ -26,5 +26,11 @@
         <textarea id="input-lines" rows="15" cols="60" name="text"
             placeholder="Enter names to be shuffled, one per line. Leave this area empty in order to use a default set of generated names."></textarea>
         <button id="startSpinning">Start spinning</button>
+
+        <p id="install-app-btn-container">
+            <button id="install-offline-app" class="btn btn-secondary btn-xs">
+                <span>Install the app (you can even use it offline!)</span>
+            </button>
+        </p>
     </body>
 </html>