将 Google Workbox setDefaultHandler // setCatchHandler 从 v2 迁移到 v3答案

【问题标题】：Migrate Google Workbox setDefaultHandler // setCatchHandler from v2 to v3将 Google Workbox setDefaultHandler // setCatchHandler 从 v2 迁移到 v3
【发布时间】：2018-06-01 01:02:56
【问题描述】：

我正在尝试将我的旧代码从 google workbox v2 迁移到 workbox v3，但我无法使用 workbox.routing.registerNavigationRoute，因为我的默认路由“/”（这是我的 appshell 所在的位置）是 运行时缓存（因为它适用于多语言网站https://www.autovisual.com，其语言放在子文件夹'/fr'、'/es' ...具有唯一的Service-Worker 范围在'/'）。

这是 v2 代码：

workboxSW.router.setDefaultHandler({
    handler: ({
        event
    }) => {
        return fetch(event.request);
    }
 });

workboxSW.router.setCatchHandler({
    handler: ({
        event
    }) => {
        if (event.request.mode === 'navigate') {
            return caches.match('/');
        }
        return new Response();
    }
});

这似乎很基本：目标是捕获所有与任何其他路由都不匹配的请求“导航”，并发送缓存版本，网络优先，url '/'。

对于我使用的客户端 js 中的信息：

if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
        caches.open('rootCacheNetworkFirst').then(function(cache) {
            cache.match('/').then(function(response) {
                if (!response) {
                    cache.add('/');
                }
            });
        });

        navigator.serviceWorker.register('/sw.js', {
            scope: "/"
        });
    });
}

我找不到新 v3 workbox.routing.setDefaultHandler 和 workbox.routing.setCatchHandler 的任何示例，我被困住了 :(

【问题讨论】：

标签： service-worker workbox

【解决方案1】：

我认为使用setDefaultHandler 或setCatchHandler 与所描述的用例无关。

要完成您所描述的，请将以下代码添加到您的服务工作者文件中在所有其他路由都已注册。（在 Workbox v3 中，first-registered-route 优先。）您只需要配置一个NavigationRoute 并注册它：

const networkFirst = workbox.strategies.networkFirst({
  cacheName: 'your-cache-name',
});
const navigationRoute = new workbox.routing.NavigationRoute(networkFirst, {
  // Set blacklist/whitelist if you need more control
  // over which navigations are picked up.
  blacklist: [],
  whitelist: [],
});
workbox.router.registerRoute(navigationRoute);

【讨论】：