代码之家  ›  专栏  ›  技术社区  ›  REJH

如何使用Workbox setDefaultHandler

  •  4
  • REJH  · 技术社区  · 7 年前

    我正在从软件工具箱切换到Workbox,我不知道如何使用 setDefaultHandler() .

    如果我尝试(如上面链接的文档所述):

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

    我收到一个错误,runtimeCaching未定义:

    未捕获引用错误:未定义路由器

    所以如何使用它并以类似于配置软件工具箱的方式进行配置:

    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”

    ..“默认”的缓存存储仍然为空。。?

    2 回复  |  直到 7 年前
        1
  •  4
  •   REJH    6 年前

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

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

    您可以在默认处理程序中检查请求类型 应用缓存优先策略获取请求:

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

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

    所以我稍微修改了他的代码;首先,我创建了一个名为 defaultStrategy 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);
        }
    );
    
        2
  •  3
  •   Jeff Posnick    7 年前
    workboxSW.router.setDefaultHandler({
      handler: workboxSW.strategies.cacheFirst({...})
    });
    

    通常是正确的语法。

    我相信你看到了

    未捕获(承诺中)TypeError:不支持请求方法“POST”

    因为所有与任何显式路由(包括HTTP)不匹配的HTTP请求都会触发默认处理程序 POST 请求。但是HTTP 发布 请求不能与缓存存储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 获取 :

    workboxSW.router.registerRoute(
      /./, // This should match all requests.
      workboxSW.strategies.cacheFirst({...}),
      'GET' // This is the default, and can be left out.
    );