fix: use correct cache version

astro.config.mjs

@@ -4,6 +4,8 @@ import mdx from '@astrojs/mdx';
 import sitemap from '@astrojs/sitemap';
 import serviceWorker from "@ayco/astro-sw";
 
+import {VERSION} from './src/consts';
+
 // https://astro.build/config
 export default defineConfig({
   output: "hybrid",
@@ -16,6 +18,7 @@ export default defineConfig({
     serviceWorker({
       path: "./src/sw.js",
       assetCachePrefix: 'cozy-reader',
+      assetCacheVersionID: VERSION
     })
   ]
 });

src/components/Footer.astro

@@ -1,5 +1,6 @@
 ---
 import Icon from 'astro-iconify'
+import {VERSION} from '../consts';
 ---
 
 <footer>
@@ -13,7 +14,9 @@ import Icon from 'astro-iconify'
     <br />
     <a href="/blog">Blog</a> •
     <a href="https://github.com/ayoayco/cozy">GitHub</a> •
-    <a href="https://social.ayco.io/@ayo">Mastodon</a> • Groggily2-Armband9
+    <a href="https://social.ayco.io/@ayo">Mastodon</a>
+    <br />
+    {VERSION}
   </section>
 
   <section class="disclaimer">All rights reserved to content owners.</section>

src/consts.ts

@@ -2,4 +2,6 @@ export const SITE_TITLE = 'Cozy Blog';
 export const SITE_AUTHOR = 'Ayo Ayco';
 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 SITE_DESCRIPTION = 'The Web is Yours.';
+
+export const VERSION = 'Glass5-Speakers2';

src/sw.js

@@ -4,6 +4,7 @@
  * @see https://ayco.io/n/@ayco/astro-sw
  */
 const cacheName = `${__prefix ?? 'app'}-v${__version ?? '000'}`
+
 const addResourcesToCache = async (resources) => {
     const cache = await caches.open(cacheName);
     console.log('[cozy-sw]: adding resources to cache...', resources)
@@ -13,19 +14,28 @@ const addResourcesToCache = async (resources) => {
 const putInCache = async (request, response) => {
     const cache = await caches.open(cacheName);
     console.log('[cozy-sw]: adding one response to cache...', request)
+    // if exists, replace
+
+    const keys = await cache.keys();
+    if(keys.includes(request)) {
+        cache.delete(request);
+    }
+
     await cache.put(request, response);
 };
 
 const tryCache = async (request, fallbackUrl) => {
+    const cache = await caches.open(cacheName);
+
     // Try get the resource from the cache
-    const responseFromCache = await caches.match(request);
+    const responseFromCache = await cache.match(request);
     if (responseFromCache) {
         console.info('[cozy-sw]: using cached response', responseFromCache);
         return responseFromCache;
     }
 
     // Try the fallback
-    const fallbackResponse = await caches.match(fallbackUrl);
+    const fallbackResponse = await cache.match(fallbackUrl);
     if (fallbackResponse) {
         console.info('[cozy-sw]: using fallback cached response', fallbackResponse);
         return fallbackResponse;