From 7a597ba55cd15499f673a00b8c05fd246dcdd9e7 Mon Sep 17 00:00:00 2001 From: Martin Donnelly Date: Fri, 18 Jan 2019 00:28:03 +0000 Subject: [PATCH] swapped manifest file and added bumper --- src/index.html | 2 +- src/js/app.js | 35 +++++++++- src/service-worker.js | 150 +++++++++++++++++++++++++----------------- 3 files changed, 124 insertions(+), 63 deletions(-) diff --git a/src/index.html b/src/index.html index bd6789c..083d6a4 100644 --- a/src/index.html +++ b/src/index.html @@ -13,7 +13,7 @@ - + diff --git a/src/js/app.js b/src/js/app.js index 9e5beaf..db39c7e 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -6,6 +6,37 @@ require('backbone.modal'); const { TrainModel, TrainView } = require('./train'); const { RouteModel, RouteView } = require('./route'); +const live = true; + +if (live) { + const url = new URL(window.location.origin); + console.log('url', url); + + window.loc = url.origin; + + if ('serviceWorker' in navigator) { + // + navigator.serviceWorker.ready.then(function(reg) { + console.warn('Ready??', reg); + // main(); + }); + + window.addEventListener('load', function() { + navigator.serviceWorker + .register('./service-worker.js') + .then((r) => { + console.warn('Service Worker Registered', r.scope); + }) + .catch((error) => { + // registration failed + console.error(`Registration failed with ${ error}`); + }); + }); + + // + } +} + (function () { let offline = false; const bridger = new Worker('bridger.js'); @@ -24,7 +55,7 @@ const { RouteModel, RouteView } = require('./route'); { 'from': 'glc', 'to': 'bhi' }, { 'from': 'bhi', 'to': 'glc' }, { 'from': 'dbe', 'to': 'dmr' }, - { 'from': 'dmr', 'to': 'glc' }, + { 'from': 'dmr', 'to': 'glc' } ], 'views':{} @@ -82,7 +113,7 @@ const { RouteModel, RouteView } = require('./route'); } }; - /*if ('serviceWorker' in navigator) + /* if ('serviceWorker' in navigator) navigator.serviceWorker .register('./service-worker.js') .then(function() { diff --git a/src/service-worker.js b/src/service-worker.js index d05ec61..64b077b 100644 --- a/src/service-worker.js +++ b/src/service-worker.js @@ -11,10 +11,12 @@ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. -const CACHE_VERSION = { 'version': '0.0.10' }; -const dataCacheName = `traintimesData-v${CACHE_VERSION.version}`; +const CACHE_VERSION = { 'version': '0.0.18' }; +const PRECACHE = `traintimesData-v${CACHE_VERSION.version}`; const cacheName = `traintimePWA-final-${CACHE_VERSION.version}`; -const filesToCache = [ +const RUNTIME = 'runtime'; + +const PRECACHE_URLS = [ '/', '/index.html', '/service-worker.js', @@ -37,77 +39,105 @@ const filesToCache = [ '/img/Icon-512.png' ]; -self.addEventListener('install', function(e) { - console.log('[ServiceWorker] Install'); - e.waitUntil( - caches.open(cacheName).then(function(cache) { - console.log('[ServiceWorker] Caching app shell'); - - return cache.addAll(filesToCache); - }) +self.addEventListener('install', event => { + console.warn('Installing...'); + event.waitUntil( + caches.open(PRECACHE) + .then(cache => cache.addAll(PRECACHE_URLS)) + .then(self.skipWaiting()) ); }); -self.addEventListener('activate', function(e) { - console.log('[ServiceWorker] Activate'); - e.waitUntil( - caches.keys().then(function(keyList) { - return Promise.all(keyList.map(function(key) { - if (key !== cacheName && key !== dataCacheName) { - console.log('[ServiceWorker] Removing old cache', key); - - return caches.delete(key); - } +// The activate handler takes care of cleaning up old caches. +self.addEventListener('activate', event => { + console.warn('Activate...'); + const currentCaches = [PRECACHE, RUNTIME]; + event.waitUntil( + caches.keys().then(cacheNames => { + return cacheNames.filter(cacheName => !currentCaches.includes(cacheName)); + }).then(cachesToDelete => { + return Promise.all(cachesToDelete.map(cacheToDelete => { + return caches.delete(cacheToDelete); })); - }) + }).then(() => self.clients.claim()) ); - - /* - * Fixes a corner case in which the app wasn't returning the latest data. - * You can reproduce the corner case by commenting out the line below and - * then doing the following steps: 1) load app for first time so that the - * initial New York City data is shown 2) press the refresh button on the - * app 3) go offline 4) reload the app. You expect to see the newer NYC - * data, but you actually see the initial data. This happens because the - * service worker is not yet activated. The code below essentially lets - * you activate the service worker faster. - */ - return self.clients.claim(); }); -self.addEventListener('fetch', function(e) { - console.warn('[Service Worker] Fetch', e.request.url); - const dataUrl = '/getnexttraintimes?'; - if (e.request.url.indexOf(dataUrl) > -1) { - console.log('!'); +// The fetch handler serves responses for same-origin resources from a cache. +// If no response is found, it populates the runtime cache with the response +// from the network before returning it to the page. +self.addEventListener('fetch', event => { + console.warn('Fetch', event.request.url); + // Skip cross-origin requests, like those for Google Analytics. + /* if (event.request.url.startsWith(self.location.origin)) { + console.log('One of our requests..'); + event.respondWith( + caches.match(event.request).then(cachedResponse => { + if (cachedResponse) { + console.log('cachedResponse', cachedResponse); + return cachedResponse; + } - /* - * When the request URL contains dataUrl, the app is asking for fresh - * weather data. In this case, the service worker always goes to the - * network and then caches the response. This is called the "Cache then - * network" strategy: - * https://jakearchibald.com/2014/offline-cookbook/#cache-then-network - */ - e.respondWith( - caches.open(dataCacheName).then(function(cache) { - return fetch(e.request).then(function(response) { - cache.put(e.request.url, response.clone()); + return caches.open(RUNTIME).then(cache => { + return fetch(event.request).then(response => { + // Put a copy of the response in the runtime cache. + return cache.put(event.request, response.clone()).then(() => { + console.log('fetch cache response', response); + return response; + }); + }); + }); + }) + ); + }*/ - return response; + if (event.request.url.startsWith(self.location.origin)) { + console.log('!!', event.request); + + /* event.respondWith( + caches.open(RUNTIME).then(function(cache) { + return cache.match(event.request).then(function (response) { + console.log('£', response); + + return response || fetch(event.request).then(function(response) { + cache.put(event.request, response.clone()); + + return response; + }); + }); + }) + );*/ + + event.respondWith( + caches.open(RUNTIME).then(function(cache) { + return cache.match(event.request).then(function (response) { + return response || fetch(event.request).then(function(response) { + cache.put(event.request, response.clone()); + + return response; + }); }); }) ); } - else - /* - * The app is asking for app shell files. In this scenario the app uses the - * "Cache, falling back to the network" offline strategy: - * https://jakearchibald.com/2014/offline-cookbook/#cache-falling-back-to-network - */ - e.respondWith( - caches.match(e.request).then(function(response) { - return response || fetch(e.request); + if (event.request.url.startsWith('https://maps.googleapis.com')) { + const url = new URL(event.request.url); + const locCache = `loc-${url.searchParams.get('latlng')}`; + event.respondWith( + caches.match(locCache).then(cachedResponse => { + if (cachedResponse) + return cachedResponse; + + return caches.open(RUNTIME).then(cache => { + return fetch(event.request).then(response => { + // Put a copy of the response in the runtime cache. + return cache.put(locCache, response.clone()).then(() => { + return response; + }); + }); + }); }) ); + } });