离线时来自 Workbox 的 offlineFallback 不起作用答案

【问题标题】：offlineFallback from Workbox is not working when going offline离线时来自 Workbox 的 offlineFallback 不起作用
【发布时间】：2021-03-15 22:24:57
【问题描述】：

我正在尝试为缓存中不可用的图片和文档实现离线后备功能。这个想法是，当所需的图片或文档不可用时，服务工作者将提供预定义的备用图片或文档。我正在使用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', revision: null },
        { url: 'assets/js/actions.js', revision: null },
        { url: 'assets/img/InnomapsWhite.png', revision: null },
        { url: 'assets/js/bs-init.js', revision: null },
        { url: 'manifest.json', revision: null },

        // Precaching the offline page
        { url: '/offline', revision: null },
]);

workbox.googleAnalytics.initialize();

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

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

【问题讨论】：

请看github.com/GoogleChrome/workbox/issues/…

标签： google-chrome-devtools progressive-web-apps service-worker workbox

【解决方案1】：

问题是需要设置路由处理程序才能让离线回退配方捕获它。如果您计划对所有未处理的路由使用离线回退策略（如我的情况），您可以使用所需的策略设置默认处理程序（在以下情况下，使用 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'
});

【讨论】：