当前位置：首页 > VUE

vue实现pwa

2026-02-10 10:25:13VUE

Vue 实现 PWA 的步骤

创建 Vue 项目

使用 Vue CLI 创建一个新项目，确保 Vue CLI 版本为 3.0 或更高。运行以下命令：

vue create my-pwa-app

选择默认配置或手动配置，确保包含 PWA 支持。

添加 PWA 插件

如果创建项目时未选择 PWA 支持，可以通过以下命令添加：

vue add pwa

该插件会自动生成 registerServiceWorker.js 文件和配置。

配置 PWA

在 vue.config.js 中配置 PWA 相关参数：

module.exports = {
  pwa: {
    name: 'My PWA App',
    themeColor: '#4DBA87',
    msTileColor: '#000000',
    appleMobileWebAppCapable: 'yes',
    appleMobileWebAppStatusBarStyle: 'black',
    workboxPluginMode: 'GenerateSW',
    workboxOptions: {
      skipWaiting: true,
      clientsClaim: true,
    }
  }
}

注册 Service Worker

在 src/main.js 中导入并注册 Service Worker：

import './registerServiceWorker'

自定义 Service Worker

如果需要自定义 Service Worker 行为，可以修改 registerServiceWorker.js 文件：

import { register } from 'register-service-worker'

register(`${process.env.BASE_URL}service-worker.js`, {
  ready() {
    console.log('Service worker is active.')
  },
  registered() {
    console.log('Service worker has been registered.')
  },
  cached() {
    console.log('Content has been cached for offline use.')
  },
  updatefound() {
    console.log('New content is downloading.')
  },
  updated() {
    console.log('New content is available; please refresh.')
  },
  offline() {
    console.log('No internet connection found. App is running in offline mode.')
  },
  error(error) {
    console.error('Error during service worker registration:', error)
  }
})

配置 Manifest

在 public/manifest.json 中配置应用清单：

{
  "name": "My PWA App",
  "short_name": "PWA",
  "theme_color": "#4DBA87",
  "background_color": "#000000",
  "display": "standalone",
  "scope": "/",
  "start_url": "/",
  "icons": [
    {
      "src": "/img/icons/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/img/icons/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ]
}