Vue应用适配PWA

目的

为了适配多个设备，但又不编写各个设备的的对应语言的代码，使用PWA技术解决该需求，PWA可以理解为浏览器的小程序

操作

1. 安装 PWA 插件

最方便的方法是用 Vite 官方的 vite-plugin-pwa（Vue CLI 也有对应的 pwa 插件）。

npm install vite-plugin-pwa --save-dev

2. 配置 vite.config.js

你需要在 vite.config.js 里加上 PWA 配置，例如：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
  plugins: [
    vue(),
    VitePWA({
      registerType: 'autoUpdate', // 自动更新
      manifest: {
        name: '我的应用',
        short_name: '我的App',
        description: 'Vue3 PWA 多端应用示例',
        theme_color: '#42b983',
        background_color: '#ffffff',
        display: 'standalone', // 独立运行（无浏览器UI）
        start_url: '/',
        icons: [
          {
            src: 'icons/icon-192x192.png',
            sizes: '192x192',
            type: 'image/png'
          },
          {
            src: 'icons/icon-512x512.png',
            sizes: '512x512',
            type: 'image/png'
          }
        ]
      },
      workbox: {
        cleanupOutdatedCaches: true,
        clientsClaim: true,
      }
    })
  ]
})

注意：

• icons 里的图片要自己准备，放在 public/icons 里。

• theme_color 会影响移动端安装时的地址栏颜色。

• https://www.iloveimg.com/zh-cn/resize-image该网站可以很好修改图片尺寸

3. 前端入口注册 Service Worker

在 main.js 或 main.ts 中加入：

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

registerSW({
    onNeedRefresh() {
        if (confirm('有新版本可用，是否立即更新？')) {
            window.location.reload()
        }
    },
    onOfflineReady() {
        console.log('应用已缓存，可离线使用')
    }
})

4. 构建 & 部署

npm run build

vite-plugin-pwa 会自动帮你生成 manifest.json 和 service-worker.js，
但你要确保 构建时这些文件能被浏览器访问。

比如：

• npm run build 后，dist 目录会有 manifest.webmanifest 和 sw.js

• 部署到服务器时，这些文件要在根路径能访问到。

然后把 dist 部署到你的服务器或静态托管服务（如 Vercel、Netlify、Nginx）。

5.证书配置

由于PWA必须在https下进行工作，所以要配置证书，如果你有服务器和域名可以参考免费自动续签域名证书 - Qodes，如果你只是想在局域网使用可以参考给局域网ip自签证书 - Qodes

6. 各端体验方式

• 桌面端（Chrome / Edge）：打开网站 → 地址栏右侧会出现“安装”按钮 → 点击即可像应用一样启动。

• 安卓端（Chrome / Edge）：访问网站 → 菜单 → “添加到主屏幕”。

• iOS 端（Safari）：访问网站 → 分享按钮 → “添加到主屏幕”。