autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

major: migrate sw to workbox

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier
2021-04-08 17:48:21 +02:00
parent a5ede42a91
commit 06521d9805
12 changed files with 735 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/components/sw-toolbox.js Normal file
View File

@ -0,0 +1,45 @@
import {
Workbox,
messageSW
} from 'https://storage.googleapis.com/workbox-cdn/releases/6.1.1/workbox-window.prod.mjs';
if ('serviceWorker' in navigator) {
window.addEventListener('load', function () {
const wb = new Workbox('/service-worker.js');
let registration;
const showSkipWaitingPrompt = (event) => {
Swal.fire({
position: 'bottom-end',
backdrop: false,
title: "",
text: hubl.intl.t('serviceWorker.newUpdate') + ". " + hubl.intl.t('serviceWorker.wantToUpdate'),
imageUrl: hubl.client.logo || 'https://cdn.startinblox.com/logos/webp/hubl.webp',
imageAlt: hubl.client.name,
showCancelButton: true,
confirmButtonClass: 'button text-xsmall text-bold text-center reversed color-secondary bordered icon icon-check no-background-image',
cancelButtonClass: 'button text-xsmall text-bold text-center reversed color-primary bordered icon icon-exclamation no-background-image',
confirmButtonText: hubl.intl.t('serviceWorker.yes'),
cancelButtonText: hubl.intl.t('serviceWorker.no')
}).then((result) => {
if (result.isConfirmed) {
wb.addEventListener('controlling', (event) => {
window.location.reload();
});
if (registration && registration.waiting) {
messageSW(registration.waiting, {
type: 'SKIP_WAITING'
});
}
}
});
};
wb.addEventListener('waiting', showSkipWaitingPrompt);
wb.addEventListener('externalwaiting', showSkipWaitingPrompt);
wb.register().then((r) => registration = r);
});
}

2
src/hubl-router.pug
View File

@ -60,5 +60,5 @@ for component of components
defaultRoute = defaultComponent[0].uniq;
}
- const hublComponents = `window.hubl={};window.hubl.components = ${JSON.stringify(components)};window.hubl.defaultRoute = "${defaultRoute}";`;
- const hublComponents = `window.hubl={};window.hubl.components = ${JSON.stringify(components)};window.hubl.defaultRoute = "${defaultRoute}";window.hubl.client = ${JSON.stringify(client)}`;
script!=hublComponents

1
src/index.pug
View File

@ -32,6 +32,7 @@ html(lang="en")
script(type="module" src="/components/hubl-auto-login.js" defer)
script(type="module" src="/components/hubl-search-users.js" defer)
script(type="module" src="/components/hubl-reactivity.js" defer)
script(type="module" src="/components/sw-toolbox.js" defer)
script(src="index.js" defer)
include dependencies.pug

6
src/locales/en.json
View File

@ -309,5 +309,11 @@
"edit": "Edit",
"back": "Back",
"goButton": "GO"
},
"serviceWorker": {
"newUpdate": "A new version is available",
"wantToUpdate": "Do you want to update?",
"yes": "Yes",
"no": "No"
}
}

6
src/locales/es.json
View File

@ -309,5 +309,11 @@
"edit": "Modificar",
"back": "Atrás",
"goButton": "GO"
},
"serviceWorker": {
"newUpdate": "Una nueva version esta disponible",
"wantToUpdate": "¿Quieres actualizar?",
"yes": "Sí",
"no": "No"
}
}

6
src/locales/fr.json
View File

@ -309,5 +309,11 @@
"edit": "Editer",
"back": "Retour",
"goButton": "GO"
},
"serviceWorker": {
"newUpdate": "Une nouvelle version est disponible",
"wantToUpdate": "Voulez-vous mettre à jour ?",
"yes": "Oui",
"no": "Non"
}
}

11
src/scripts/register-sw.js
View File

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

81
src/service-worker.js Normal file
View File

@ -0,0 +1,81 @@
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.1/workbox-sw.js');
workbox.precaching.precacheAndRoute([]);
addEventListener('message', (event) => {
if (event.data && event.data.type === 'SKIP_WAITING') {
skipWaiting();
}
});
workbox.routing.registerRoute(
({url}) => url.origin === 'https://fonts.gstatic.com',
new workbox.strategies.CacheFirst({
cacheName: 'google-fonts-webfonts',
plugins: [
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [0, 200],
}),
new workbox.expiration.ExpirationPlugin({
maxAgeSeconds: 60 * 60 * 24 * 365,
maxEntries: 30,
}),
],
})
);
workbox.routing.registerRoute(
({url}) => [
'https://cdn.jsdelivr.net',
'https://unpkg.com',
'https://cdn.skypack.dev',
'https://jspm.dev',
'https://fonts.googleapis.com',
'https://cdn.startinblox.com'
].includes(url.origin),
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'cdn',
})
);
workbox.routing.registerRoute(
({ request }) => request.destination === 'image',
new workbox.strategies.CacheFirst({
cacheName: 'images',
plugins: [
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [200],
}),
new workbox.expiration.ExpirationPlugin({
maxEntries: 300,
maxAgeSeconds: 60 * 60 * 24 * 30,
}),
],
}),
);
workbox.routing.registerRoute(
({ request }) =>
request.destination === 'style' ||
request.destination === 'script',
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'assets',
plugins: [
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [200],
}),
],
}),
);
workbox.routing.registerRoute(
({ request }) => request.mode === 'navigate',
new workbox.strategies.NetworkFirst({
cacheName: 'pages',
plugins: [
new workbox.cacheableResponse.CacheableResponsePlugin({
statuses: [200],
}),
],
}),
);

4
src/styles/content/_index.scss
View File

@ -2,6 +2,10 @@ main {
height: 100vh;
}
.no-background-image {
background-image: none;
}
/* Styles of the right-hand menu + pages with that menu */
.with-sidebar {
flex-grow: 1;

115
src/sw.js
View File

@ -1,115 +0,0 @@
const CACHE_NAME = 'hubl-store-epm9475';
self.addEventListener('install', function (e) {
self.skipWaiting();
e.waitUntil(
caches.open(CACHE_NAME).then(function (cache) {
return cache.addAll([
'/locales/es.json',
'/locales/fr.json',
'/scripts/index.js',
'/syles/index.css',
'/index.html',
'/'
]);
})
);
});
self.addEventListener('activate', function (e) {
// invalidate older versions
e.waitUntil(
caches.keys()
.then(function (keyList) {
return Promise.all(keyList.map(function (key) {
if (key !== CACHE_NAME && key !== (CACHE_NAME + "-cdn") && key !== (CACHE_NAME + "-api")) {
return caches.delete(key);
}
}));
}));
self.clients.claim();
});
if(process.env.NODE_ENV === 'production'){
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) ||
/skypack/.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));
}
}
}
});
}