feat(pwa): full offline support via vite-plugin-pwa

Register VitePWA in the production config with autoUpdate, Nord theme
colors, /sokoban/ start_url and scope, 192/512 plus a maskable icon.
Workbox precaches the built bundle so subsequent visits run offline.

Generate matching pwa-192/512 and apple-touch-icon PNGs in public/ so
"Add to Home Screen" picks up a proper icon on iOS and Android.

package.json

@@ -4,24 +4,25 @@
   "version": "1.0.0",
   "type": "module",
   "repository": {
-      "type": "git",
-      "url": "git+https://github.com/tiennm99/sokoban.git"
+    "type": "git",
+    "url": "git+https://github.com/tiennm99/sokoban.git"
   },
   "author": "tiennm99",
   "license": "Apache-2.0",
   "licenseUrl": "https://www.apache.org/licenses/LICENSE-2.0",
   "bugs": {
-      "url": "https://github.com/tiennm99/sokoban/issues"
+    "url": "https://github.com/tiennm99/sokoban/issues"
   },
   "homepage": "https://tiennm99.github.io/sokoban/",
   "scripts": {
-      "dev": "vite --config vite/config.dev.mjs",
-      "dev:codeserver": "vite --config vite/config.codeserver.mjs",
-      "build": "vite build --config vite/config.prod.mjs"
+    "dev": "vite --config vite/config.dev.mjs",
+    "dev:codeserver": "vite --config vite/config.codeserver.mjs",
+    "build": "vite build --config vite/config.prod.mjs"
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^5.0.3",
     "svelte": "^5.19.0",
-    "vite": "^6.4.2"
+    "vite": "^6.4.2",
+    "vite-plugin-pwa": "^1.2.0"
   }
 }

vite/config.prod.mjs

@@ -1,7 +1,33 @@
 import { defineConfig } from 'vite';
 import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { VitePWA } from 'vite-plugin-pwa';
 
 export default defineConfig({
     base: '/sokoban/',
-    plugins: [svelte()]
+    plugins: [
+        svelte(),
+        VitePWA({
+            registerType: 'autoUpdate',
+            includeAssets: ['favicon.png', 'apple-touch-icon.png'],
+            manifest: {
+                name: 'Sokoban',
+                short_name: 'Sokoban',
+                description: 'Microban Sokoban puzzles, Svelte edition',
+                start_url: '/sokoban/',
+                scope: '/sokoban/',
+                display: 'standalone',
+                orientation: 'any',
+                background_color: '#2e3440',
+                theme_color: '#5e81ac',
+                icons: [
+                    { src: 'pwa-192x192.png', sizes: '192x192', type: 'image/png' },
+                    { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png' },
+                    { src: 'pwa-512x512.png', sizes: '512x512', type: 'image/png', purpose: 'maskable' }
+                ]
+            },
+            workbox: {
+                globPatterns: ['**/*.{js,css,html,png,svg,webmanifest}']
+            }
+        })
+    ]
 });