Question

我尝试将旧代码从google workbox v2迁移到workbox v3，我无法使用workbox.routing.registerNavigationRoute因为我的默认路由＆＃39; /＆＃39; （这是我的apphell所在的位置）是一个运行时缓存（因为它是一个多语言网站https://www.autovisual.com，语言放在子文件夹＆＃39; / fr＆＃39;中，＆＃39; / es＆＃39; ...有一个独特的服务工作者，其范围为＆＃39; /＆＃39;）。

这是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();
    }
});

这似乎很基本：目标是捕捉所有请求并导航＆＃39;与任何其他路线都没有匹配，并首先发送网络的缓存版本＆＃39; /＆＃39;。

对于客户端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的任何示例，而且我被卡住了：（

Answer 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);

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

1 个答案: