From 962eee3637bf2061cee0006c2e795c7a67cebc4b Mon Sep 17 00:00:00 2001
From: Frederic Cabassut <frederic.cabassut@arte.tv>
Date: Thu, 12 Mar 2026 20:53:31 +0100
Subject: [PATCH] fix: register PWA service worker via virtual:pwa-register for
 offline support

@vite-pwa/sveltekit does not auto-inject SW registration into SSR HTML.
Add explicit registration via virtual:pwa-register in root layout onMount,
inject webmanifest link via virtual:pwa-info, disable SvelteKit's built-in
SW registration to avoid conflicts, and add required dependencies.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 package.json              |  2 ++
 pnpm-lock.yaml            |  6 ++++++
 src/app.d.ts              |  3 +++
 src/routes/+layout.svelte | 23 +++++++++++++++++++++++
 svelte.config.js          |  5 ++++-
 5 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 0a25322..e00625c 100644
--- a/package.json
+++ b/package.json
@@ -84,7 +84,9 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
     "vite-plugin-istanbul": "^7.2.1",
+    "vite-plugin-pwa": "^1.2.0",
     "vitest": "^3.2.4",
+    "workbox-window": "^7.4.0",
     "yaml": "^2.8.2"
   },
   "pnpm": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 56dedea..c97d4ee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -165,9 +165,15 @@ importers:
       vite-plugin-istanbul:
         specifier: ^7.2.1
         version: 7.2.1(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))
+      vite-plugin-pwa:
+        specifier: ^1.2.0
+        version: 1.2.0(vite@7.3.1(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2))(workbox-build@7.4.0)(workbox-window@7.4.0)
       vitest:
         specifier: ^3.2.4
         version: 3.2.4(@types/node@25.3.5)(jiti@2.6.1)(lightningcss@1.31.1)(terser@5.46.0)(tsx@4.21.0)(yaml@2.8.2)
+      workbox-window:
+        specifier: ^7.4.0
+        version: 7.4.0
       yaml:
         specifier: ^2.8.2
         version: 2.8.2
diff --git a/src/app.d.ts b/src/app.d.ts
index 4fe769a..4b1d51c 100644
--- a/src/app.d.ts
+++ b/src/app.d.ts
@@ -1,3 +1,6 @@
+/// <reference types="vite-plugin-pwa/info" />
+/// <reference types="vite-plugin-pwa/vanillajs" />
+
 // See https://svelte.dev/docs/kit/types#app.d.ts
 // for information about these interfaces
 declare global {
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index b93e9ba..01289bd 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -1,7 +1,30 @@
 <script lang="ts">
 	import '../app.css';
+	import { onMount } from 'svelte';
+	import { pwaInfo } from 'virtual:pwa-info';
 
 	let { children } = $props();
+
+	onMount(async () => {
+		if (pwaInfo) {
+			const { registerSW } = await import('virtual:pwa-register');
+			registerSW({
+				immediate: true,
+				onRegistered(r: ServiceWorkerRegistration | undefined) {
+					console.log('SW Registered:', r);
+				},
+				onRegisterError(error: Error) {
+					console.log('SW registration error', error);
+				}
+			});
+		}
+	});
+
+	const webManifest = $derived(pwaInfo ? pwaInfo.webManifest.linkTag : '');
 </script>
 
+<svelte:head>
+	{@html webManifest}
+</svelte:head>
+
 {@render children()}
diff --git a/svelte.config.js b/svelte.config.js
index a619c96..d7ab6be 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -5,7 +5,10 @@ const config = {
 	kit: {
 		adapter: adapter({
 			out: 'build'
-		})
+		}),
+		serviceWorker: {
+			register: false
+		}
 	}
 };