vite项目使用pwa小记

PWA项目启动页面配置以及更新提示配置

安装

pnpm i vite-plugin-pwa

引入

// vite.config.js
import { VitePWA } from 'vite-plugin-pwa'

defineConfig({
  plugins: [
    VitePWA({
      manifest: {
        name: '',
        short_name: '',
        description: '',
        theme_color: '',
        icons: [
          {
            "src": "",
            "sizes": "192x192",
            "type": "image/png",
            "purpose": "any"
          },
        ],
      }
      injectRegister:'script',
      workbox:{
        importScripts:['./service-worker.js'] //你自己的worker文件 可以不传
      },
      
    })
  ]
})

重中之重更新提示


// main.ts 或者 App.vue

import { registerSW } from 'virtual:pwa-register'


const updateSW = registerSW({
  onNeedRefresh() {
    // 当需要刷新 可以类似小程序提示  已准备好新版本 是否更新
    ElMessageBox.confirm('发现新内容可用，是否加载？', '更新提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }).then(() => {
      updateSW()
    }).catch(() => {})
  },
})

安装

引入

重中之重 更新提示

重中之重更新提示