From 0a9a9bd0930776ddd40c3ceb9512e71468e972db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Kasper=20Rynning-T=C3=B8nnesen?= Date: Wed, 27 Apr 2016 00:33:37 +0200 Subject: [PATCH] updated service worker --- service-worker.js | 158 ++++++++++++++++++++++++++++------------------ 1 file changed, 96 insertions(+), 62 deletions(-) diff --git a/service-worker.js b/service-worker.js index 305a7a45..e36d4095 100644 --- a/service-worker.js +++ b/service-worker.js @@ -1,68 +1,102 @@ -importScripts('/static/dist/lib/cache-polyfill.js'); +/* + Copyright 2015 Google Inc. All Rights Reserved. + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + http://www.apache.org/licenses/LICENSE-2.0 + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + 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. +*/ -var CACHE_VERSION = 'app-v1'; -var CACHE_FILES = [ - '/static/images/favicon.png', - '/static/css/style.css', - '/static/css/materialize.min.css', - 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.min.css', - 'https://fonts.googleapis.com/icon?family=Material+Icons', - 'https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js', - 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js', - '/static/dist/lib/materialize.min.js', - 'https://cdn.socket.io/socket.io-1.4.5.js', - '/static/dist/lib/jquery.lazyload.js', - '/static/dist/lib/color-thief.js', - '/static/dist/main.min.js' -]; +'use strict'; -self.addEventListener('install', function (event) { - event.waitUntil( - caches.open(CACHE_VERSION) - .then(function (cache) { - console.log('Opened cache'); - return cache.addAll(CACHE_FILES); - }) - ); -}); +// Incrementing CACHE_VERSION will kick off the install event and force previously cached +// resources to be cached again. +const CACHE_VERSION = 1; +let CURRENT_CACHES = { + offline: 'offline-v' + CACHE_VERSION +}; +const OFFLINE_URL = '/'; -self.addEventListener('activate', function (event) { - event.waitUntil( - caches.keys().then(function(keys){ - return Promise.all(keys.map(function(key, i){ - if(key !== CACHE_VERSION){ - return caches.delete(keys[i]); - } - })) - }) - ) -}); +function createCacheBustedRequest(url) { + let request = new Request(url, {cache: 'reload'}); + // See https://fetch.spec.whatwg.org/#concept-request-mode + // This is not yet supported in Chrome as of M48, so we need to explicitly check to see + // if the cache: 'reload' option had any effect. + if ('cache' in request) { + return request; + } -self.addEventListener('fetch', function (event) { - event.respondWith( - caches.match(event.request).then(function(res){ - if(res){ - return res; - } - requestBackend(event); - }) - ) -}); + // If {cache: 'reload'} didn't have any effect, append a cache-busting URL parameter instead. + let bustedUrl = new URL(url, self.location.href); + bustedUrl.search += (bustedUrl.search ? '&' : '') + 'cachebust=' + Date.now(); + return new Request(bustedUrl); +} -function requestBackend(event){ - var url = event.request.clone(); - return fetch(url).then(function(res){ - //if not a valid response send the error - if(!res || res.status !== 200 || res.type !== 'basic'){ - return res; - } - - var response = res.clone(); - - caches.open(CACHE_VERSION).then(function(cache){ - cache.put(event.request, response); - }); - - return res; +self.addEventListener('install', event => { + event.waitUntil( + // We can't use cache.add() here, since we want OFFLINE_URL to be the cache key, but + // the actual URL we end up requesting might include a cache-busting parameter. + fetch(createCacheBustedRequest(OFFLINE_URL)).then(function(response) { + return caches.open(CURRENT_CACHES.offline).then(function(cache) { + return cache.put(OFFLINE_URL, response); + }); }) -} \ No newline at end of file + ); +}); + +self.addEventListener('activate', event => { + // Delete all caches that aren't named in CURRENT_CACHES. + // While there is only one cache in this example, the same logic will handle the case where + // there are multiple versioned caches. + let expectedCacheNames = Object.keys(CURRENT_CACHES).map(function(key) { + return CURRENT_CACHES[key]; + }); + + event.waitUntil( + caches.keys().then(cacheNames => { + return Promise.all( + cacheNames.map(cacheName => { + if (expectedCacheNames.indexOf(cacheName) === -1) { + // If this cache name isn't present in the array of "expected" cache names, + // then delete it. + console.log('Deleting out of date cache:', cacheName); + return caches.delete(cacheName); + } + }) + ); + }) + ); +}); + +self.addEventListener('fetch', event => { + // We only want to call event.respondWith() if this is a navigation request + // for an HTML page. + // request.mode of 'navigate' is unfortunately not supported in Chrome + // versions older than 49, so we need to include a less precise fallback, + // which checks for a GET request with an Accept: text/html header. + if (event.request.mode === 'navigate' || + (event.request.method === 'GET' && + event.request.headers.get('accept').includes('text/html'))) { + console.log('Handling fetch event for', event.request.url); + event.respondWith( + fetch(createCacheBustedRequest(event.request.url)).catch(error => { + // The catch is only triggered if fetch() throws an exception, which will most likely + // happen due to the server being unreachable. + // If fetch() returns a valid HTTP response with an response code in the 4xx or 5xx + // range, the catch() will NOT be called. If you need custom handling for 4xx or 5xx + // errors, see https://github.com/GoogleChrome/samples/tree/gh-pages/service-worker/fallback-response + console.log('Fetch failed; returning offline page instead.', error); + return caches.match(OFFLINE_URL); + }) + ); + } + + // If our if() condition is false, then this fetch handler won't intercept the request. + // If there are any other fetch handlers registered, they will get a chance to call + // event.respondWith(). If no fetch handlers call event.respondWith(), the request will be + // handled by the browser as if there were no service worker involvement. +});