Updated Service Worker #4 with latest code

Author: JuanAr

assets/serviceWorkers/serviceWorker4/pwabuilder-sw-register.js

@@ -1,15 +1,14 @@
 //This is the service worker with the Cache-first network
 
-//Add this below content to your HTML page, or add the js file to your page at the very top to register service worker
+//Add this below content to your HTML page, or add the js file to your page at the very top to register sercie worker
 if (navigator.serviceWorker.controller) {
-  console.log('[Manifoldjs] active service worker found, no need to register')
+  console.log('[PWA Builder] active service worker found, no need to register')
 } else {
 
 //Register the ServiceWorker
-  navigator.serviceWorker.register('manifoldjs-sw.js', {
+  navigator.serviceWorker.register('pwabuilder-sw.js', {
     scope: './'
   }).then(function(reg) {
     console.log('Service worker has been registered for scope:'+ reg.scope);
   });
-}
-
+}

assets/serviceWorkers/serviceWorker4/pwabuilder-sw.js

@@ -1,55 +1,64 @@
 //This is the service worker with the Cache-first network
 
+var CACHE = 'pwabuilder-precache';
+var precacheFiles = [
+      /* Add an array of files to precache for your app */
+    ];
+
 //Install stage sets up the cache-array to configure pre-cache content
-self.addEventListener('install', function(event) {
-  event.waitUntil(preLoad());
+self.addEventListener('install', function(evt) {
+  console.log('The service worker is being installed.');
+  evt.waitUntil(precache().then(function() {
+    console.log('[ServiceWorker] Skip waiting on install');
+      return self.skipWaiting();
+
+  })
+  );
+});
+
+
+//allow sw to control of current page
+self.addEventListener('activate', function(event) {
+console.log('[ServiceWorker] Claiming clients for current page');
+      return self.clients.claim();
+
+});
+
+self.addEventListener('fetch', function(evt) {
+  console.log('The service worker is serving the asset.'+ evt.request.url);
+  evt.respondWith(fromCache(evt.request).catch(fromServer(evt.request)));
+  evt.waitUntil(update(evt.request));
 });
 
-var preLoad = function(){
-  console.log('[Manifoldjs] Install Event processing');
-  return caches.open('manifoldjs-offline').then(function(cache) {
-    console.log('[Manifoldjs] Cached index and offline page during Install');
-    return cache.addAll(['/offline.html', '/index.html']);
+
+function precache() {
+  return caches.open(CACHE).then(function (cache) {
+    return cache.addAll(precacheFiles);
   });
 }
 
-self.addEventListener('fetch', function(event) {
-  console.log('The service worker is serving the asset.');
-  event.respondWith(checkResponse(event.request).catch(function() {
-    return returnFromCache(event.request)}
-  ));
-  event.waitUntil(addToCache(event.request));
-});
 
-var checkResponse = function(request){
-  return new Promise(function(fulfill, reject) {
-    fetch(request).then(function(response){
-      if(response.status !== 404) {
-        fulfill(response)
-      } else {
-        reject()
-      }
-    }, reject)
+function fromCache(request) {
+  //we pull files from the cache first thing so we can show them fast
+  return caches.open(CACHE).then(function (cache) {
+    return cache.match(request).then(function (matching) {
+      return matching || Promise.reject('no-match');
+    });
   });
-};
+}
 
-var addToCache = function(request){
-  return caches.open('manifoldjs-offline').then(function (cache) {
+
+function update(request) {
+  //this is where we call the server to get the newest version of the 
+  //file to use the next time we show view
+  return caches.open(CACHE).then(function (cache) {
     return fetch(request).then(function (response) {
-      console.log('[manifoldjs] add page to offline'+response.url)
       return cache.put(request, response);
     });
   });
-};
+}
 
-var returnFromCache = function(request){
-  return caches.open('manifoldjs-offline').then(function (cache) {
-    return cache.match(request).then(function (matching) {
-     if(!matching || matching.status == 404) {
-       return cache.match('offline.html')
-     } else {
-       return matching
-     }
-    });
-  });
-};
+function fromServer(request){
+  //this is the fallback if it is not in the cahche to go to the server and get it
+return fetch(request).then(function(response){ return response})
+}