feat: use sveltekit pwa

Xyphyn · Aug 3, 2023 · 1ee2918 · 1ee2918
1 parent fd29a7d
commit 1ee2918
Show file tree

Hide file tree

Showing 10 changed files with 2,365 additions and 134 deletions.
diff --git a/.gitignore b/.gitignore
@@ -8,4 +8,5 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
-stats.html
+stats.html
+dev-dist
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "photon-lemmy",
-  "version": "0.4.25",
+  "version": "0.4.26",
   "private": true,
   "scripts": {
     "dev": "vite dev",
@@ -18,6 +18,7 @@
     "@types/markdown-it": "^12.2.3",
     "@types/markdown-it-container": "^2.0.6",
     "@types/nprogress": "^0.2.0",
+    "@vite-pwa/sveltekit": "^0.2.5",
     "autoprefixer": "^10.4.14",
     "jsdom": "^22.1.0",
     "markdown-it-container": "^3.0.0",
@@ -30,6 +31,7 @@
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
     "vite": "^4.3.0",
+    "vite-plugin-pwa": "^0.16.4",
     "vitest": "^0.33.0"
   },
   "dependencies": {

diff --git a/src/app.html b/src/app.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%sveltekit.assets%/img/logo-background.svg" />
-    <link rel="manifest" crossorigin="use-credentials" href="manifest.json" />
+    <link rel="manifest" href="manifest.json" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta
       name="description"

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -7,6 +7,9 @@
   import ToastContainer from '$lib/components/ui/toasts/ToastContainer.svelte'
   import Moderation from '$lib/components/lemmy/moderation/Moderation.svelte'
   import Sidebar from '$lib/components/ui/Sidebar.svelte'
+  import { onMount } from 'svelte'
+  // @ts-ignore
+  import { pwaInfo } from 'virtual:pwa-info'
 
   nProgress.configure({
     minimum: 0.4,
@@ -28,6 +31,24 @@
       }
     }
   }
+
+  onMount(async () => {
+    if (pwaInfo) {
+      const { registerSW } = await import('virtual:pwa-register')
+      registerSW({
+        immediate: true,
+        onRegistered(r) {
+          console.log(`SW Registered: ${r}`)
+          r?.update()
+        },
+        onRegisterError(error) {
+          console.log('SW registration error', error)
+        },
+      })
+    }
+  })
+
+  $: webManifest = pwaInfo ? pwaInfo.webManifest.linkTag : ''
 </script>
 
 <div class="flex flex-col min-h-screen">

diff --git a/src/service-worker.ts b/src/service-worker.ts
diff --git a/static/manifest.json b/static/manifest.json
@@ -8,19 +8,17 @@
       "type": "image/png",
       "sizes": "512x512",
       "purpose": "maskable"
+    },
+    {
+      "src": "logo_512.png",
+      "type": "image/png",
+      "sizes": "512x512",
+      "purpose": "any"
     }
   ],
   "background_color": "#000000",
   "display": "standalone",
   "scope": "/",
   "theme_color": "#000000",
-  "shortcuts": [
-    {
-      "name": "Inbox",
-      "short_name": "Inbox",
-      "description": "View what's in your inbox.",
-      "url": "/inbox"
-    }
-  ],
   "description": "A sleek client for Lemmy."
 }
diff --git a/svelte.config.js b/svelte.config.js
@@ -13,14 +13,14 @@ const config = {
 		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: process.env.ADAPTER == 'node' ? node() : auto(),
-		csp: {
-			directives: {
-				'script-src': ['self'],
-				'object-src': ['none'],
-				'base-uri': ['none']
-			},
-			mode: 'nonce'
-		}
+		// csp: {
+		// 	directives: {
+		// 		'script-src': ['self'],
+		// 		'object-src': ['none'],
+		// 		'base-uri': ['none']
+		// 	},
+		// 	mode: 'nonce'
+		// }
 	},
 };
 

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,17 +1,18 @@
 {
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": true
-	}
-	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
+  "extends": "./.svelte-kit/tsconfig.json",
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "skipLibCheck": true,
+    "sourceMap": true,
+    "strict": true,
+    "types": ["vite-plugin-pwa/client"]
+  }
+  // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+  //
+  // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+  // from the referenced tsconfig.json - TypeScript does not merge them in
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,8 +1,38 @@
 import { sveltekit } from '@sveltejs/kit/vite'
 import { defineConfig, type PluginOption } from 'vite'
+import { SvelteKitPWA } from '@vite-pwa/sveltekit'
 
 export default defineConfig({
-  plugins: [sveltekit()],
+  plugins: [
+    sveltekit(),
+    SvelteKitPWA({
+      registerType: 'autoUpdate',
+      strategies: 'generateSW',
+      workbox: {
+        globPatterns: ['client/**/*.{js,css,html,ico,png,svg}'],
+      },
+      devOptions: {
+        enabled: true,
+        type: 'module',
+        navigateFallback: '/',
+      },
+      manifest: {
+        name: 'Photon for Lemmy',
+        short_name: 'Photon',
+        description: 'A lemmy client with a sleek design',
+        theme_color: '#000000',
+        display: 'standalone',
+        icons: [
+          {
+            src: 'logo_512.png',
+            sizes: '512x512',
+            type: 'image/png',
+            purpose: 'masked any',
+          },
+        ],
+      },
+    }),
+  ],
 
   define: {
     __VERSION__: JSON.stringify(process.env.npm_package_version),