From d3faf79b5735fdcfdd6a3a13894b9b1f29f0fee0 Mon Sep 17 00:00:00 2001
From: Andreas Schneider <aksdb@gmx.de>
Date: Fri, 8 May 2026 19:23:13 +0200
Subject: [PATCH] fix: service worker registration

---
 web/src/app.d.ts              |  1 +
 web/src/routes/+layout.svelte | 17 ++++++++++++++++-
 web/vite.config.ts            | 22 +++++++++++++++++++---
 3 files changed, 36 insertions(+), 4 deletions(-)

diff --git a/web/src/app.d.ts b/web/src/app.d.ts
index da08e6d..b1ed9a5 100644
--- a/web/src/app.d.ts
+++ b/web/src/app.d.ts
@@ -1,3 +1,4 @@
+/// <reference types="vite-plugin-pwa/client" />
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index b9deb97..170bdce 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { pwaInfo } from 'virtual:pwa-info';
 	import { page } from '$app/state';
 	import { hasToken } from '$lib/api/client';
 	import { onMount, onDestroy } from 'svelte';
@@ -8,7 +9,15 @@
 
 	let { children } = $props();
 
-	onMount(() => {
+	onMount(async () => {
+		// Register the PWA service worker through SvelteKit's pipeline.
+		// vite-plugin-pwa's injectRegister option cannot inject into SvelteKit's
+		// HTML because SvelteKit intercepts Vite's transformIndexHtml hook.
+		if (pwaInfo) {
+			const { registerSW } = await import('virtual:pwa-register');
+			registerSW({ immediate: true });
+		}
+
 		if (!hasToken() && page.url.pathname !== '/settings') {
 			goto('/settings');
 		}
@@ -46,6 +55,12 @@
 	onDestroy(() => clearInterval(tickInterval));
 </script>
 
+<svelte:head>
+	{#if pwaInfo}
+		{@html pwaInfo.webManifest.linkTag}
+	{/if}
+</svelte:head>
+
 <nav>
 	<div class="nav-links">
 		<a href={todayHref()} class:active={todayActive}>Today</a>
diff --git a/web/vite.config.ts b/web/vite.config.ts
index 808620f..a79eb92 100644
--- a/web/vite.config.ts
+++ b/web/vite.config.ts
@@ -2,16 +2,28 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vitest/config';
 import { VitePWA } from 'vite-plugin-pwa';
 
+// A revision that changes on every build, so the SW always re-fetches index.html
+// when the app is redeployed. index.html is not picked up by globPatterns because
+// the static adapter creates it AFTER the service worker precache manifest is
+// generated — so we add it explicitly here instead.
+const buildId = Date.now().toString();
+
 export default defineConfig({
 	plugins: [
 		sveltekit(),
 		VitePWA({
 			registerType: 'autoUpdate',
 			strategies: 'generateSW',
-			injectRegister: 'auto',
+			injectRegister: false,
 			workbox: {
-				globPatterns: ['**/*.{js,css,html,svg,png,ico,woff,woff2}'],
-				navigateFallback: 'index.html',
+				globPatterns: ['**/*.{js,css,svg,png,ico,woff,woff2}'],
+				additionalManifestEntries: [
+					{ url: '/', revision: buildId },
+					{ url: '/index.html', revision: buildId }
+				],
+				cleanupOutdatedCaches: true,
+				clientsClaim: true,
+				navigateFallback: '/index.html',
 				navigateFallbackDenylist: [/^\/api/, /^\/healthz/],
 				runtimeCaching: [
 					{
@@ -25,6 +37,10 @@ export default defineConfig({
 					}
 				]
 			},
+			devOptions: {
+				enabled: true,
+				type: 'module'
+			},
 			manifest: {
 				name: 'Wotra — Working Time Tracker',
 				short_name: 'Wotra',