vue实现pwa

Vue 实现 PWA 的步骤

安装 @vue/cli-plugin-pwa 插件

vue add pwa

配置 vue.config.js 文件

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

创建自定义 Service Worker 在 src 目录下创建 registerServiceWorker.js 文件

if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker.register('/service-worker.js')
  })
}

修改 main.js 文件

import './registerServiceWorker'

关键配置说明

manifest.json 配置示例

{
  "name": "My Vue PWA",
  "short_name": "VuePWA",
  "start_url": ".",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#4DBA87",
  "icons": [
    {
      "src": "img/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    }
  ]
}

测试 PWA 功能

使用 Lighthouse 工具进行审计 在 Chrome DevTools 中选择 Lighthouse 面板运行测试

本地测试 Service Worker

navigator.serviceWorker.getRegistrations()
  .then(registrations => {
    registrations.forEach(registration => {
      console.log(registration)
    })
  })

部署注意事项

确保服务器正确配置

location / {
  try_files $uri $uri/ /index.html;
  add_header Cache-Control "no-cache";
}

HTTPS 是 PWA 的必需条件 使用 Let's Encrypt 获取免费 SSL 证书

高级功能实现

添加推送通知功能

Notification.requestPermission().then(permission => {
  if (permission === 'granted') {
    new Notification('Title', { body: 'Notification content' })
  }
})

实现离线缓存策略 在 vue.config.js 中配置

workboxOptions: {
  runtimeCaching: [
    {
      urlPattern: /^https:\/\/api\.example\.com/,
      handler: 'NetworkFirst'
    }
  ]
}