andrea/leanwebclub
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve service worker

Browse source
This commit is contained in:
andrea 2024-09-11 12:43:14 +02:00
parent 2ff8e3d65b
commit ba30d93136
2 changed files with 66 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
structure-and-scale/seven-seas-cache-strategy/offline.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Seven Seas</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="public/css/style.css">
</head>
<body>
<nav>
<a href="index.html">🏴‍☠️ Seven Seas</a>
<p class="description">The travel app for pirates</p>
</nav>
<h1>Seven Seas</h1>
<p>
You seem offline!
</p>
<script src="public/js/index.js"></script>
<script>
if (navigator && navigator.serviceWorker) {
navigator.serviceWorker.register('sw.js');
}
</script>
</body>
</html>

57
structure-and-scale/seven-seas-cache-strategy/sw.js
View file

@ -6,6 +6,13 @@
let coreAssets = [ 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) { async function addResourcesToCache (assets) {
@ -18,18 +25,18 @@ async function addResourcesToCache (assets) {
return cache; return cache;
} }
async function offlineFirst (event) { async function offlineFirst (request) {
return await caches.match(request) || await fetch(request); return await caches.match(request) || await fetch(request);
} }
async function networkFirst (event) { async function networkFirst (request) {
let response; let response;
try { //try {
response = await fetch(request) || caches.match(request); response = await fetch(request) //|| caches.match(request);
} catch (error) { //} catch (error) {
response = await caches.match('offline.html'); // response = await caches.match('offline.html');
} //}
return response return response
} }
@ -43,28 +50,28 @@ self.addEventListener('install', function (event) {
event.waitUntil(addResourcesToCache(coreAssets)); event.waitUntil(addResourcesToCache(coreAssets));
}); });
// Listen for request events // // Listen for request events
self.addEventListener('fetch', function (event) { // self.addEventListener('fetch', function (event) {
// Get the request // // Get the request
let request = event.request; // let request = event.request;
// Bug fix // // Bug fix
// https://stackoverflow.com/a/49719964 // // https://stackoverflow.com/a/49719964
if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') return; // if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') return;
// HTML files // // HTML files
// Network-first // // Network-first
if (request.headers.get('Accept').includes('text/html')) { // if (request.headers.get('Accept').includes('text/html')) {
event.respondWith(networkFirst(event)); // event.respondWith(networkFirst(event));
} // }
// Check the cache first // // Check the cache first
// If it's not found, send the request to the network // // If it's not found, send the request to the network
if (request.headers.get('Accept').includes('text/css')) { // if (request.headers.get('Accept').includes('text/css')) {
event.respondWith(offlineFirst(event)); // event.respondWith(offlineFirst(event));
} // }
}); // });