服务辅助角色:脱机服务.html而是在脱机时提供服务

Question

我正在尝试将我的站点服务工作进程设置为在脱机时显示脱机.html文件，而不是用户尝试获取的不在缓存中的任何 HTML 文件。

按照Workbox文档(https://developers.google.com/web/tools/workbox/guides/advanced-recipes#provide_a_fallback_response_to_a_route(，我编写了下面的代码，但是每当我在Chrome DevTools中勾选离线复选框并访问HTML页面进行测试时，我都会得到Chrome的标准"无互联网"恐龙页面。

workbox.precaching.precacheAndRoute([
'/offline.html'
]);
workbox.routing.setCatchHandler(({ event }) => {
switch (event.request.destination) {
case 'document':
return caches.match(workbox.precaching.getCacheKeyForURL('/offline.html'));
break;
default:
return Response.error();
}
});

Answer 1

您忘记注册路由。因此，workbox.routing.setCatchHandler函数永远不会被调用。

将此代码添加到服务工作进程应该可以解决问题

workbox.routing.registerRoute(
new RegExp('.html'),
new workbox.strategies.NetworkOnly({
cacheName: 'htmlcache'
})
);

您也可以参考此示例： https://progressify.org/building-a-pwa-with-an-offline-fallback-page-using-workbox/