feat(PWA): add Service Worker update notification

assets/js/pwa/app.js

@@ -3,7 +3,56 @@ layout: compress
 permalink: '/app.js'
 ---
 
-/* Registering Service Worker */
-if('serviceWorker' in navigator) {
-  navigator.serviceWorker.register('{{ "/sw.js" | relative_url }}');
-};
+const keyWaiting = 'sw-waiting';
+const $notification = $('#notification');
+const $btnRefresh = $('#notification .toast-body>button');
+
+function skipWating(registration) {
+  registration.waiting.postMessage('SKIP_WAITING');
+  localStorage.removeItem(keyWaiting);
+}
+
+if ('serviceWorker' in navigator) {
+  /* Registering Service Worker */
+  navigator.serviceWorker.register('{{ "/sw.js" | relative_url }}')
+    .then(registration => {
+      if (registration) {
+        registration.addEventListener('updatefound', () => {
+          /* console.log('updatefound'); */
+          let serviceWorker = registration.installing;
+
+          serviceWorker.addEventListener('statechange', () => {
+            /* console.log(`statechange -> ${serviceWorker.state}`); */
+            if (serviceWorker.state === 'installed') {
+              /* console.log('installed'); */
+              if (navigator.serviceWorker.controller) {
+                $notification.toast('show');
+                /* in case the user ignores the notification */
+                localStorage.setItem(keyWaiting, true);
+              }
+            }
+          });
+        });
+
+        $btnRefresh.click(() => {
+          skipWating(registration);
+          $notification.toast('hide');
+        });
+
+        /* there's a new Service Worker waiting to be activated */
+        if (localStorage.getItem(keyWaiting)) {
+          $notification.toast('show');
+        }
+      }
+    });
+
+  let refreshing = false;
+
+  /* Detect controller change and refresh all the opened tabs */
+  navigator.serviceWorker.addEventListener('controllerchange', () => {
+    if (!refreshing) {
+      window.location.reload();
+      refreshing = true;
+    }
+  });
+}

assets/js/pwa/sw.js

@@ -6,7 +6,7 @@ permalink: '/sw.js'
 
 self.importScripts('{{ "/assets/js/data/swcache.js" | relative_url }}');
 
-const cacheName = 'chirpy-{{ "now" | date: "%Y%m%d.%H%M" }}';
+const cacheName = 'chirpy-{{ "now" | date: "%Y%m%d.%H%M%S" }}';
 
 function verifyDomain(url) {
   for (const domain of allowedDomains) {
@@ -28,60 +28,62 @@ function isExcluded(url) {
   return false;
 }
 
-self.addEventListener('install', e => {
-  self.skipWaiting();
-  e.waitUntil(
+self.addEventListener('install', event => {
+  event.waitUntil(
     caches.open(cacheName).then(cache => {
       return cache.addAll(resource);
     })
   );
 });
 
-self.addEventListener('fetch', event => {
-  event.respondWith(
-    caches.match(event.request)
-      .then(response => {
-        if (response) {
-          return response;
-        }
-
-        return fetch(event.request)
-          .then(response => {
-            const url = event.request.url;
-
-            if (event.request.method !== 'GET' ||
-              !verifyDomain(url) ||
-              isExcluded(url)) {
-              return response;
-            }
-
-            /*
-              see: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>
-             */
-            let responseToCache = response.clone();
-
-            caches.open(cacheName)
-              .then(cache => {
-                /* console.log('[sw] Caching new resource: ' + event.request.url); */
-                cache.put(event.request, responseToCache);
-              });
-
-            return response;
-          });
-      })
-    );
-});
-
-self.addEventListener('activate', e => {
-  e.waitUntil(
+self.addEventListener('activate', event => {
+  event.waitUntil(
     caches.keys().then(keyList => {
-          return Promise.all(
-            keyList.map(key => {
-              if(key !== cacheName) {
-                return caches.delete(key);
-              }
-            })
-          );
+      return Promise.all(
+        keyList.map(key => {
+          if (key !== cacheName) {
+            return caches.delete(key);
+          }
+        })
+      );
+    })
+  );
+});
+
+self.addEventListener('message', (event) => {
+  if (event.data === 'SKIP_WAITING') {
+    self.skipWaiting();
+  }
+});
+
+self.addEventListener('fetch', event => {
+  event.respondWith(
+    caches.match(event.request).then(response => {
+      if (response) {
+        return response;
+      }
+
+      return fetch(event.request).then(response => {
+        const url = event.request.url;
+
+        if (event.request.method !== 'GET' ||
+              !verifyDomain(url) ||
+              isExcluded(url)) {
+          return response;
+        }
+
+        /*
+          see: <https://developers.google.com/web/fundamentals/primers/service-workers#cache_and_return_requests>
+        */
+        let responseToCache = response.clone();
+
+        caches.open(cacheName).then(cache => {
+          /* console.log('[sw] Caching new resource: ' + event.request.url); */
+          cache.put(event.request, responseToCache);
+        });
+
+        return response;
+      });
     })
   );
 });