From ba30d9313651bc0c0e539ed3511a181452353739 Mon Sep 17 00:00:00 2001 From: andrea Date: Wed, 11 Sep 2024 12:43:14 +0200 Subject: [PATCH] Improve service worker --- .../seven-seas-cache-strategy/offline.html | 32 ++++++++++ .../seven-seas-cache-strategy/sw.js | 61 +++++++++++-------- 2 files changed, 66 insertions(+), 27 deletions(-) create mode 100644 structure-and-scale/seven-seas-cache-strategy/offline.html diff --git a/structure-and-scale/seven-seas-cache-strategy/offline.html b/structure-and-scale/seven-seas-cache-strategy/offline.html new file mode 100644 index 0000000..43b0eca --- /dev/null +++ b/structure-and-scale/seven-seas-cache-strategy/offline.html @@ -0,0 +1,32 @@ + + + + + Seven Seas + + + + + + + + +

Seven Seas

+ +

+ You seem offline! +

+ + + + + + + diff --git a/structure-and-scale/seven-seas-cache-strategy/sw.js b/structure-and-scale/seven-seas-cache-strategy/sw.js index 5958dac..5375aec 100644 --- a/structure-and-scale/seven-seas-cache-strategy/sw.js +++ b/structure-and-scale/seven-seas-cache-strategy/sw.js @@ -5,7 +5,14 @@ **/ let coreAssets = [ - 'public/css/style.css', + 'public/css/style.css', + 'public/js/index.js', + 'public/js/treasure.js', + 'public/js/dice.js', + 'offline.html', + 'index.html', + 'treasure.html', + 'dice.html' ]; async function addResourcesToCache (assets) { @@ -18,18 +25,18 @@ async function addResourcesToCache (assets) { return cache; } -async function offlineFirst (event) { +async function offlineFirst (request) { return await caches.match(request) || await fetch(request); } -async function networkFirst (event) { +async function networkFirst (request) { let response; - - try { - response = await fetch(request) || caches.match(request); - } catch (error) { - response = await caches.match('offline.html'); - } + + //try { + response = await fetch(request) //|| caches.match(request); + //} catch (error) { +// response = await caches.match('offline.html'); + //} return response } @@ -43,28 +50,28 @@ self.addEventListener('install', function (event) { event.waitUntil(addResourcesToCache(coreAssets)); }); -// Listen for request events -self.addEventListener('fetch', function (event) { +// // Listen for request events +// self.addEventListener('fetch', function (event) { - // Get the request - let request = event.request; +// // Get the request +// let request = event.request; - // Bug fix - // https://stackoverflow.com/a/49719964 - if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') return; +// // Bug fix +// // https://stackoverflow.com/a/49719964 +// if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') return; - // HTML files - // Network-first - if (request.headers.get('Accept').includes('text/html')) { - event.respondWith(networkFirst(event)); - } +// // HTML files +// // Network-first +// if (request.headers.get('Accept').includes('text/html')) { +// event.respondWith(networkFirst(event)); +// } - // Check the cache first - // If it's not found, send the request to the network - if (request.headers.get('Accept').includes('text/css')) { - event.respondWith(offlineFirst(event)); - } +// // Check the cache first +// // If it's not found, send the request to the network +// if (request.headers.get('Accept').includes('text/css')) { +// event.respondWith(offlineFirst(event)); +// } -}); +// });