Try To fetch latest data first then shift to cached one. (#1819)

* fetch latest data first then shift to cached one * improved offline experience Co-authored-by: Jeffrey Warren <jeff@unterbahn.com>
publiclab · Feb 27, 2021 · 71bf8c8 · 71bf8c8
1 parent 0580218
commit 71bf8c8
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 37 deletions.
diff --git a/examples/lib/cache.js b/examples/lib/cache.js
@@ -1,5 +1,3 @@
-const { reject } = require("lodash");
-
 var setupCache = function() {
   let newWorker; // When sw.js is changed, this is the new service worker generated.
 
@@ -21,34 +19,38 @@ var setupCache = function() {
     // Register the service worker.
     navigator.serviceWorker.register('sw.js', { scope: '/examples/' })
       .then(function(registration) {
-        registration.addEventListener('updatefound', () => {
-          // When sw.js has been changed, get a reference to the new service worker.
-          newWorker = registration.installing;
 
-          if(!newWorker){
-            return reject(new Error('error in installing service worker'));
-          }
+          return new Promise(function(resolve,reject){
+
+            registration.addEventListener('updatefound', () => {
+              // When sw.js has been changed, get a reference to the new service worker.
+              newWorker = registration.installing;
+
+              if(!newWorker){
+                return reject(new Error('error in installing service worker'));
+              }
 
-          newWorker.addEventListener('statechange', () => {
-            // Check if service worker state has changed.
-            switch(newWorker.state) {
-              case 'installed':
-                if(navigator.serviceWorker.controller) {
-                  // New service worker available; prompt the user to update.
-                  showUpdateModal();
-                  $('#reload').on('click',(e) => {
-                    e.preventDefault();
-                    console.log('New Service Worker Installed Successfully');
-                    location.reload();
-                    return resolve();
-                  })
-                }
-                // No updates available; do nothing.
-                break;
+            newWorker.addEventListener('statechange', () => {
+              // Check if service worker state has changed.
+              switch(newWorker.state) {
+                case 'installed':
+                  if(navigator.serviceWorker.controller) {
+                    // New service worker available; prompt the user to update.
+                    showUpdateModal();
+                    $('#reload').on('click',(e) => {
+                      e.preventDefault();
+                      console.log('New Service Worker Installed Successfully');
+                      location.reload();
+                      return resolve();
+                    })
+                  }
+                  // No updates available; do nothing.
+                  break;
 
-              case 'redundant':
-                return reject(new Error('installing new service worker now became redundant'));
-            }
+                case 'redundant':
+                  return reject(new Error('installing new service worker now became redundant'));
+              }
+            })
           })
         })
       }).catch(err => {

diff --git a/examples/offline.html b/examples/offline.html
@@ -0,0 +1,34 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Error 502 | Bad Gateway</title>
+    <style>
+        body{
+            background-color:#d3d3d3;
+        }
+        p {
+            font-size:20px;
+        }
+        main {
+            display: flex;
+            flex-direction:column;
+            text-align: center;
+            justify-content: center;
+        }
+        a {
+            text-decoration: none;
+            color:blue;
+        }
+
+    </style>
+</head>
+<body>
+    <main> 
+        <p>Error 502: something went wrong.</p>
+        <p>It seems that you are not connected to internet.<br>Please try after some time.</p>
+        <a href="/">Go To Home Page</a>
+    </main>
+</body>
+</html>
diff --git a/examples/sw.js b/examples/sw.js
@@ -1,6 +1,14 @@
 const staticCacheName = 'image-sequencer-static-v3.6.0';
-self.addEventListener('install', event => {
-  console.log('Attempting to install service worker');
+self.addEventListener('install', function(e) {
+  e.waitUntil(
+    caches.open(staticCacheName).then(function(cache) {
+      console.log('Attempting to install service worker');
+      return cache.addAll([
+        '/',
+        '/examples/offline.html'
+      ]);
+    })
+  );
 });
 
 self.addEventListener('activate', function(e) {
@@ -21,16 +29,28 @@ self.addEventListener('activate', function(e) {
 
 self.addEventListener('fetch', function(event) {
   event.respondWith(
-    caches.open(staticCacheName).then(function(cache) {
-      return cache.match(event.request).then(function (response) {
-        return response || fetch(event.request).then(function(response) {
-          if(event.request.method == 'GET')
-            cache.put(event.request, response.clone());
-          return response;
+    // Try to fetch the latest data first.
+    fetch(event.request)
+      .then(function(response) {
+        return caches.open(staticCacheName)
+          .then(function(cache) {
+            if(event.request.method == 'GET'){
+              cache.put(event.request.url, response.clone());
+            }
+            return response;
+        })
+      })
+      .catch(function(err) {
+      // Now the request has been failed so show cached data.
+        return caches.match(event.request).then(function(res){
+          if (res === undefined) { 
+            // Display offline page
+            return caches.match('offline.html');
+          }
+          return res;
         });
-      });
     })
-  );
+  )
 });
 
 // When the update modal sends a 'skipWaiting' message, call the skipWaiting method.