Service Worker：离线时服务 offline.html

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 的标准 "No internet" 恐龙页面。

    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/

Service Worker：离线时服务 offline.html

Service Worker: Serve offline.html instead when offline

offline-caching

service-worker

workbox