用 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 偶尔失效。上线前务必真机测试。