Webpack PWA Workbox应用程序脱机时不工作

当应用程序在线时，一切似乎都很好，我可以在页面之间导航，文件似乎被正确缓存。但当我使浏览器离线时，应用程序无法加载

我得到这个错误：

This site can’t be reached
The web page at http://localhost:8080/ might be temporarily down or it may 
have moved permanently to a new web address.
ERR_FAILED

The FetchEvent for "http://localhost:8080/" resulted in a network error 
response: the promise was rejected.
Promise.catch (async)
workbox.precaching.moduleExports.addRoute.self.addEventListener.event @ 
workbox-precaching.dev.js:1085
sw.js:1 Uncaught (in promise) TypeError: Failed to fetch

在控制台中，我收到以下错误：

This site can’t be reached
The web page at http://localhost:8080/ might be temporarily down or it may 
have moved permanently to a new web address.
ERR_FAILED

The FetchEvent for "http://localhost:8080/" resulted in a network error 
response: the promise was rejected.
Promise.catch (async)
workbox.precaching.moduleExports.addRoute.self.addEventListener.event @ 
workbox-precaching.dev.js:1085
sw.js:1 Uncaught (in promise) TypeError: Failed to fetch

我认为最后一行是罪魁祸首，不知何故，它没有加载precache清单文件：

importScripts("precache-manifest.2e5a7cbc2c0451bb1e36932f58b5075b.js", "https://storage.googleapis.com/workbox-cdn/releases/3.2.0/workbox-sw.js");

---

联机时，precache清单文件将出现在控制台中sw.js文件类别下的Sources->Network选项卡中。因此，我假设当应用程序脱机时，该文件不会被缓存或保存。我遵循了webpack教程，似乎没有找到任何说明要存储的

precache manifest

文件的内容。该文件甚至没有出现在应用程序选项卡（控制台）->缓存->缓存存储->我的应用程序运行时（或预缓存版本）

服务工作者规范规定，通过

importScripts（）

获取的URL将被隐式缓存（通过“”，因此您不必采取任何步骤来确保

precache manifest.2e5a7cbc2c0451bb1e36932f58b5075b.js在脱机时可用

importScripts（）
URL是通过缓存存储API以外的机制缓存的，因此它们不会显示在缓存存储查看器中

我认为这是服务人员试图获取但未能获取的另一种资源，但如果没有看到整个服务人员脚本，很难知道这是什么。
不要使用浏览器的脱机模式来测试服务人员（这只会模拟客户端线程的网络错误，而不是工作人员线程的网络错误）。您可以关闭web服务器。@LeCintas嗯，我从来都不知道使用脱机模式是个坏主意。我想我会试试您的方法，关闭Docker中的web服务器，上面写着：“DevTools中的脱机复选框只影响来自页面的请求。服务工作者请求将继续进行。”为什么workbox站点不能脱机工作？