feat: pwa

package.json

@@ -14,6 +14,7 @@
     "svelte": "^4.0.0",
     "unplugin-icons": "^0.17.0",
     "vite": "^4.4.11",
+    "vite-plugin-pwa": "^0.16.7",
     "vitest": "^0.34.6"
   },
   "scripts": {

src/stores/migration.js

@@ -3,9 +3,10 @@ import { get } from 'svelte/store'
 /**
  * Migrate `store` using `migrations` to `version`
  * @param  {import('svelte/store').Writable} store Store to migrate
- * @param  {{ [key: number]: (data: object, store: import('svelte/store').Writable) => {}}}
- * migrations Migrations to apply
- * @param  {number} version    To which version migrate
+ * @param  {{
+ *   [key: number]: (data: object, store: import('svelte/store').Writable) => {}
+ * }} migrations Migrations to apply
+ * @param  {number} version To which version migrate
  */
 export function migrateStore(store, migrations, version) {
 	let old = get(store)

vite.config.js

@@ -2,12 +2,51 @@ import path from 'path'
 
 import { defineConfig, splitVendorChunkPlugin } from 'vite'
 import { svelte } from '@sveltejs/vite-plugin-svelte'
+import { VitePWA } from 'vite-plugin-pwa'
 import Icons from 'unplugin-icons/vite'
 
 import * as postcss from './postcss.config.js'
 
+const BASE = '/weather-site/'
+
+/** @type {import('vite-plugin-pwa').ManifestOptions} */
+const PWA_MANIFEST = {
+	name: 'Weather',
+	short_name: 'Weather',
+	background_color: '#26282b',
+	icons: [
+		{
+			src: 'icons/pwa.svg',
+			type: 'image/svg+xml',
+			sizes: '150x150',
+		},
+	],
+}
+
 const config = defineConfig({
-	plugins: [svelte(), Icons({ compiler: 'svelte' }), splitVendorChunkPlugin()],
+	plugins: [
+		svelte(),
+		Icons({ compiler: 'svelte' }),
+		splitVendorChunkPlugin(),
+		VitePWA({
+			registerType: 'autoUpdate',
+			base: BASE,
+			devOptions: {
+				enabled: true,
+				resolveTempFolder: () => path.resolve(__dirname, './build'),
+			},
+			manifest: PWA_MANIFEST,
+			manifestFilename: 'manifest.json',
+			workbox: {
+				globPatterns: [
+					// default
+					'**/*.{js,css,html}',
+					'**/locales/*.json',
+					'**/icons/weather-icons/32/*.svg',
+				],
+			},
+		}),
+	],
 	resolve: {
 		alias: {
 			src: path.resolve(__dirname, './src'),
@@ -26,7 +65,7 @@ const config = defineConfig({
 		outDir: 'build',
 	},
 	envDir: '.env',
-	base: '/weather-site/',
+	base: BASE,
 	optimizeDeps: {
 		exclude: ['tinro'],
 	},