跳至内容

用 vite-plugin-pwa 给网站加离线能力

PWA 的核心就两件事:可安装、可离线。vite-plugin-pwa 把 Service Worker 的生成自动化了。

1. 安装配置

import { VitePWA } from 'vite-plugin-pwa'

export default {
  plugins: [
    VitePWA({
      registerType: 'prompt',
      manifest: {
        name: '极简记事本',
        theme_color: '#2563eb',
        icons: [{ src: 'pwa-192.png', sizes: '192x192' }]
      }
    })
  ]
}

2. 缓存策略

  • registerType: 'prompt':有新版时弹窗询问,不打断用户
  • 静态资源用 precache,接口数据用 StaleWhileRevalidate

3. iOS 的坑

iOS 的 PWA 支持一直半残:推送通知 16.4 才有,display: standalone 偶尔失效。上线前务必真机测试。