PWA Workbox应用离线无法加载问题求助

看起来你遇到的问题核心确实是precache-manifest文件没有被正确缓存，导致Service Worker（SW）在离线状态下无法加载这个关键的缓存清单，进而引发了整个页面的加载失败。我来帮你一步步排查和解决：

问题分析 #

从你提供的报错信息和现象来看：

• 在线状态下precache-manifest能在Network面板的sw.js分类中找到，但离线时在Cache Storage里完全看不到这个文件
• SW中的importScripts("precache-manifest.xxx.js", ...)在离线时执行失败，触发了Failed to fetch错误，导致Workbox的预缓存路由逻辑崩溃，最终页面无法加载

具体解决步骤 #

1. 检查Webpack与Workbox的配置，确保precache-manifest被纳入预缓存 #

如果你使用的是workbox-webpack-plugin，需要确认配置是否正确包含了这个清单文件：

• 如果你用的是GenerateSW插件：正常情况下它会自动生成并预缓存precache-manifest文件，但如果你的配置里有exclude规则，可能不小心把它排除了。检查一下你的webpack配置，确保没有类似下面的错误排除：

  new WorkboxPlugin.GenerateSW({
    exclude: [/precache-manifest\..*\.js$/], // 别加这个排除规则！
    // 其他配置...
  })
  

• 如果你用的是InjectManifest插件：需要手动在你的自定义SW文件中，确保把precache-manifest文件加入预缓存列表。可以通过workbox.precaching.precacheAndRoute方法添加：

  // 在你的sw.js顶部
  importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js');
  // 手动引入并添加预缓存
  importScripts('precache-manifest.2e5a7cbc2c0451bb1e36932f58b5075b.js');
  workbox.precaching.precacheAndRoute(self.__precacheManifest || []);
  

2. 清理旧的Service Worker与缓存，重新安装 #

旧的SW缓存可能会干扰新的配置，按以下步骤操作：

• 打开Chrome开发者工具 → 切换到Application标签
• 在左侧Service Workers面板，点击"Unregister"注销当前SW
• 同样在Application标签下，找到Cache Storage，右键点击所有缓存条目选择"Delete"清空
• 刷新页面，让浏览器重新加载SW并完成安装，此时在线状态下检查Cache Storage，确认precache-manifest文件已经被缓存

3. 考虑升级Workbox版本 #

你当前使用的是Workbox 3.2.0，这个版本比较老旧，存在一些已知的预缓存相关bug。升级到最新的稳定版本（比如Workbox 6）不仅能修复这些问题，还能获得更清晰的配置和更好的兼容性。升级后重新构建项目，再测试离线加载情况。

4. 验证SW安装过程 #

可以在Chrome开发者工具的Application → Service Workers面板，勾选"Update on reload"，然后刷新页面，查看SW的安装日志，确认precache-manifest文件是否被成功预缓存。如果安装过程中有报错，会在这里显示具体原因。

补充说明 #

你看到的控制台报错：

The FetchEvent for "http://localhost:8080/" resulted in a network error response: the promise was rejected.
Uncaught (in promise) TypeError: Failed to fetch

本质上就是SW在尝试加载precache-manifest文件时，离线状态下找不到资源，导致预缓存路由无法正常处理页面请求，最终页面加载失败。只要解决了precache-manifest的缓存问题，这个报错自然会消失。

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