service-worker - 使用 networkFirst 策略的 Workbox 回退响应

Question

我在我的 Service Worker 中使用 Workbox，我使用 this strategy为离线和页面不在缓存中时应显示的路由提供回退响应:

const FALLBACK_URL = '/offline/';

const urlHandler = workbox.strategies.staleWhileRevalidate({
    cacheName: 'page-cache'
});

workbox.routing.registerRoute(
    /\/.+\//,
    ({event}) => {
        return urlHandler.handle({event})
            .catch(() => caches.match(FALLBACK_URL));
    });

这在我使用 staleWhileRevalidate 策略和使用 networkOnly 策略时效果很好(我已经缓存了 FALLBACK_URL)。但是，我真的很想使用 networkFirst 策略，但是当我尝试访问不在缓存中的页面时出现以下错误:

控制台显示

““https://staging.bassbuddha.com/pedals/”的 FetchEvent 导致了网络错误响应:一个不是响应的对象被传递给了 respondWith()。”

我做错了什么？

我使用的是 3.4.1 版本 https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js

Answer 1

根据this issue，事实证明这是故意的在 Workbox GitHub 存储库上。这是 jeffposnick 对 networkFirst 的引用(相对于其他策略):

networkFirst does not end up throwing in that scenario because the underlying network exception triggers a cache.match() lookup, and cache.match() doesn't throw/reject when there's a cache miss. Instead, it resolves with undefined.

因此，在 Workbook 中使用 networkFirst 和 fallback 进行回退的解决方案是在响应中捕获 undefined 并将其与回退 url 匹配，如下所示:

const FALLBACK_URL = '/offline/';

const urlHandler = workbox.strategies.networkFirst({
    cacheName: 'page-cache'
});

workbox.routing.registerRoute(
    /\/.+\//,
    ({event}) => {
        return urlHandler.handle({event})
            .then((response) => {
                return response || caches.match(FALLBACK_URL);
            })
            .catch(() => caches.match(FALLBACK_URL));
    });