Add a basic installable service worker

basinbasin · May 9, 2020 · c22a5ef · c22a5ef
1 parent 669a3cc
commit c22a5ef
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 1 deletion.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -11,6 +11,11 @@ module.exports = function(grunt) {
                   cwd: 'fonts/',
                   src: ['**/*'],
                   dest: 'dist/fonts/'
+              },
+              {
+                expand: true,
+                src: ['serviceworker.js', 'manifest.webmanifest', 'icon.png'],
+                dest: 'dist/'
               }
           ]
       }

diff --git a/icon.png b/icon.png
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
   <title>Trizbort.io</title>
   <link rel="stylesheet" href="dist/fonts/fonts.css">
   <link rel="stylesheet" href="style.css">
+  <link rel="manifest" href="manifest.webmanifest">
 </head>
 <body>
   <p style="font-family: 'danielbd';">Trizbort.io</p>
@@ -69,5 +70,49 @@ <h1 class="title">(title)</h1>
       m.App.initialize();
     });
   </script>
+  <script type="module">
+    navigator.serviceWorker.register('serviceworker.js').then(reg => {
+
+      // refresh when new SW activates (work around "Update on reload")
+      let refreshing = false;
+      navigator.serviceWorker.addEventListener('controllerchange', () => {
+        if (refreshing) return;
+        refreshing = true;
+        window.location.reload();
+      });
+
+      // wait for reg.waiting or for reg.installing to covert to reg.waiting
+      function listenForWaitingServiceWorker(reg, callback) {
+        function awaitStateChange(sw) {
+          sw.addEventListener('statechange', () => {
+            if (sw.state === 'installed') callback(reg);
+          });
+        }
+        if (!reg) return;
+        if (reg.waiting) return callback(reg);
+        if (reg.installing) awaitStateChange(reg.installing);
+        reg.addEventListener('updatefound', () => awaitStateChange(reg.installing));
+      }
+
+      function promptUserToRefresh() {
+        let toast = document.getElementById("toast");
+        if (!toast) {
+          setTimeout(promptUserToRefresh, 5000);
+          return;
+        }
+        toast.style.display = 'block';
+        toast.querySelector('h3').innerHTML = "New version available";
+        let text = toast.querySelector('p')
+        text.innerHTML = "Please click here to refresh the page. <button>Refresh Now</button>";
+        text.querySelector("button").addEventListener('click', e => {
+          // skipWaiting will activate the waiting SW, which will refresh the page
+          reg.waiting.postMessage('skipWaiting');
+        })
+      }
+
+      listenForWaitingServiceWorker(reg, promptUserToRefresh);
+
+    });
+  </script>
 </body>
 </html>
diff --git a/manifest.webmanifest b/manifest.webmanifest
@@ -0,0 +1,14 @@
+{
+  "name": "Trizbort",
+  "short_name": "Trizbort",
+  "start_url": ".",
+  "display": "standalone",
+  "scope": ".",
+  "icons": [
+    {
+      "src": "icon.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    }
+  ]
+}
diff --git a/serviceworker.js b/serviceworker.js
@@ -0,0 +1,41 @@
+const version = '0';
+
+addEventListener('install', e => {
+  e.waitUntil(caches.open(version).then(cache => cache.addAll([
+    '.',
+    "./manifest.webmanifest",
+    "./icon.png",
+    './style.css',
+    './dist/handlebars.js',
+    './dist/app.min.js',
+    './dist/fonts/roboto-v20-latin-regular.woff2',
+    './dist/fonts/danielbd.woff2',
+    './dist/fonts/fonts.css',
+    './dist/icons.svg',
+    'https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.runtime.min.js',
+    'https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.8/FileSaver.min.js',
+    'https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.21.0/system.js',
+  ]).then(() => {
+    console.log("install finished")
+  })));
+});
+
+addEventListener('fetch', e => {
+  e.respondWith(
+    caches.match(e.request).then(cached => cached || fetch(e.request))
+  );
+});
+
+addEventListener('message', messageEvent => {
+  if (messageEvent.data === 'skipWaiting') return skipWaiting();
+});
+
+addEventListener('activate', activateEvent => {
+  activateEvent.waitUntil(
+    caches.keys().then(keyList => Promise.all(keyList.map(key => {
+      if (key !== version) {
+        return caches.delete(key);
+      }
+    })))
+  );
+});
diff --git a/styl/toast.styl b/styl/toast.styl
@@ -38,7 +38,8 @@
     &:first-child
       padding-right 6px
 
-
+  button
+    background white