diff --git a/src/components/sw-toolbox.js b/src/components/sw-toolbox.js index 4b11fd0..ccd1d43 100644 --- a/src/components/sw-toolbox.js +++ b/src/components/sw-toolbox.js @@ -10,7 +10,7 @@ if ('serviceWorker' in navigator) { let registration; const showSkipWaitingPrompt = (event) => { - if(hubl.intl.t('serviceWorker.newUpdate') != undefined) { + if (hubl.intl.t('serviceWorker.newUpdate') != undefined) { Swal.fire({ position: 'bottom-end', backdrop: false, diff --git a/src/scripts/sw-broadcast.js b/src/scripts/sw-broadcast.js new file mode 100644 index 0000000..7cac9f1 --- /dev/null +++ b/src/scripts/sw-broadcast.js @@ -0,0 +1,21 @@ +if ('serviceWorker' in navigator) { + navigator.serviceWorker.addEventListener('message', async (event) => { + if (event.data.meta === 'workbox-broadcast-update') { + const { + cacheName, + updatedURL + } = event.data.payload; + + const cache = await caches.open(cacheName); + const updatedResponse = await cache.match(updatedURL); + try { + const updatedData = await updatedResponse.json(); + if (sibStore && "setResource" in sibStore) { + sibStore.setResource(updatedURL, updatedData); + } + } catch (e) { + console.error(e); + } + } + }); +} \ No newline at end of file diff --git a/src/service-worker.js b/src/service-worker.js index 3244688..314e0c8 100644 --- a/src/service-worker.js +++ b/src/service-worker.js @@ -9,7 +9,13 @@ addEventListener('message', (event) => { }); workbox.routing.registerRoute( - ({url}) => url.origin === 'https://fonts.gstatic.com', + ({ + url + }) => [ + 'https://fonts.gstatic.com', + 'https://fonts.googleapis.com', + 'https://storage.googleapis.com' + ].includes(url.origin), new workbox.strategies.CacheFirst({ cacheName: 'google-fonts-webfonts', plugins: [ @@ -25,21 +31,25 @@ workbox.routing.registerRoute( ); workbox.routing.registerRoute( - ({url}) => [ + ({ + 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), + ].includes(url.origin) || /cdn/.test(url.origin), new workbox.strategies.StaleWhileRevalidate({ cacheName: 'cdn', }) ); workbox.routing.registerRoute( - ({ request }) => request.destination === 'image', + ({ + request + }) => request.destination === 'image', new workbox.strategies.CacheFirst({ cacheName: 'images', plugins: [ @@ -55,9 +65,11 @@ workbox.routing.registerRoute( ); workbox.routing.registerRoute( - ({ request }) => - request.destination === 'style' || - request.destination === 'script', + ({ + request + }) => + request.destination === 'style' || + request.destination === 'script', new workbox.strategies.StaleWhileRevalidate({ cacheName: 'assets', plugins: [ @@ -69,7 +81,9 @@ workbox.routing.registerRoute( ); workbox.routing.registerRoute( - ({ request }) => request.mode === 'navigate', + ({ + request + }) => request.mode === 'navigate', new workbox.strategies.NetworkFirst({ cacheName: 'pages', plugins: [ @@ -79,3 +93,15 @@ workbox.routing.registerRoute( ], }), ); + +workbox.routing.registerRoute(() => true, + new workbox.strategies.StaleWhileRevalidate({ + cacheName: 'apis', + plugins: [ + new workbox.broadcastUpdate.BroadcastUpdatePlugin(), + new workbox.expiration.ExpirationPlugin({ + maxAgeSeconds: 60 * 60 * 24 * 30, + }), + ], + }) +);