如何使用 Workbox setDefaultHandler

Question

我正在从 sw-toolbox 切换到 Workbox，但不知道如何使用setDefaultHandler()。

如果我尝试（如上面链接的文档中所述）：

workboxSW.router.setDefaultHandler({
    handler: new workbox.runtimeCaching.CacheFirst()
});

我收到一个错误，提示 runtimeCaching 未定义：

未捕获的 ReferenceError：未定义路由器

那么..我如何使用它并以类似于我如何配置 sw-toolbox 的方式配置它：

toolbox.options.cache = {
    name: "default",
    maxEntries: 128,
    maxAgeSeconds: (60*60*24), // 24hrs
};
toolbox.router.default = toolbox.cacheFirst;

我希望能够做这样的事情：

workboxSW.router.setDefaultHandler({
    handler: workboxSW.strategies.cacheFirst({
        cacheName: 'default',
        cacheExpiration: {
            maxEntries: 128,
        },
        cacheableResponse: {statuses: [0, 200]},
    })
});

..它不会抛出编译错误，但是当我使用它时，我得到了这个：

未捕获（承诺）类型错误：不支持请求方法“POST”

..并且我的“默认”缓存存储仍然为空..？

Answer 1

由于我对 Jeff 的第一个解决方案的编辑被拒绝，我将继续自己提交答案。

杰夫的样本很接近。他建议：

您可以在默认处理程序中检查请求类型，并且只对 GET 请求应用缓存优先策略：

workboxSW.router.setDefaultHandler({
  handler: (args) => {
    if (args.event.request.method === 'GET') {
      return workboxSW.strategies.cacheFirst(args);
    }
    return fetch(args.event.request);
  },
});

这是正确的方法，但他提供的示例代码不起作用。handler 参数需要一个处理程序，而不是一个策略。幸运的是，策略只有一个（公共）方法，称为“句柄”。

所以我稍微修改了他的代码；首先，我创建了一个defaultStrategy包含我需要的所有选项的策略。然后，在 setDefaultHandler 调用中，我返回defaultStrategy.handle(args)而不是 CacheFirst 构造函数。就是这样！

// Register 'default'
var defaultStrategy = workboxSW.strategies.cacheFirst({
    cacheName: "default",
    cacheExpiration: {
        maxEntries: 128,
        // more options..
    },
    cacheableResponse: {statuses: [0, 200]},
});
workboxSW.router.setDefaultHandler({
    handler: (args) => {
        if (args.event.request.method === 'GET') {
            return defaultStrategy.handle(args);
        }
        return fetch(args.event.request);
    },
});

更新：Workbox v3

正如我在下面的评论中指出的那样，上面的代码不适用于 Workbox v3。改用这个：

// Register 'default'
var defaultStrategy = workbox.strategies.cacheFirst ({
    cacheName: "your.cache.name",
    plugins: [
        new workbox.expiration.Plugin({
            maxEntries: 128,
            maxAgeSeconds: 7 * 24 * 60 * 60, // 1 week
            purgeOnQuotaError: true, // Opt-in to automatic cleanup
        }),
        new workbox.cacheableResponse.Plugin({
            statuses: [0, 200] // for opague requests
        }),
    ],
});
workbox.routing.setDefaultHandler(
    (args) => {
        if (args.event.request.method === 'GET') {
            return defaultStrategy.handle(args); // use default strategy
        }
        return fetch(args.event.request);
    }
);