vue实现pwa
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"
}
]
}构建与测试
运行以下命令构建生产环境版本：
npm run build使用 serve 测试构建结果：
serve -s dist打开浏览器并检查 Lighthouse 报告，确保 PWA 功能正常。
部署到服务器
将 dist 文件夹内容部署到支持 HTTPS 的服务器。确保服务器配置正确，以便 Service Worker 能够注册和运行。
离线功能测试
使用 Chrome DevTools 的 Application 面板，检查 Service Worker 是否已注册，并测试离线模式下的应用行为。
通过以上步骤，Vue 项目即可实现 PWA 功能，支持离线访问和原生应用体验。
