PWA 工作框应用程序脱机时不起作用

Question

当应用程序在线时，事情似乎运行良好，我可以在页面之间导航，文件似乎已正确缓存。但是当我使浏览器脱机时，应用程序无法加载。

我收到此错误：

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

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

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

预缓存清单文件在联机时显示在控制台的"源 -> 网络"选项卡的 sw.js 文件类别下。所以我假设不知何故，当应用程序离线时，此文件没有缓存或保存。我遵循了 webpack 教程，似乎没有找到任何告诉要存储precache-manifest文件的内容。该文件甚至不会出现在"应用程序"选项卡(控制台(->缓存->缓存存储->my-app-运行时(或预缓存版本(中

Answer 1

服务工作进程规范指出，通过importScripts()获取的 URL 将被隐式缓存(通过"脚本资源映射"(，因此您不必采取任何步骤来确保precache-manifest.2e5a7cbc2c0451bb1e36932f58b5075b.js在脱机时可用。

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

我认为这是您的服务工作者尝试获取但未能获取的另一个资源，但是如果没有看到整个服务工作者脚本，就很难知道那是什么。