PWA Workbox 应用程序在离线时无法运行

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 文件被存储的信息。该文件甚至没有出现在 Application 选项卡（控制台）-> Cache -> Cache Storage -> my-app-runtime（或预缓存版本）

Answer 1

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

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

我认为这是您的 Service Worker 正在尝试但未能获取的另一种资源，但在没有看到您的整个 Service Worker 脚本的情况下，很难知道那是什么。

PWA Workbox 应用程序在离线时无法运行

PWA Workbox App not working when offline

webpack

workbox