Migrate from vite-plugin-pwa to serwist

kuchta · kuchta · commit 5ad28b4515f8 · 2026-07-22T14:49:31.000+02:00
diff --git a/deno.lock b/deno.lock
diff --git a/index.html b/index.html
@@ -5,6 +5,7 @@
 		<meta charset="utf-8"/>
 		<meta name="viewport" content="width=device-width,initial-scale=1"/>
 		<link rel="icon" href="/images/icon.ico" sizes="48x48">
+		<link rel="manifest" href="/manifest.json">
 		<script type="module" src="/src/app.tsx"></script>
 	</head>
 	<body>
diff --git a/package.json b/package.json
@@ -32,6 +32,8 @@
     "@eslint/css": "^1.4.0",
     "@eslint/js": "^10.0.1",
     "@rolldown/plugin-babel": "^0.2.3",
+    "@serwist/vite": "^9.5.11",
+    "@serwist/window": "^9.5.11",
     "@stylistic/eslint-plugin": "^5.10.0",
     "@tailwindcss/vite": "^4.3.3",
     "@types/node": "^26.1.1",
@@ -51,6 +53,7 @@
     "react-icons": "^5.7.0",
     "react-router-dom": "^7.18.1",
     "react-textarea-autosize": "^8.5.9",
+    "serwist": "^9.5.11",
     "tailwind-csstree": "^0.3.3",
     "tailwindcss": "^4.3.3",
     "typescript": "^6.0.3",
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,30 @@
+{
+	"name": "RadixVerse",
+	"short_name": "RadixVerse",
+	"display": "standalone",
+	"theme_color": "#f1f1f1",
+	"background_color": "#f1f1f1",
+	"icons": [
+		{
+			"src": "images/icon-64x64.png",
+			"sizes": "64x64",
+			"type": "image/png"
+		},
+		{
+			"src": "images/icon-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "images/icon-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		},
+		{
+			"src": "images/icon-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png",
+			"purpose": "maskable"
+		}
+	]
+}
diff --git a/src/app.tsx b/src/app.tsx
@@ -2,6 +2,7 @@ import { createRoot } from 'react-dom/client'
 import { useState, useEffect } from 'react'
 import { BrowserRouter, Routes, Route, Link, useLocation, useSearchParams } from 'react-router-dom'
 import { ErrorBoundary, getErrorMessage } from 'react-error-boundary'
+import { getSerwist } from 'virtual:serwist'
 
 import { LS_RADIXES, AppContext, getCharsLS, sanitizeInput, serializeRadixes, unserializeRadixes } from './common.ts'
 import { type Radix, createRadixes, createRadix, num2str, str2num, allowedCharaters } from './radixes.ts'
@@ -35,6 +36,14 @@ function App() {
 	useEffect(() => {
 		const keyDown = (e: KeyboardEvent) => { if (e.key === 'Escape') setError(undefined) }
 		document.addEventListener('keydown', keyDown)
+
+		if ('serviceWorker' in navigator) {
+			getSerwist().then(serwist => {
+				serwist?.addEventListener('installed', () => { console.log('Service worker installed!') })
+				void serwist?.register()
+			}).catch((error: unknown) => { console.error('Failed to register service worker:', error) })
+		}
+
 		return () => { document.removeEventListener('keydown', keyDown) }
 	}, [])
 
diff --git a/src/sw.ts b/src/sw.ts
@@ -0,0 +1,20 @@
+import { defaultCache } from '@serwist/vite/worker'
+import { Serwist, type PrecacheEntry, type SerwistGlobalConfig } from 'serwist'
+
+declare global {
+	interface WorkerGlobalScope extends SerwistGlobalConfig { // oxlint-disable-line consistent-type-definitions
+		__SW_MANIFEST: (PrecacheEntry | string)[] | undefined,
+	}
+}
+
+declare const self: ServiceWorkerGlobalScope
+
+const serwist = new Serwist({
+	precacheEntries: self.__SW_MANIFEST,
+	skipWaiting: true,
+	clientsClaim: true,
+	navigationPreload: true,
+	runtimeCaching: defaultCache,
+})
+
+serwist.addEventListeners()
diff --git a/tsconfig.json b/tsconfig.json
@@ -5,14 +5,14 @@
 		"erasableSyntaxOnly": true,
 		"jsx": "react-jsx",
 		"jsxImportSource": "react",
-		"lib": [ "ESNext", "DOM" ],
+		"lib": [ "ESNext", "DOM", "WebWorker" ],
 		"module": "nodenext",
 		"moduleResolution": "nodenext",
 		"noEmit": true,
 		"noFallthroughCasesInSwitch": true,
 		"resolveJsonModule": true,
 		"skipLibCheck": true,
-		"types": [ "node", "vite/client" ],
+		"types": [ "node", "vite/client", "@serwist/vite/typings" ],
 		"verbatimModuleSyntax": true
 	}
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -3,9 +3,8 @@ import { defineConfig } from 'vite'
 import react, { reactCompilerPreset } from '@vitejs/plugin-react'
 import babel from '@rolldown/plugin-babel'
 import tailwindcss from '@tailwindcss/vite'
-import { VitePWA as pwa } from 'vite-plugin-pwa'
-
-const name = 'RadixVerse'
+// import { VitePWA as pwa } from 'vite-plugin-pwa'
+import { serwist } from '@serwist/vite'
 
 export default defineConfig({
 	base: process.env.BASE_URL ?? '/',
@@ -18,36 +17,19 @@ export default defineConfig({
 		react(),
 		babel({ presets: [ reactCompilerPreset() ] }),
 		tailwindcss(),
-		pwa({
-			devOptions: { enabled: true },
-			injectRegister: 'script',
-			registerType: 'autoUpdate',
-			includeAssets: [ 'images/*.{ico,png}' ],
-			manifest: {
-				name,
-				short_name: name,
-				display: 'standalone',
-				theme_color: '#f1f1f1',
-				background_color: '#f1f1f1',
-				icons: [{
-					src: 'images/icon-64x64.png',
-					sizes: '64x64',
-					type: 'image/png',
-				}, {
-					src: 'images/icon-192x192.png',
-					sizes: '192x192',
-					type: 'image/png',
-				}, {
-					src: 'images/icon-512x512.png',
-					sizes: '512x512',
-					type: 'image/png',
-				}, {
-					src: 'images/icon-512x512.png',
-					sizes: '512x512',
-					type: 'image/png',
-					purpose: 'maskable',
-				}]
-			}
-		})
+		// pwa({
+		// 	devOptions: { enabled: true },
+		// 	injectRegister: 'script',
+		// 	registerType: 'autoUpdate',
+		// 	includeAssets: [ 'images/*.{ico,png}' ],
+		// 	manifest:
+		// })
+		serwist({
+			swSrc: 'src/sw.ts',
+			swDest: 'sw.js',
+			globDirectory: 'dist',
+			injectionPoint: 'self.__SW_MANIFEST',
+			rollupFormat: 'iife',
+		}),
 	]
 })
