离线时 Workbox 的 offlineFallback 不起作用

如何解决离线时 Workbox 的 offlineFallback 不起作用

我正在尝试为缓存中不可用的图片和文档实现离线回退功能。这个想法是，当所需的图片或文档不可用时，Service Worker 将提供预定义的后备图片或文档。我正在使用 here 描述的配方，但它不起作用。要使用 Chrome 开发工具对其进行测试，我执行以下操作：

转到 localhost:3003/（应用程序所在的位置）
让浏览器注册 service worker
重新加载页面
转到 Application 选项卡和 Service Worker 部分，然后选中 offline 复选框
重新加载页面
对于未保存在缓存中的图片和文档，出现以下错误： GET http://localhost:3003/assets/img/Innomaps%20en%20el%20Hult%20Prize%202019.jpg net::ERR_INTERNET_disCONNECTED

服务工作线程代码：

importScripts('https://storage.googleapis.com/workBox-cdn/releases/6.1.1/workBox-sw.js');

workBox.core.setCacheNameDetails({
  prefix: 'innomaps-pwa',suffix: 'v1',precache: 'precache-cache',runtime: 'runtime-cache'
});

workBox.precaching.precacheAndRoute([
        // Precaching the home page
        { url: '/',revision: null },{ url: 'assets/css/styles.css',{ url: 'assets/js/actions.js',{ url: 'assets/img/InnomapsWhite.png',{ url: 'assets/js/bs-init.js',{ url: 'manifest.json',// Precaching the offline page
        { url: '/offline',]);

workBox.googleAnalytics.initialize();

// This feature is not working!!
workBox.recipes.offlineFallback({
  pageFallback: '/offline',imageFallback: 'assets/img/InnomapsWhite.png'
});

'/' 路由提供一个简单的 HTML 文件。

解决方法

问题是需要设置一个路由处理程序，以便离线回退配方能够捕获它。如果您计划对所有未处理的路由使用离线回退策略（如我的情况），您可以使用所需的策略设置默认处理程序（在以下情况下，使用 NetworkOnly 策略）。 @JeffPosnick 在他对我的 github 问题的回复中的以下代码很有用：

importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.5/workbox-sw.js');

workbox.routing.setDefaultHandler(
  new workbox.strategies.NetworkOnly()
);

// Replace with your URLs.
workbox.recipes.offlineFallback({
  pageFallback: '/offline.html',imageFallback: '/offline.png'
});