如何用vite-plugin-pwa实现应用离线可用，无需构建测试Service Worker

你的配置已经开启了devOptions.enabled: true，这是开发环境启用Service Worker的核心开关，但还需要调整几个细节，才能在开发模式下稳定测试离线功能：

1. 确保开发服务器支持HTTPS（可选但推荐） #

虽然localhost下浏览器允许Service Worker在HTTP环境运行，但部分场景（比如使用特定API或跨域资源）可能会受影响。在vite.config.js中添加HTTPS配置：

export default defineConfig({
  server: {
    https: true // 启用HTTPS开发服务器
  },
  // ... 其他原有配置
})

2. 完善devOptions配置 #

添加路由回退和调试相关设置，避免离线时路由跳转失败，同时优化开发模式下的SW行为：

VitePWA({
  devOptions: {
    enabled: true,
    type: 'module',
    navigateFallback: '/', // 离线时所有路由回退到首页
    suppressWarnings: true, // 屏蔽开发模式下的非关键警告
  },
  // ... 其他原有配置
})

3. 调整缓存路径（避免资源找不到） #

原manifest中的图标路径使用./icons/xxx.png，开发环境下建议改为绝对路径/icons/xxx.png，确保Service Worker能正确缓存图标资源：

icons: [
  {
    src: '/icons/icon-192x192.png', // 去掉前面的./
    sizes: '192x192',
    type: 'image/png',
  },
  // ... 其他图标同理修改
]

4. 测试离线模式的步骤 #

1. 启动开发服务器：npm run dev
2. 打开浏览器开发者工具，切换到Application标签页
3. 在左侧菜单找到Service Workers，确认Service Worker状态为"Activated"且"is running"
4. 勾选"Offline"选项，刷新页面，验证页面是否能正常加载
5. 可以在Cache Storage中查看缓存的资源列表，确认静态文件和页面已被缓存

注意事项 #

• 开发模式下Service Worker的缓存策略会优先保证开发体验，修改代码后SW会自动更新，但如果遇到缓存不生效的情况，可以在Service Workers面板点击"Unregister"，再刷新页面重新注册
• 开发模式下的缓存范围和生产环境略有差异，最终离线效果还是要以构建后的生产包测试为准

内容的提问来源于stack exchange，提问作者Wilstark01