From 2bd4c80ef91b7a02313a8eae5e4662c4cba45227 Mon Sep 17 00:00:00 2001 From: Erik Roemmelt Date: Sun, 3 Feb 2019 00:59:23 +0100 Subject: [PATCH] Update ServiceWorker --- public/serviceWorker.js | 101 ++++++++++++++++++++++++++++------------ 1 file changed, 71 insertions(+), 30 deletions(-) diff --git a/public/serviceWorker.js b/public/serviceWorker.js index eb8d03e..504db2c 100644 --- a/public/serviceWorker.js +++ b/public/serviceWorker.js @@ -1,11 +1,10 @@ 'use strict'; // NOTE: CacheKey & FilesToCache Lists -const cacheKey = 'omapp-v'; -const shellCacheKey = cacheKey + '1'; -const logicCasheKey = shellCacheKey + '.' + '0'; -const dataCacheKey = logicCasheKey + '.' + '0'; -const shellFilesToCache = [ +const cacheKey = 'omapp-'; +const staticCacheKey = cacheKey + 's-v' + '1'; +const dataCacheKey = casheKey + 'd-v' + '1'; +const staticFilesToCache = [ '/', '/manifest.json', '/index.html', @@ -23,9 +22,6 @@ const shellFilesToCache = [ '/lib/vue-router.js', '/style/style.css', ]; -const logicFilesToCache = [ - '', -]; const dataFilesToCache = [ '', ]; @@ -33,47 +29,55 @@ const dataFilesToCache = [ // NOTE: Registration done in main.js // NOTE: Install and activate: Populating cache -self.addEventListener('install', function (event) { +// Install new service worker even when old version still in use. +// Install happens only once a lifetime of a service worker. +self.addEventListener('install', function(event) { console.log('[ServiceWorker] Install'); + // don't wait + self.skipWaiting(); + // cache static files event.waitUntil( - caches.open(shellCacheKey).then(function (cache) { - console.log('[ServiceWorker] Cache shell files.'); - return cache.addAll(shellFilesToCache); - }).then(self.skipWaiting()), - caches.open(logicCasheKey).then(function (cache) { - console.log('[ServiceWorker] Cache logic files.'); - return cache.addAll(logicFilesToCache); - }).then(self.skipWaiting()), - caches.open(dataCacheKey).then(function (cache) { + caches.open(staticCacheKey).then(function(cache) { + console.log('[ServiceWorker] Cache static files.'); + return cache.addAll(staticFilesToCache); + }), + caches.open(dataCacheKey).then(function(cache) { console.log('[ServiceWorker] Cache data files.'); return cache.addAll(dataFilesToCache); - }).then(self.skipWaiting()) + }) ); }); // NOTE: Activate structure and delete older cache versions -self.addEventListener('activate', function (event) { - console.log('[ServiceWorker] Activate'); +// Activates new version of service worker. +// No fetch or pull is called before succesfull activate event. +self.addEventListener('activate', function(event) { + clients.claim(); + var cacheWhitelist = [staticCacheKey, dataCacheKey]; event.waitUntil( - caches.keys().then(function (cacheKeyList) { + caches.keys().then(function(cacheKeyList) { return Promise.all( - cacheKeyList.map(function (key) { - if (key !== shellCacheKey && key !== logicCasheKey && key !== dataCacheKey) { + cacheKeyList.map(function(key) { + if (cacheWhitelist.indexOf(key) === -1) { console.log('[ServiceWorker] Removing old cache', key); return caches.delete(key); } }) ); + }).then(() => { + console.log('[ServiceWorker] Activate'); }) ); + // Shorten activation time for initial [ServiceWorker] call. //return self.clients.claim(); }); // NOTE: Fetch structure // TODO: Setup fetching method -self.addEventListener('fetch', function (event) { - var dataUrl = 'localhost:8888'; // Provide HTTPS URL for query data. +self.addEventListener('fetch', function(event) { + const dataUrl = ' localhost:8888/'; // Provide HTTPS URL for query data. + // const url = new URL(event.request.url); console.log('[ServiceWorker] Fetch', event.request.url); //if (event.request.url.indexOf(dataUrl) > -1) { @@ -86,8 +90,8 @@ self.addEventListener('fetch', function (event) { */ /*event.respondWith( - caches.open(shellCacheKey).then(function (cache) { - return fetch(event.request).then(function (response) { + caches.open(staticCacheKey).then(function(cache) { + return fetch(event.request).then(function(response) { cache.put(event.request.url, response.clone()); return response; }); @@ -100,9 +104,46 @@ self.addEventListener('fetch', function (event) { * "Cache, falling back to the network" offline strategy: * https://jakearchibald.com/2014/offline-cookbook/#cache-falling-back-to-network */ + /* + // serve the cat SVG from the cache if the request is + // same-origin and the path is '/dog.svg' + if (url.origin == location.origin && url.pathname == '/dog.svg') { + event.respondWith(caches.match('/cat.svg')); + } + */ + event.respondWith( - caches.match(event.request).then(function (response) { - return response || fetch(event.request); + caches.match(event.request) + .then(function(response) { + if (response) { + return response; + } + return fetch(event.request).then( + function(response) { + // Check if we received a valid response + // - Ensure the response is valid. + // - Check the status is 200 on the response. + // - Make sure the response type is basic, which indicates that it's a request from our origin. + // This means that requests to third party assets aren't cached as well. + if(!response || response.status !== 200 || response.type !== 'basic') { + return response; + } + + // IMPORTANT: Clone the response. A response is a stream + // and because we want the browser to consume the response + // as well as the cache consuming the response, we need + // to clone it so we have two streams. + // - Reason: response is a stream and object can only consumed once + var responseToCache = response.clone(); + + caches.open(staticCacheKey) + .then(function(cache) { + cache.put(event.request, responseToCache); + }); + + return response; + } + ); }) ); //}