pwa: service worker for offline + installerbar (vite-pwa, autoUpdate)

@vite-pwa/astro genererer en Workbox-SW der precacher alt (59 entries); autoUpdate + skipWaiting + cleanupOutdatedCaches saa redeploy aldrig strander en bruger paa gammel version. Registrering injiceret via /registerSW.js i Base.astro (manifest:false bruger den eksisterende site.webmanifest). Offline-brug + Add-to-Home-Screen.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

astro.config.mjs

@@ -1,5 +1,6 @@
 import { defineConfig } from 'astro/config';
 import sitemap from '@astrojs/sitemap';
+import AstroPWA from '@vite-pwa/astro';
 import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
@@ -14,6 +15,21 @@ export default defineConfig({
         return item;
       },
     }),
+    // Service worker → offline support + installable PWA. autoUpdate + outdated-cache
+    // cleanup so a redeploy never strands a visitor on a stale version. Reuses the
+    // existing public/site.webmanifest (manifest: false = don't generate another).
+    AstroPWA({
+      registerType: 'autoUpdate',
+      manifest: false,
+      includeManifestIcons: false,
+      workbox: {
+        globPatterns: ['**/*.{html,css,js,svg,png,woff2,xml,txt,webmanifest}'],
+        cleanupOutdatedCaches: true,
+        clientsClaim: true,
+        skipWaiting: true,
+      },
+      devOptions: { enabled: false },
+    }),
   ],
   prefetch: { prefetchAll: true, defaultStrategy: 'viewport' },
   vite: { plugins: [tailwindcss()] },

package.json

@@ -14,6 +14,7 @@
     "@tailwindcss/vite": "^4.1.5",
     "tailwindcss": "^4.1.5",
     "@fontsource-variable/inter": "^5.2.5",
+    "@vite-pwa/astro": "^0.5.0",
     "sharp": "^0.34.5"
   }
 }

src/layouts/Base.astro

@@ -40,6 +40,9 @@ const { title, description, image, type, publishedTime, modifiedTime, tags, json
     </script>
     <Head {title} {description} {image} {type} {publishedTime} {modifiedTime} {tags} {jsonLd} />
     <ClientRouter />
+    <!-- Registrér service worker'en (PWA/offline). Genereret af @vite-pwa i build;
+         is:inline + public-sti så Astro ikke bundler den. 404 i dev = harmløst. -->
+    <script is:inline src="/registerSW.js"></script>
   </head>
   <body class="min-h-screen flex flex-col antialiased">
     <Header />