From 71bf8c872b0d26d05a8f9c9fe3ff2fff73289751 Mon Sep 17 00:00:00 2001 From: Vivek Singh Date: Sat, 27 Feb 2021 22:08:45 +0530 Subject: [PATCH] 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 --- examples/lib/cache.js | 56 ++++++++++++++++++++++--------------------- examples/offline.html | 34 ++++++++++++++++++++++++++ examples/sw.js | 40 +++++++++++++++++++++++-------- 3 files changed, 93 insertions(+), 37 deletions(-) create mode 100644 examples/offline.html diff --git a/examples/lib/cache.js b/examples/lib/cache.js index 969ea3c6..2f44da57 100644 --- 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){ - 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; + registration.addEventListener('updatefound', () => { + // When sw.js has been changed, get a reference to the new service worker. + newWorker = registration.installing; - case 'redundant': - return reject(new Error('installing new service worker now became redundant')); - } + 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; + + 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 new file mode 100644 index 00000000..0c9844d5 --- /dev/null +++ b/examples/offline.html @@ -0,0 +1,34 @@ + + + + + + Error 502 | Bad Gateway + + + +
+

Error 502: something went wrong.

+

It seems that you are not connected to internet.
Please try after some time.

+ Go To Home Page +
+ + \ No newline at end of file diff --git a/examples/sw.js b/examples/sw.js index bb5e28b7..ea874487 100644 --- 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.