feature: directed cache sw

This commit is contained in:
Jean-Baptiste Pasquier 2020-10-28 17:16:34 +01:00
parent f8763b28a4
commit 3e4cff299e
2 changed files with 107 additions and 64 deletions

View File

@ -1,5 +1,11 @@
document.addEventListener("DOMContentLoaded", function () { if('serviceWorker' in navigator) {
if('serviceWorker' in navigator) { var refreshing;
navigator.serviceWorker.register('/sw.js'); navigator.serviceWorker.addEventListener('controllerchange', () => {
} if (refreshing) {
}); return;
}
refreshing = true;
window.location.reload();
});
navigator.serviceWorker.register('/sw.js');
}

157
src/sw.js
View File

@ -1,74 +1,111 @@
const CACHE_NAME = 'hubl-store-dev';
self.addEventListener('install', function (e) { self.addEventListener('install', function (e) {
e.waitUntil( e.waitUntil(
caches.open('hubl-store').then(function (cache) { caches.open(CACHE_NAME).then(function (cache) {
return cache.addAll([ return cache.addAll([
'/components/hubl-reactivity.js',
'/components/hubl-search-users.js',
'/components/hubl-status.js',
'/components/sentry.js',
'/fonts/custom-icons.eot',
'/fonts/custom-icons.svg',
'/fonts/custom-icons.ttf',
'/fonts/custom-icons.woff',
'/fonts/FacitBold.eot',
'/fonts/FacitBold.svg',
'/fonts/FacitBold.ttf',
'/fonts/FacitBold.woff',
'/fonts/FacitRegular.eot',
'/fonts/FacitRegular.svg',
'/fonts/FacitRegular.ttf',
'/fonts/FacitRegular.woff',
'/fonts/material-design-icons.eot',
'/fonts/material-design-icons.svg',
'/fonts/material-design-icons.ttf',
'/fonts/material-design-icons.woff',
'/fonts/material-design-icons.woff2',
'/fonts/RefrigeratorDelxW01Bold.eot',
'/fonts/RefrigeratorDelxW01Bold.svg',
'/fonts/RefrigeratorDelxW01Bold.ttf',
'/fonts/RefrigeratorDelxW01Bold.woff',
'/fonts/simple-line-icons.eot',
'/fonts/simple-line-icons.svg',
'/fonts/simple-line-icons.ttf',
'/fonts/simple-line-icons.woff',
'/fonts/simple-line-icons.woff2',
'/images/add-user.svg',
'/images/alien.svg',
'/images/appointment.svg',
'/images/arrow-down.svg',
'/images/calendar.svg',
'/images/chevron-down.png',
'/images/favicon.png',
'/images/file.svg',
'/images/hubl-icon-192.png',
'/images/hubl-icon-512.png',
'/images/logo.png',
'/images/send.png',
'/images/vote.svg',
'/locales/es.json', '/locales/es.json',
'/locales/fr.json', '/locales/fr.json',
'/scripts/index.js', '/scripts/index.js',
'/syles/index.css', '/syles/index.css',
'/index.html', '/index.html',
'/manifest.webmanifest',
'/' '/'
]); ]);
}) })
); ).then(() => e.skipWaiting());
}); });
//TODO: Can't use fetch because of unpkg, e.request is missing a part of the package name "@startinblox/core" become "@startinblox" self.addEventListener('activate', function (e) {
self.addEventListener('fetch', function (e) { // invalidate older versions
// Handle direct loading /xyz/ when server is unjoinable e.waitUntil(
if (e.request.mode === 'navigate') { caches.keys()
e.respondWith(caches.match('/')); .then(function (keyList) {
return; return Promise.all(keyList.map(function (key) {
} if (key !== CACHE_NAME && key !== (CACHE_NAME + "-cdn") && key !== (CACHE_NAME + "-api")) {
e.respondWith( return caches.delete(key);
fetch(e.request, { }
credentials: 'include' }));
}).catch(function() { }));
return caches.match(e.request); self.clients.claim();
}) });
);
self.addEventListener('fetch', function (event) {
let requestURL = new URL(event.request.url);
if (requestURL.origin == location.origin) {
// Static asset, cache then network
event.respondWith(
caches.open(CACHE_NAME).then(function (cache) {
return cache.match(event.request).then(function (response) {
var fetchPromise = fetch(event.request).then(function (networkResponse) {
cache.put(event.request, networkResponse.clone());
return networkResponse;
});
return response || fetchPromise;
});
}),
);
} else {
if (
event.request.method == 'POST' ||
event.request.method == 'PUT'
) {
// disabled: lead to cors errors
// // POST/PUT to api, rewrite the cache
// event.respondWith(
// caches.open(CACHE_NAME + '-api').then(function (cache) {
// return fetch(event.request).then(function (response) {
// cache.put(event.request, response.clone());
// return response;
// })
// }));
// api: no cache
event.respondWith(fetch(event.request));
} else if (
/matomo/.test(requestURL.origin) ||
/sentry/.test(requestURL.origin) ||
/jabber/.test(requestURL.origin) ||
/xmpp/.test(requestURL.origin)
) {
// analytics, always distant
event.respondWith(fetch(event.request));
} else {
if (
/unpkg/.test(requestURL.origin) ||
/jspm/.test(requestURL.origin) ||
/jsdeliver/.test(requestURL.origin) ||
/cdn/.test(requestURL.origin) ||
/googleapis/.test(requestURL.origin)
) {
// cdn: cache then network
event.respondWith(
caches.open(CACHE_NAME + '-cdn').then(function (cache) {
return cache.match(event.request).then(function (response) {
var fetchPromise = fetch(event.request).then(function (networkResponse) {
cache.put(event.request, networkResponse.clone());
return networkResponse;
});
return response || fetchPromise;
});
}),
);
} else {
// disabled: lead to cors errors
// // api: distant then cache
// event.respondWith(
// fetch(event.request)
// .then((response) => {
// caches.open(CACHE_NAME + '-api').then(function (cache) {
// cache.put(event.request, response.clone());
// return response;
// });
// })
// .catch(() => {
// return caches.match(event.request);
// })
// );
// api: no cache
event.respondWith(fetch(event.request));
}
}
}
}); });