Vite PWA manifest and runtime cache

yuugou727 · May 10, 2023 · 555908c · 555908c
1 parent 1a02873
commit 555908c
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 45 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,6 +3,9 @@
 # dependencies
 /node_modules
 
+#dev
+dev-dist
+
 # testing
 /coverage
 

diff --git a/index.html b/index.html
@@ -4,11 +4,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="theme-color" content="#000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-    <link rel="manifest" href="/manifest.webmanifest">
     <link rel="shortcut icon" href="/icons8-clock-192.png">
     <title>台灣天氣時鐘</title>
     <meta name="description" content="簡易的台灣天氣時鐘 Progressive Web App，舊手機變身實用桌鐘">

diff --git a/public/manifest.webmanifest → manifestOption.ts b/public/manifest.webmanifest → manifestOption.ts
@@ -1,11 +1,13 @@
-{
+import { ManifestOptions } from 'vite-plugin-pwa';
+
+export const manifestOption: Partial<ManifestOptions> = {
   "name": "台灣天氣時鐘",
   "short_name": "TW天氣時鐘",
   "icons": [
     {
       "src": "icons8-clock-192.png",
       "type": "image/png",
-      "sizes": "192x192 128x128 64x64 32x32 24x24 16x16"
+      "sizes": "192x192"
     },
     {
       "src": "icons8-clock-512.png",
@@ -20,4 +22,4 @@
   "description": "簡易的時鐘網頁附加台灣天氣資訊，舊手機變身實用桌鐘",
   "dir": "ltr",
   "lang": "zh-TW"
-}
+};
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "weather-clock",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "private": true,
   "dependencies": {
     "@types/node": "^18.11.18",
@@ -15,19 +15,7 @@
     "react-toastify": "^9.1.1",
     "typescript": "^4.9.4",
     "web-vitals": "^3.1.1",
-    "whatwg-fetch": "^3.6.2",
-    "workbox-background-sync": "^6.5.4",
-    "workbox-broadcast-update": "^6.5.4",
-    "workbox-cacheable-response": "^6.5.4",
-    "workbox-core": "^6.5.4",
-    "workbox-expiration": "^6.5.4",
-    "workbox-google-analytics": "^6.5.4",
-    "workbox-navigation-preload": "^6.5.4",
-    "workbox-precaching": "^6.5.4",
-    "workbox-range-requests": "^6.5.4",
-    "workbox-routing": "^6.5.4",
-    "workbox-strategies": "^6.5.4",
-    "workbox-streams": "^6.5.4"
+    "whatwg-fetch": "^3.6.2"
   },
   "scripts": {
     "start": "vite",

diff --git a/src/react-app-env.d.ts b/src/react-app-env.d.ts
diff --git a/src/vite-env.d.ts b/src/vite-env.d.ts
diff --git a/tsconfig.json b/tsconfig.json
@@ -6,6 +6,9 @@
       "dom.iterable",
       "esnext"
     ],
+    "types": [
+      "vite/client",
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,

diff --git a/vite.config.ts b/vite.config.ts
@@ -2,14 +2,36 @@ import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import viteTsconfigPaths from "vite-tsconfig-paths";
 import { VitePWA } from 'vite-plugin-pwa';
+import { manifestOption } from './manifestOption';
 
-/// <reference types="vitest" />
 export default defineConfig({
   plugins: [
     react(),
     viteTsconfigPaths(),    
     VitePWA({
-      injectRegister: 'auto'
+      registerType: 'autoUpdate',
+      devOptions: {
+        enabled: true,
+      },
+      manifest: manifestOption,
+      workbox: {
+        runtimeCaching: [
+          {
+            urlPattern: /^https:\/\/openweathermap\.org\/img\/wn\/.*\.png$/i,
+            handler: 'CacheFirst',
+            options: {
+              cacheName: 'openweathermap-icons',
+              expiration: {
+                maxEntries: 10,
+                maxAgeSeconds: 60 * 60 * 24 * 30 // 30 days
+              },
+              cacheableResponse: {
+                statuses: [0, 200]
+              }
+            }
+          }
+        ]
+      }
     }),
   ],
   build: {