使用networkFirst策略的工作箱回退响应

Question

我在服务工作者中使用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导致了网络错误响应：不是响应的对象已传递给responseWith（）。”

我在做什么错了？

我正在使用3.4.1版 https://storage.googleapis.com/workbox-cdn/releases/3.4.1/workbox-sw.js

Answer 1

事实证明，根据Workbox GitHub存储库上的this issue，这是故意的。这是jeffposnick在networkFirst上的报价（与其他策略相对）：

  

networkFirst最终不会在这种情况下抛出，因为   基础网络异常触发cache.match（）查找，并且   发生高速缓存未命中时，cache.match（）不会抛出/拒绝。代替，   它会以undefined解析。

因此在workbook中使用networkFirst进行回退的方法是在响应中捕获 undefined 并将其与回退网址匹配，如下所示：

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