PWA Workbox 应用程序在离线时不工作答案

【问题标题】：PWA Workbox App not working when offlinePWA Workbox 应用程序在离线时不工作
【发布时间】：2018-05-23 00:41:52
【问题描述】：

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

我收到此错误：

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（或预缓存版本）中

【问题讨论】：

不要在浏览器中使用离线模式来测试 service-worker（这只是模拟客户端线程的网络错误，而不是工作线程）。您可以关闭您的网络服务器。
@LeCintas 嗯，我从来不知道使用离线模式是个坏主意。我想我会尝试你的方法并关闭 Docker 中的 Web 服务器
developers.google.com/web/tools/workbox/modules/… 它说：“DevTools 中的离线复选框仅影响来自页面的请求。Service Worker 请求将继续通过。”

标签： webpack workbox

【解决方案1】：

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

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

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

【讨论】：

为什么workbox站点不能离线工作？developers.google.com/web/tools/workbox/guides/get-started