Vue项目中Vite PWA插件的API运行时缓存失效问题

针对API请求运行时缓存未生成、无缓存行为的问题，从你的配置来看核心问题出在urlPattern的正则写法上，以下是具体修复方案：

1. 修正urlPattern正则表达式 #

你当前用字符串形式写正则，转义符处理容易出错，直接使用RegExp对象更可靠，同时确保匹配完整的API路径：

workbox: {        
  runtimeCaching: [{
    // 改用RegExp对象，精准匹配openweathermap的所有API请求
    urlPattern: new RegExp('^https://openweathermap.org/api/.*'),
    handler: "NetworkFirst",
    options: {
      cacheName: "api-cache",
      cacheableResponse: {
        statuses: [0, 200] 
      }
    }
  }]
}

2. 验证Service Worker状态 #

• 打开浏览器开发者工具（F12），切换到Application面板
• 检查左侧Service Workers：确认Service Worker处于activated状态，无报错
• 发起API请求后，查看Cache Storage下是否生成api-cache缓存条目

3. 跨域请求补充配置（若存在跨域） #

如果前端域名和openweathermap不同，发起API请求时需指定CORS模式：

// 示例请求代码
fetch('https://openweathermap.org/api/xxx', {
  mode: 'cors'
})

4. 强制更新Service Worker #

修改配置后重新构建项目，在浏览器中按Ctrl+Shift+R强制刷新，确保新的Service Worker被安装激活。

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