diff --git a/pwabuilder-sw.js b/pwabuilder-sw.js index 6751b9a..2c80364 100644 --- a/pwabuilder-sw.js +++ b/pwabuilder-sw.js @@ -1,10 +1,11 @@ -importScripts('https://cdn.jsdelivr.net/npm/workbox-cdn/workbox/workbox-sw.js'); +// This is the "Offline page" service worker -const HTML_CACHE = "html"; -const JS_CACHE = "javascript"; -const STYLE_CACHE = "stylesheets"; -const IMAGE_CACHE = "images"; -const FONT_CACHE = "fonts"; +importScripts('https://storage.googleapis.com/workbox-cdn/releases/5.1.2/workbox-sw.js'); + +const CACHE = "pwabuilder-page"; + +// TODO: replace the following with the correct offline fallback page i.e.: const offlineFallbackPage = "offline.html"; +const offlineFallbackPage = "https://alplox.github.io/la-tele/"; self.addEventListener("message", (event) => { if (event.data && event.data.type === "SKIP_WAITING") { @@ -12,63 +13,35 @@ self.addEventListener("message", (event) => { } }); -workbox.routing.registerRoute( - ({event}) => event.request.destination === 'document', - new workbox.strategies.NetworkFirst({ - cacheName: HTML_CACHE, - plugins: [ - new workbox.expiration.ExpirationPlugin({ - maxEntries: 10, - }), - ], - }) - -); +self.addEventListener('install', async (event) => { + event.waitUntil( + caches.open(CACHE) + .then((cache) => cache.add(offlineFallbackPage)) + ); +}); -workbox.routing.registerRoute( - ({event}) => event.request.destination === 'script', - new workbox.strategies.StaleWhileRevalidate({ - cacheName: JS_CACHE, - plugins: [ - new workbox.expiration.ExpirationPlugin({ - maxEntries: 15, - }), - ], - }) -); +if (workbox.navigationPreload.isSupported()) { + workbox.navigationPreload.enable(); +} -workbox.routing.registerRoute( - ({event}) => event.request.destination === 'style', - new workbox.strategies.StaleWhileRevalidate({ - cacheName: STYLE_CACHE, - plugins: [ - new workbox.expiration.ExpirationPlugin({ - maxEntries: 15, - }), - ], - }) -); +self.addEventListener('fetch', (event) => { + if (event.request.mode === 'navigate') { + event.respondWith((async () => { + try { + const preloadResp = await event.preloadResponse; -workbox.routing.registerRoute( - ({event}) => event.request.destination === 'image', - new workbox.strategies.StaleWhileRevalidate({ - cacheName: IMAGE_CACHE, - plugins: [ - new workbox.expiration.ExpirationPlugin({ - maxEntries: 15, - }), - ], - }) -); + if (preloadResp) { + return preloadResp; + } -workbox.routing.registerRoute( - ({event}) => event.request.destination === 'font', - new workbox.strategies.StaleWhileRevalidate({ - cacheName: FONT_CACHE, - plugins: [ - new workbox.expiration.ExpirationPlugin({ - maxEntries: 15, - }), - ], - }) -); \ No newline at end of file + const networkResp = await fetch(event.request); + return networkResp; + } catch (error) { + + const cache = await caches.open(CACHE); + const cachedResp = await cache.match(offlineFallbackPage); + return cachedResp; + } + })()); + } +}); \ No newline at end of file diff --git a/site.webmanifest b/site.webmanifest index c5618b5..b9349a6 100644 --- a/site.webmanifest +++ b/site.webmanifest @@ -19,7 +19,7 @@ "start_url": "/la-tele/", "serviceworker": { - "src": "./pwabuilder-sw.js", + "src": "/pwabuilder-sw.js", "scope": "/la-tele/" },