Reload page when new service worker is loaded

webapp/package.json

@@ -39,6 +39,7 @@
     "unplugin-icons": "^23.0.1",
     "vite": "^7.3.1",
     "vite-plugin-pwa": "^1.2.0",
+    "workbox-window": "^7.4.0",
     "wrangler": "^4.59.1"
   },
   "packageManager": "pnpm@10.27.0+sha512.72d699da16b1179c14ba9e64dc71c9a40988cbdc65c264cb0e489db7de917f20dcf4d64d8723625f2969ba52d4b7e2a1170682d9ac2a5dcaeaab732b7e16f04a"

webapp/pnpm-lock.yaml

@@ -95,6 +95,9 @@ importers:
       vite-plugin-pwa:
         specifier: ^1.2.0
         version: 1.2.0(@vite-pwa/assets-generator@1.0.2)(vite@7.3.1(@types/node@24.10.8)(jiti@2.6.1)(lightningcss@1.30.2)(terser@5.44.1))(workbox-build@7.4.0)(workbox-window@7.4.0)
+      workbox-window:
+        specifier: ^7.4.0
+        version: 7.4.0
       wrangler:
         specifier: ^4.59.1
         version: 4.59.1

webapp/src/main.ts

@@ -1,9 +1,9 @@
 import { mount } from 'svelte'
 import './app.css'
+import { registerSW } from 'virtual:pwa-register'
 import App from './App.svelte'
 
-const app = mount(App, {
+registerSW({ immediate: true })
+mount(App, {
   target: document.getElementById('app')!,
 })
-
-export default app

webapp/src/vite-env.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="svelte" />
 /// <reference types="vite/client" />
 /// <reference types="unplugin-icons/types/svelte" />
+/// <reference types="vite-plugin-pwa/client" />

webapp/vite.config.ts

@@ -9,9 +9,10 @@ import { ManifestOptions, VitePWA as pwa } from 'vite-plugin-pwa'
 const manifest: Partial<ManifestOptions> = {
   name: 'Write to Inkclip',
   short_name: 'Inkclip',
-  description: 'Utility for writing images onto the “Inkclip” e-paper accessory.',
+  description: 'Utility for writing patterns to the “Inkclip” e-paper accessory.',
-  theme_color: '#afbabc',
+  categories: ['utilities'],
   display: 'standalone',
+  background_color: '#ffffff',
   icons: [
     {
       src: 'pwa-64x64.png',