🐛 修复PWA未正常注册的问题

pecasha · Apr 4, 2024 · 6ffab99 · 6ffab99
1 parent c607643
commit 6ffab99
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 9 deletions.
diff --git a/.github/workflows/deploy-prod.yml b/.github/workflows/deploy-prod.yml
@@ -56,4 +56,4 @@ jobs:
             -   name: Authenticate With Tencent Cloud CLI
                 run: tccli configure set secretId $SECRET_ID secretKey $SECRET_KEY
             -   name: Purge Tencent Cloud CDN Cache
-                run: tccli cdn PurgeUrlsCache --Urls "$(echo '["${{ vars.WEBSITE_DOMAIN }}"]')"
+                run: tccli cdn PurgeUrlsCache --Urls "$(echo '${{ vars.DEPLOY_CDN_PURGE_URLS }}')"
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
         "tailwindcss": "^3.4.3",
         "tslib": "^2.6.2",
         "typescript": "^5.4.3",
-        "vite": "^5.2.7"
+        "vite": "^5.2.7",
+        "vite-plugin-pwa": "^0.19.7"
     }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.d.ts b/src/app.d.ts
@@ -1,5 +1,4 @@
 import "vite-plugin-pwa/info";
-import "vite-plugin-pwa/svelte";
 
 declare global {
     namespace App {

diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,7 @@
 <html lang="zh-cmn-Hans-CN" ondragstart="return false">
 <head>
     <meta charset="utf-8"/>
-    <link rel="icon" href="%sveltekit.assets%/favicon.png"/>
+    <link rel="icon" href="%sveltekit.assets%/favicon.ico"/>
     <meta name="viewport" content="width=device-width, initial-scale=1"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="renderer" content="webkit"/>

diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,4 +1,6 @@
-<slot></slot>
+<main>
+    <slot />
+</main>
 
 <svelte:head>
     {@html webManifestLink}

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,7 +1,7 @@
 <div class="page">
     <header>
         <div class="logo">
-            <img src="/favicon.png"
+            <img src="/logo.png"
                  alt="中国大面值邮票图鉴">
             <section>
                 <h1>中国大面值邮票图鉴</h1>

diff --git a/static/favicon.ico b/static/favicon.ico
diff --git a/static/favicon.png → static/logo.png b/static/favicon.png → static/logo.png
diff --git a/vite.config.ts b/vite.config.ts
@@ -9,11 +9,28 @@ export default defineConfig({
         SvelteKitPWA({
             registerType: "autoUpdate",
             includeAssets: [
-                "favicon.png"
+                "favicon.ico",
+                "logo.png"
             ],
             workbox: {
+                globIgnores: [
+                    "**/images/*.{png,jpg,jpeg,webp,gif}"
+                ],
                 globPatterns: [
-                    "**/*.{jpg,png}"
+                    "client/**/*.{js,css,ico,png}"
+                ],
+                runtimeCaching: [
+                    {
+                        urlPattern: /\.(?:png|jpg|jpeg|webp|gif)$/i,
+                        handler: "CacheFirst",
+                        options: {
+                            cacheName: "images-cache",
+                            expiration: {
+                                maxEntries: 1000,
+                                maxAgeSeconds: 604_800
+                            }
+                        }
+                    }
                 ]
             },
             manifest: {
@@ -26,7 +43,7 @@ export default defineConfig({
                 orientation: "landscape-primary",
                 icons: [
                     {
-                        src: "favicon.png",
+                        src: "logo.png",
                         sizes: "128x128",
                         type: "image/png"
                     }