4

我正在从 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]},
    })
});

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

未捕获（承诺中）TypeError：不支持请求方法“POST”

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

4

2 回答 2

4

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

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

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

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

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

所以我稍微修改了他的代码；首先，我创建了一个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);
    },
});

更新：工作箱 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);
    }
);
于 2018-01-22T09:36:28.417 回答
3 
workboxSW.router.setDefaultHandler({
  handler: workboxSW.strategies.cacheFirst({...})
});

通常是正确的语法。

我相信你看到

未捕获（承诺中）TypeError：不支持请求方法“POST”

因为默认处理程序会针对与任何显式路由不匹配的所有 HTTP 请求（包括 HTTPPOST请求）触发。但是 HTTPPOST请求不能与 Cache Storage API 一起使用，当缓存优先策略尝试将请求/响应对存储在缓存中时，将引发类似于您所看到的异常。

在这种特殊情况下，当您知道您的 Web 应用程序将发出 HTTP POST 请求时，您可以采用两种方法之一。

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

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

或者，您可以创建一个匹配所有请求的通配符路由，并利用默认情况下路由仅匹配 HTTP 的事实GET：

workboxSW.router.registerRoute(
  /./, // This should match all requests.
  workboxSW.strategies.cacheFirst({...}),
  'GET' // This is the default, and can be left out.
);
于 2018-01-19T20:10:08.830 回答