Use svelte pwa plugin

This commit is contained in:
Jon Staab
2024-10-22 16:35:38 -07:00
parent 6870f569b1
commit 7472177f3a
5 changed files with 376 additions and 63 deletions

370
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -48,6 +48,7 @@
"@tiptap/suggestion": "^2.6.4", "@tiptap/suggestion": "^2.6.4",
"@types/throttle-debounce": "^5.0.2", "@types/throttle-debounce": "^5.0.2",
"@vite-pwa/assets-generator": "^0.2.6", "@vite-pwa/assets-generator": "^0.2.6",
"@vite-pwa/sveltekit": "^0.6.6",
"@welshman/app": "~0.0.18", "@welshman/app": "~0.0.18",
"@welshman/content": "~0.0.12", "@welshman/content": "~0.0.12",
"@welshman/dvm": "~0.0.10", "@welshman/dvm": "~0.0.10",
@@ -69,7 +70,6 @@
"prettier-plugin-tailwindcss": "^0.6.5", "prettier-plugin-tailwindcss": "^0.6.5",
"svelte-tiptap": "^1.1.3", "svelte-tiptap": "^1.1.3",
"throttle-debounce": "^5.0.2", "throttle-debounce": "^5.0.2",
"vite-plugin-html-config": "^2.0.2", "vite-plugin-html-config": "^2.0.2"
"vite-plugin-pwa": "^0.20.5"
} }
} }

View File

@@ -1,5 +1,7 @@
<script lang="ts"> <script lang="ts">
import "@src/app.css" import "@src/app.css"
import {pwaInfo} from 'virtual:pwa-info';
import {pwaAssetsHead} from 'virtual:pwa-assets/head';
import {onMount} from "svelte" import {onMount} from "svelte"
import {get} from "svelte/store" import {get} from "svelte/store"
import {sleep, take, sortBy, ago, now, HOUR} from "@welshman/lib" import {sleep, take, sortBy, ago, now, HOUR} from "@welshman/lib"
@@ -134,7 +136,13 @@
</script> </script>
<svelte:head> <svelte:head>
<link rel="icon" href={PLATFORM_LOGO} /> {@html pwaInfo ? pwaInfo.webManifest.linkTag : ''}
{#if pwaAssetsHead.themeColor}
<meta name="theme-color" content={pwaAssetsHead.themeColor.content} />
{/if}
{#each pwaAssetsHead.links as link}
<link {...link} />
{/each}
</svelte:head> </svelte:head>
{#await ready} {#await ready}

View File

@@ -2,5 +2,5 @@
import {onMount} from "svelte" import {onMount} from "svelte"
import {goto} from "$app/navigation" import {goto} from "$app/navigation"
// onMount(() => goto("/home")) onMount(() => goto("/home"))
</script> </script>

View File

@@ -2,9 +2,9 @@ import fs from "fs"
import dotenv from "dotenv" import dotenv from "dotenv"
import * as path from "path" import * as path from "path"
import {defineConfig} from "vite" import {defineConfig} from "vite"
import {VitePWA} from "vite-plugin-pwa"
import {favicons} from "favicons" import {favicons} from "favicons"
import htmlPlugin from "vite-plugin-html-config" import htmlPlugin from "vite-plugin-html-config"
import {SvelteKitPWA} from '@vite-pwa/sveltekit'
import {sveltekit} from "@sveltejs/kit/vite" import {sveltekit} from "@sveltejs/kit/vite"
import svg from "@poppanator/sveltekit-svg" import svg from "@poppanator/sveltekit-svg"
@@ -36,6 +36,31 @@ export default defineConfig(async () => {
}, },
plugins: [ plugins: [
sveltekit(), sveltekit(),
SvelteKitPWA({
registerType: "autoUpdate",
injectRegister: "auto",
workbox: {
maximumFileSizeToCacheInBytes: 5 * 1024 ** 2, // 5 MB or set to something else
},
manifest: {
name: name,
short_name: name,
description: description,
theme_color: accent,
permissions: ["clipboardRead", "clipboardWrite", "unlimitedStorage"],
icons: [
{src: "pwa-64x64.png", sizes: "64x64", type: "image/png"},
{src: "pwa-192x192.png", sizes: "192x192", type: "image/png"},
{src: "pwa-512x512.png", sizes: "512x512", type: "image/png", purpose: "any"},
{
src: "maskable-icon-512x512.png",
sizes: "512x512",
type: "image/png",
purpose: "maskable",
},
],
},
}),
svg({ svg({
svgoOptions: { svgoOptions: {
multipass: true, multipass: true,
@@ -129,32 +154,6 @@ export default defineConfig(async () => {
{rel: "icon", type: "image/png", sizes: "96x96", href: "/favicons/android-chrome-96x96.png"}, {rel: "icon", type: "image/png", sizes: "96x96", href: "/favicons/android-chrome-96x96.png"},
], ],
}), }),
VitePWA({
registerType: "autoUpdate",
injectRegister: "auto",
workbox: {
maximumFileSizeToCacheInBytes: 5 * 1024 ** 2, // 5 MB or set to something else
},
manifest: {
name: name,
short_name: name,
description: description,
theme_color: accent,
protocol_handlers: [{protocol: "web+nostr", url: "/%s"}],
permissions: ["clipboardRead", "clipboardWrite", "unlimitedStorage"],
icons: [
{src: "pwa-64x64.png", sizes: "64x64", type: "image/png"},
{src: "pwa-192x192.png", sizes: "192x192", type: "image/png"},
{src: "pwa-512x512.png", sizes: "512x512", type: "image/png", purpose: "any"},
{
src: "maskable-icon-512x512.png",
sizes: "512x512",
type: "image/png",
purpose: "maskable",
},
],
},
}),
], ],
} }
}) })