1

当应用程序在线时，事情似乎工作正常，我可以在页面之间导航，文件似乎被正确缓存。但是当我使浏览器脱机时，应用程序不会加载。

我收到此错误：

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

预缓存清单文件出现在控制台的 Sources -> Network 选项卡下的 sw.js 文件类别下，同时在线。所以我假设当应用程序脱机时，这个文件没有被缓存或保存。我已经按照 webpack 教程进行操作，但似乎没有找到任何告诉precache-manifest要存储文件的内容。该文件甚至没有出现在应用程序选项卡（控制台）-> 缓存-> 缓存存储-> my-app-runtime（或预缓存版本）中

4

1 回答 1

1

Service Worker 规范声明通过获取importScripts()的 URL 将被隐式缓存（通过“脚本资源映射”，因此您不必采取任何步骤来确保precache-manifest.2e5a7cbc2c0451bb1e36932f58b5075b.js离线时可用。

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

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

于 2018-05-24T20:13:05.647 回答