vue实现pwa
Vue 实现 PWA 的步骤
使用 Vue CLI 创建 PWA 项目
通过 Vue CLI 可以快速创建一个支持 PWA 的 Vue 项目。确保已安装 Vue CLI，运行以下命令：
vue create my-pwa-app在选择预设时，手动选择特性，勾选 PWA (Progressive Web App) 选项。Vue CLI 会自动配置 PWA 相关插件。
配置 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,
}
}
}name: 应用名称。themeColor: 主题颜色。workboxOptions: 控制 Service Worker 行为，如skipWaiting强制跳过等待期。
自定义 Service Worker
如果需要更复杂的 Service Worker 逻辑，可以创建 src/registerServiceWorker.js 并修改注册逻辑。例如：
import { register } from 'register-service-worker'
register(`${process.env.BASE_URL}service-worker.js`, {
ready() {
console.log('Service worker is active.')
},
cached() {
console.log('Content has been cached for offline use.')
},
offline() {
console.log('No internet connection found. App is running in offline mode.')
}
})配置 Manifest 文件
PWA 需要 manifest.json 文件定义应用元数据。Vue CLI 会自动生成该文件，路径为 public/manifest.json。示例内容：
{
"name": "My PWA App",
"short_name": "PWA",
"theme_color": "#4DBA87",
"background_color": "#FFFFFF",
"display": "standalone",
"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"
}
]
}测试 PWA 功能
- 构建项目并启动本地服务器：
npm run build serve -s dist - 使用 Chrome DevTools 的 Application 面板检查：
- Service Worker 是否注册成功。
- Manifest 是否正确加载。
- Lighthouse 审计 PWA 合规性。
部署到生产环境
将构建后的 dist 文件夹部署到支持 HTTPS 的服务器（PWA 要求 HTTPS）。常见的部署方式包括：
- Netlify、Vercel 等静态托管服务。
- Nginx 或 Apache 配置 HTTPS。
离线缓存策略优化
通过修改 workboxOptions 可以自定义缓存策略。例如预缓存特定资源：
workboxOptions: {
runtimeCaching: [
{
urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
handler: 'CacheFirst',
options: {
cacheName: 'images-cache',
expiration: {
maxEntries: 10,
maxAgeSeconds: 60 * 60 * 24 * 30,
}
}
}
]
}处理更新通知
当有新版本发布时，可以通过 Service Worker 提示用户刷新页面：
updated() {
console.log('New content is available; please refresh.')
document.dispatchEvent(new Event('swUpdated'))
}在 Vue 组件中监听事件并显示更新提示：
mounted() {
document.addEventListener('swUpdated', this.showUpdateAlert, { once: true })
}
