Question

我正试图将我的站点服务工作程序设置为在脱机时显示offline.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 函数。

将此代码添加到您的Service Worker应该可以解决问题

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/

服务工作者：离线时改用offline.html服务

1 个答案: