ayo/cozy
ayo/cozy
1
Fork 0
Code Issues 2 Pull requests 1 Projects Releases Packages Wiki Activity Actions

feat: timedout network first caching strategy

Browse source
This commit is contained in:
Ayo Ayco 2024-08-15 15:30:41 +02:00
parent 160110c2f2
commit e7ec5fafbf
2 changed files with 22 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/consts.ts
View file

@ -4,4 +4,4 @@ export const SITE_AUTHOR_MASTODON = 'https://social.ayco.io/@ayo';
export const SITE_PROJECT_REPO = 'https://github.com/ayoayco/Cozy'; export const SITE_PROJECT_REPO = 'https://github.com/ayoayco/Cozy';
export const SITE_DESCRIPTION = 'The Web is Yours.'; export const SITE_DESCRIPTION = 'The Web is Yours.';
export const VERSION = 'Mysterious-Moon'; export const VERSION = 'Naughty-Nougat';

41
src/sw.js
View file

@ -50,16 +50,16 @@ const networkFirst = async ({ request, preloadResponsePromise, fallbackUrl }) =>
// https://github.com/mdn/dom-examples/issues/145 // https://github.com/mdn/dom-examples/issues/145
// To avoid those errors, remove or comment out this block of preloadResponse // To avoid those errors, remove or comment out this block of preloadResponse
// code along with enableNavigationPreload() and the "activate" listener. // code along with enableNavigationPreload() and the "activate" listener.
const preloadResponse = await preloadResponsePromise; // const preloadResponse = await preloadResponsePromise;
if (preloadResponse) { // if (preloadResponse) {
console.info('[cozy-sw]: using preload response', preloadResponse.url); // console.info('[cozy-sw]: using preload response', preloadResponse.url);
putInCache(request, preloadResponse.clone()); // putInCache(request, preloadResponse.clone());
return preloadResponse; // return preloadResponse;
} // }
// Next try to get the resource from the network // Try to get the resource from the network for 5 seconds
const responseFromNetwork = await fetch(request.clone()); const responseFromNetwork = await fetch(request.clone(), {signal: AbortSignal.timeout(5000)});
// response may be used only once // response may be used only once
// we need to save clone to put one copy in cache // we need to save clone to put one copy in cache
// and serve second one // and serve second one
@ -67,9 +67,10 @@ const networkFirst = async ({ request, preloadResponsePromise, fallbackUrl }) =>
putInCache(request, responseFromNetwork.clone()); putInCache(request, responseFromNetwork.clone());
console.info('[cozy-sw]: using network response', responseFromNetwork.url); console.info('[cozy-sw]: using network response', responseFromNetwork.url);
return responseFromNetwork; return responseFromNetwork;
} else {
return tryCache(request, fallbackUrl);
} }
return tryCache(request, fallbackUrl);
} catch (error) { } catch (error) {
return tryCache(request, fallbackUrl); return tryCache(request, fallbackUrl);
@ -84,17 +85,17 @@ const networkFirst = async ({ request, preloadResponsePromise, fallbackUrl }) =>
} }
}; };
const enableNavigationPreload = async () => { // const enableNavigationPreload = async () => {
if (self.registration.navigationPreload) { // if (self.registration.navigationPreload) {
// Enable navigation preloads! // // Enable navigation preloads!
await self.registration.navigationPreload.enable(); // await self.registration.navigationPreload.enable();
} // }
}; // };
self.addEventListener('activate', (event) => { // self.addEventListener('activate', (event) => {
console.log('[cozy-sw]: activating...', event) // console.log('[cozy-sw]: activating...', event)
event.waitUntil(enableNavigationPreload()); // // event.waitUntil(enableNavigationPreload());
}); // });
self.addEventListener('install', (event) => { self.addEventListener('install', (event) => {
console.log('[cozy-sw]: installing...', event) console.log('[cozy-sw]: installing...', event)
@ -108,7 +109,7 @@ self.addEventListener('install', (event) => {
}); });
self.addEventListener('fetch', (event) => { self.addEventListener('fetch', (event) => {
// ... else, use cache first // ... else, use network first
event.respondWith( event.respondWith(
networkFirst({ networkFirst({
request: event.request, request: event.request,