Add PWA support to webapp

2026-01-14 12:30:14 -04:00
parent c34f451d73
commit dfb761ddf1
5 changed files with 3582 additions and 24 deletions
@@ -8,6 +8,7 @@ pnpm-debug.log*
 lerna-debug.log*

 node_modules
+dev-dist
 dist
 dist-ssr
 *.local
@@ -22,3 +23,9 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# Generated assets
+public/apple-touch-icon*.png
+public/favicon.ico
+public/pwa*.png
+public/maskable-icon*.png
@@ -2,11 +2,16 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-
+    <title>Write to Inkclip</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <link rel="icon" href="/favicon.ico" sizes="48x48" />
+    <link rel="icon" href="/favicon.svg" sizes="any" type="image/svg+xml" />
+    <link rel="apple-touch-icon" href="/apple-touch-icon-180x180.png" sizes="180x180" />
+    <link rel="mask-icon" href="/maskable-icon-512x512.png" color="#ffffff" />
+    <meta name="theme-color" content="#afbabc" />
+
    <meta name="author" content="daylily" />
-    <meta name="generator" content="Vite & Svelte 5" />
    <meta
      name="description"
      content="Utility for writing images onto the “Inkclip” e-paper accessory."
@@ -21,7 +26,12 @@
    />
    <meta property="og:site_name" content="dayli.ly" />

-    <title>Write to Inkclip</title>
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="Write to Inkclip" />
+    <meta
+      name="twitter:description"
+      content="Utility for writing images onto the “Inkclip” e-paper accessory."
+    />
  </head>
  <body>
    <div id="app"></div>
@@ -5,8 +5,9 @@
  "type": "module",
  "scripts": {
    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
+    "build": "pnpm run generate-pwa-assets && vite build",
+    "preview": "vite preview",
+    "generate-pwa-assets": "pwa-assets-generator --preset minimal-2023 public/favicon.svg"
  },
  "devDependencies": {
    "@fontsource-variable/ibm-plex-sans": "^5.2.8",
@@ -20,6 +21,7 @@
    "@types/node": "^24.10.8",
    "@types/w3c-web-hid": "^1.0.6",
    "@variegated-coffee/serde-postcard-ts": "^0.1.4",
+    "@vite-pwa/assets-generator": "^1.0.2",
    "autoprefixer": "^10.4.23",
    "bits-ui": "^2.15.4",
    "clsx": "^2.1.1",
@@ -36,6 +38,7 @@
    "typescript": "^5.9.3",
    "unplugin-icons": "^23.0.1",
    "vite": "^7.3.1",
+    "vite-plugin-pwa": "^1.2.0",
    "wrangler": "^4.59.1"
  },
  "packageManager": "pnpm@10.27.0+sha512.72d699da16b1179c14ba9e64dc71c9a40988cbdc65c264cb0e489db7de917f20dcf4d64d8723625f2969ba52d4b7e2a1170682d9ac2a5dcaeaab732b7e16f04a"
@@ -4,15 +4,45 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'
 import tailwindcss from '@tailwindcss/vite'
 import icons from 'unplugin-icons/vite'
 import { defineConfig } from 'vite'
+import { ManifestOptions, VitePWA as pwa } from 'vite-plugin-pwa'
+
+const manifest: Partial<ManifestOptions> = {
+  name: 'Write to Inkclip',
+  short_name: 'Inkclip',
+  description: 'Utility for writing images onto the “Inkclip” e-paper accessory.',
+  theme_color: '#afbabc',
+  display: 'standalone',
+  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',
+    },
+  ],
+}

 // https://vite.dev/config/
 export default defineConfig({
  plugins: [
+    icons({ compiler: 'svelte' }),
    tailwindcss(),
-    svelte(),
-    icons({
-      compiler: 'svelte',
+    pwa({
+      registerType: 'autoUpdate',
+      workbox: { globPatterns: ['**/*.{js,css,html,svg,png,ico,woff2}'] },
+      manifest,
+      devOptions: { enabled: true },
    }),
+    svelte(),
  ],
  resolve: {
    alias: {