generate pwa manifest

package.json

@@ -24,6 +24,7 @@
     "@sveltejs/kit": "^2.0.6",
     "@sveltejs/vite-plugin-svelte": "^3.0.1",
     "@ubermanu/prettier-config": "^3.2.0",
+    "@vite-pwa/sveltekit": "^0.3.0",
     "animate.css": "^4.1.1",
     "autoprefixer": "^10.4.16",
     "postcss": "^8.4.32",
@@ -35,7 +36,8 @@
     "tailwindcss": "^3.4.0",
     "typescript": "^5.3.3",
     "vite": "^5.0.10",
-    "vite-plugin-pwa": "^0.17.4"
+    "vite-plugin-pwa": "^0.17.4",
+    "workbox-window": "^7.0.0"
   },
   "prettier": "@ubermanu/prettier-config"
 }

src/manifest.json

@@ -2,7 +2,6 @@
   "name": "Audience",
   "short_name": "Audience",
   "description": "Crowd reaction soundboard",
-  "theme_color": "#ffffff",
   "icons": [
     {
       "src": "android-chrome-192x192.png",

src/routes/+layout.svelte

@@ -1,5 +1,18 @@
 <script>
   import '../app.postcss'
+  import { pwaInfo } from 'virtual:pwa-info'
+  import { onMount } from 'svelte'
+
+  onMount(async () => {
+    if (pwaInfo) {
+      const { registerSW } = await import('virtual:pwa-register')
+      registerSW({ immediate: true })
+    }
+  })
 </script>
 
+<svelte:head>
+  {@html pwaInfo?.webManifest.linkTag}
+</svelte:head>
+
 <slot />

src/vite-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="vite-plugin-pwa/client" />
+/// <reference types="vite-plugin-pwa/info" />

vite.config.js

@@ -1,12 +1,13 @@
 import { sveltekit } from '@sveltejs/kit/vite'
+import { SvelteKitPWA } from '@vite-pwa/sveltekit'
 import { defineConfig } from 'vite'
-import { VitePWA } from 'vite-plugin-pwa'
 import manifest from './src/manifest.json'
 
 export default defineConfig({
   plugins: [
     sveltekit(),
-    VitePWA({
+    SvelteKitPWA({
+      strategies: 'generateSW',
       registerType: 'autoUpdate',
       manifest,
     }),