simplify pwa

fivaz · Jun 22, 2024 · 92a8420 · 92a8420
1 parent 3706e95
commit 92a8420
Show file tree

Hide file tree

Showing 19 changed files with 1,453 additions and 227 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -63,6 +63,8 @@ module.exports = {
 					'^\\$app/environment',
 					'^\\$env/static/public',
 					'^\\$service-worker',
+					'virtual:pwa-assets',
+					'virtual:pwa-info',
 				],
 			},
 		],

diff --git a/package.json b/package.json
@@ -26,6 +26,8 @@
 		"@types/eslint": "8.56.0",
 		"@typescript-eslint/eslint-plugin": "^6.0.0",
 		"@typescript-eslint/parser": "^6.0.0",
+		"@vite-pwa/assets-generator": "^0.2.4",
+		"@vite-pwa/sveltekit": "^0.5.0",
 		"autoprefixer": "^10.4.17",
 		"clsx": "^2.1.0",
 		"date-fns": "^3.3.1",
@@ -65,8 +67,9 @@
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3",
+		"vite-plugin-pwa": "^0.20.0",
 		"vitest": "^1.2.0",
-		"workbox-precaching": "^7.0.0",
+		"workbox-window": "^7.1.0",
 		"yup": "^1.3.3"
 	},
 	"name": "life",
@@ -81,7 +84,7 @@
 		"format": "prettier --write . && eslint . --fix",
 		"lint": "prettier --check . && eslint .",
 		"prepare": "husky",
-		"preview": "vite build && vite preview",
+		"preview": "vite preview",
 		"storybook": "storybook dev -p 6006",
 		"test": "npm run test:integration && npm run test:unit",
 		"test:integration": "playwright test",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/pwa-assets.config.ts b/pwa-assets.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig, minimal2023Preset as preset } from '@vite-pwa/assets-generator/config';
+
+export default defineConfig({
+	headLinkOptions: {
+		preset: '2023',
+	},
+	images: ['static/logo.svg'],
+	preset,
+});
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -1,3 +1,6 @@
+import 'vite-plugin-pwa/svelte';
+import 'vite-plugin-pwa/info';
+import 'vite-plugin-pwa/pwa-assets';
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
 declare global {

diff --git a/src/app.html b/src/app.html
@@ -2,12 +2,9 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
-		<link rel="manifest" href="%sveltekit.assets%/manifest.json" />
-		<title>Life</title>
-		<link rel="icon" href="%sveltekit.assets%/icon.svg" />
 	</head>
 	<body data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,10 +1,25 @@
 <script lang="ts">
 	import { auth, db } from '$lib/firebase';
 	import { FirebaseApp } from 'sveltefire';
+	import { pwaAssetsHead } from 'virtual:pwa-assets/head';
+	import { pwaInfo } from 'virtual:pwa-info';
 
 	import '../app.css';
+
+	$: webManifest = pwaInfo ? pwaInfo.webManifest.linkTag : '';
 </script>
 
+<svelte:head>
+	{#if pwaAssetsHead.themeColor}
+		<meta content={pwaAssetsHead.themeColor.content} name="theme-color" />
+	{/if}
+	{#each pwaAssetsHead.links as link}
+		<link {...link} />
+	{/each}
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	{@html webManifest}
+</svelte:head>
+
 <FirebaseApp {auth} firestore={db}>
 	<slot />
 </FirebaseApp>
diff --git a/src/service-worker.ts b/src/service-worker.ts
diff --git a/static/favicon.png b/static/favicon.png
diff --git a/static/icon.svg b/static/icon.svg
diff --git a/static/icon256.png b/static/icon256.png
diff --git a/static/icon512.png b/static/icon512.png
diff --git a/static/logo.svg b/static/logo.svg
diff --git a/static/manifest.json b/static/manifest.json
diff --git a/static/screenshot1.png b/static/screenshot1.png
diff --git a/static/screenshot2.png b/static/screenshot2.png
diff --git a/static/task-placeholder-image.webp b/static/task-placeholder-image.webp
diff --git a/svelte.config.js b/svelte.config.js
@@ -1,7 +1,7 @@
-// import adapter from '@sveltejs/adapter-auto';
+import adapter from '@sveltejs/adapter-auto';
 // import adapter from '@sveltejs/adapter-static';
 // import adapter from 'svelte-adapter-firebase';
-import adapter from '@sveltejs/adapter-vercel';
+// import adapter from '@sveltejs/adapter-vercel';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */

diff --git a/vite.config.ts b/vite.config.ts
@@ -1,11 +1,45 @@
 import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vitest/config';
+import { SvelteKitPWA } from '@vite-pwa/sveltekit';
+import { defineConfig } from 'vite';
 
 export default defineConfig({
 	define: {
 		'process.env.NODE_ENV': '"production"',
 	},
-	plugins: [sveltekit()],
+	plugins: [
+		sveltekit(),
+		SvelteKitPWA({
+			devOptions: {
+				enabled: false,
+				navigateFallback: '/',
+				navigateFallbackAllowlist: [/^\/$/],
+				suppressWarnings: true,
+				type: 'module',
+			},
+			injectRegister: false,
+
+			manifest: {
+				description: 'life',
+				name: 'life',
+				short_name: 'life',
+				theme_color: '#ffffff',
+			},
+
+			pwaAssets: {
+				config: true,
+				disabled: false,
+			},
+
+			registerType: 'autoUpdate',
+
+			workbox: {
+				cleanupOutdatedCaches: true,
+
+				clientsClaim: true,
+				globPatterns: ['client/**/*.{js,css,ico,png,svg,webp,woff,woff2}'],
+			},
+		}),
+	],
 	test: {
 		include: ['src/**/*.{test,spec}.{js,ts}'],
 	},