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");

预缓存清单文件出现在源代码管理器的控制台中 - ＆gt; sw.js文件类别下的网络选项卡，在线时。所以我假设在应用程序离线时，不会缓存或保存此文件。我已经按照webpack教程进行了操作，似乎没有找到任何告诉precache-manifest文件存储的内容。该文件甚至没有出现在“应用程序”选项卡（控制台）中 - ＆gt;缓存 - ＆gt;缓存存储 - ＆gt; my-app-runtime（或预先缓存的版本）

Answer 1

服务工作者规范声明通过importScripts()提取的网址将被隐式缓存（通过＆＃34; script resource map＆＃34;，因此您不必采取任何方式确保precache-manifest.2e5a7cbc2c0451bb1e36932f58b5075b.js在离线时可用的步骤。

importScripts()网址通过缓存存储API以外的机制进行缓存，因此无法在缓存存储查看器中显示。

我认为这是您的服务工作者正在尝试并且无法获取的另一种资源，但是如果没有看到整个服务工作者脚本，就很难知道它是什么。

PWA Workbox App在离线时无法正常工作

1 个答案: