vite-plugin-pwa 将自己的图片/文件添加到 sw.js 的 precacheAndRoute 中

版本号

"vite": "^4.1.1",
"vite-plugin-pwa": "^0.14.1"

vite.config.ts

(核心代码在 globPatterns + includeManifestIcons)

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { VitePWA } from 'vite-plugin-pwa';
export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      workbox: {
        // 扩充筛选的规则 (默认是 js,css,html)
        // (工作的目录是 build 输出目录,例如:'dist')
        // 下面这个规则可以匹配 所有目录(包括子目录) 的这些文件类型
        // 更多类型就继续往后添加
        globPatterns: ["**/*.{js,css,html,ico,jpg,png,svg}"],
      },
      // 关闭自动注入 'Manifest使用到的 icons', 
      // (否则会和 globPatterns 重复, 最终注入两遍同一个图标图片)
      includeManifestIcons: false,
      
      registerType: 'autoUpdate',
      manifest: {
        lang: 'zh-cn',
        // 从 Create React App 中搞来的 icons
        icons: [
          {
            "src": "favicon.ico",
            "sizes": "64x64 32x32 24x24 16x16",
            "type": "image/x-icon"
          },
          {
            "src": "logo192.png",
            "type": "image/png",
            "sizes": "192x192"
          },
          {
            "src": "logo512.png",
            "type": "image/png",
            "sizes": "512x512"
          }
        ],
        background_color: "#000000",
        theme_color: "#000000"
      }
    })
  ],
})