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 = [
'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));
// }
});
// });