feat: implement stale-while-revalidate caching strategy

src/components/Library.astro

@@ -16,7 +16,7 @@ export interface Props {
   import type { Props } from './Library.astro';
   import type { AppConfig } from '../pages/index.astro';
   import { getPostCard, renderPost } from '../utils/library'
-import { cozify } from '../utils/sanitizer';
+  import { cozify } from '../utils/sanitizer';
   const cache = await caches.open('cozy-reader');
   let url= new URL(window.location.href);
   // only cached unencoded url param

src/consts.ts

@@ -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_DESCRIPTION = 'The Web is Yours.';
 
-export const VERSION = 'Naughty-Nougat';
+export const VERSION = 'Outrageous-Otter';

src/sw.js

@@ -31,6 +31,18 @@ const tryCache = async (request, fallbackUrl) => {
     const responseFromCache = await cache.match(request);
     if (responseFromCache) {
         console.info('[cozy-sw]: using cached response', responseFromCache.url);
+
+        try {
+            // get network response for revalidation of stale assets
+            const responseFromNetwork = await fetch(request.clone(), {signal: AbortSignal.timeout(5000)});
+            if (responseFromNetwork) {
+                console.info('[cozy-sw]: fetched updated assets', responseFromNetwork.url);
+                putInCache(request, responseFromNetwork.clone());
+            }
+        } catch {
+            console.info('[cozy-sw]: failed to fetch updated assets', request.url);
+        }
+
         return responseFromCache;
     }
 
@@ -42,7 +54,10 @@ const tryCache = async (request, fallbackUrl) => {
     }
 }
 
-const networkFirst = async ({ request, preloadResponsePromise, fallbackUrl }) => {
+const cacheAndRevalidate = async ({ request, preloadResponsePromise, fallbackUrl }) => {
+    
+    tryCache(request, fallbackUrl);
+
     try {
         // Try to use the preloaded response, if it's there
         // NOTE: Chrome throws errors regarding preloadResponse, see:
@@ -51,51 +66,46 @@ const networkFirst = async ({ request, preloadResponsePromise, fallbackUrl }) =>
         // To avoid those errors, remove or comment out this block of preloadResponse
         // code along with enableNavigationPreload() and the "activate" listener.
         // 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;
-        // }
+        }
-
 
         // Try to get the resource from the network for 5 seconds
         const responseFromNetwork = await fetch(request.clone(), {signal: AbortSignal.timeout(5000)});
         // response may be used only once
         // we need to save clone to put one copy in cache
         // and serve second one
-        if (responseFromNetwork) {
+        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);
-        }
 
     } catch (error) {
 
-        return tryCache(request, fallbackUrl);
+        return tryCache(request, fallbackUrl)
 
         // when even the fallback response is not available,
         // there is nothing we can do, but we must always
         // return a Response object
-        return new Response('Network error happened', {
+        ?? new Response('Network error happened', {
             status: 408,
             headers: { 'Content-Type': 'text/plain' },
         });
     }
 };
 
-// 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) => {
     console.log('[cozy-sw]: installing...', event)
@@ -111,7 +121,7 @@ self.addEventListener('install', (event) => {
 self.addEventListener('fetch', (event) => {
     // ... else, use network first
     event.respondWith(
-        networkFirst({
+        cacheAndRevalidate({
             request: event.request,
             preloadResponsePromise: event.preloadResponse,
             fallbackUrl: './',