PWA关于Vue中的深入应用

vite-plugin-pwa

以下是关于VUE集成PWA功能的相关介绍及配置。 vite-plugin-pwa 将帮助您将配置几乎为零的 PWA 添加到现有应用程序中。该插件将为常见用例添加合理的内置默认配置。

安装

// 可以使用 Yarn 或者 NPM
yarn add vite-plugin-pwa -D

配置

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'
export default {
  plugins: [ //说是无配置，但是还是有着最低的配置要求，必须提供以下，此为最低配置
    VitePWA({
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'mask-icon.svg'],
      manifest: {
        name: 'My Awesome App', //PWA App名称
        short_name: 'MyApp',
        description: 'My Awesome App description', //PWA APP介绍词
        theme_color: '#ffffff', //主题色
        icons: [ //icon图标，用于在不同的终端显示不同的图标
          {
            src: 'pwa-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'pwa-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      }
    })
  ]
}

自定义

// vite.config.js / vite.config.ts
const pwaOptions = {
  mode: 'development',
  base: '/',
  includeAssets: ['favicon.svg'],
  manifest: {
    name: 'PWA Router',
    short_name: 'PWA Router',
    theme_color: '#ffffff',
    icons: [
      {
        src: 'pwa-192x192.png',
        sizes: '192x192',
        type: 'image/png',
      },
      {
        src: 'pwa-512x512.png',
        sizes: '512x512',
        type: 'image/png',
      },
      {
        src: 'pwa-512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'any maskable',
      },0
    ],
  },
  devOptions: { //通过process.env环境变量对项目中配置进行控制
    enabled: process.env.SW_DEV === 'true',
    type: 'module', /*当使用generateSW时，PWA插件将切换到经典*/
    navigateFallback: 'index.html',
    suppressWarnings: true,
  },
}

const replaceOptions = { __DATE__: new Date().toISOString() }
const claims = process.env.CLAIMS === 'true'
const reload = process.env.RELOAD_SW === 'true'
const selfDestroying = process.env.SW_DESTROY === 'true'

if (process.env.SW === 'true') {
  pwaOptions.srcDir = 'src'
  pwaOptions.filename = claims ? 'claims-sw.ts' : 'prompt-sw.ts'
  pwaOptions.strategies = 'injectManifest'
  ;(pwaOptions.manifest as Partial<ManifestOptions>).name = 'PWA Inject Manifest'
  ;(pwaOptions.manifest as Partial<ManifestOptions>).short_name = 'PWA Inject'
}

if (claims)
  pwaOptions.registerType = 'autoUpdate'

if (reload) {
  replaceOptions.__RELOAD_SW__ = 'true'
}

if (selfDestroying)
  pwaOptions.selfDestroying = selfDestroying

    ....
    VitePWA(pwaOptions)