mirror of
https://github.com/KevinMidboe/zoff.git
synced 2025-10-29 18:00:23 +00:00
updated service worker
This commit is contained in:
Kasper Rynning-Tønnesen
@@ -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);
|
||||
});
|
||||
})
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
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.
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user