如何使用Workbox setDefaultHandler
我正在从sw工具箱切换到工作框，我不知道如何使用setDefaultHandler()。
如果我尝试(如上文所链接的文档中所述)：
workboxSW.router.setDefaultHandler({
handler: new workbox.runtimeCaching.CacheFirst()
});我得到一个错误，runtimeCaching是未定义的：
未定义的ReferenceError:路由器未定义
所以..。如何使用它并以类似于配置sw工具箱的方式配置它：
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]},
})
});..which不会抛出编译错误，但当我使用它时，会得到以下内容：
TypeError:请求方法'POST‘不受支持
默认的..and缓存存储仍然是空的..？
回答 2
Stack Overflow用户
发布于 2018-01-22 09:36:28
因为我对Jeff的第一个解决方案的编辑被拒绝了，我将继续自己提交一个答案。
杰夫的样本接近了。他建议：
您可以在默认处理程序中检查请求类型，并且只应用缓存优先策略来获取请求：
workboxSW.router.setDefaultHandler({
handler: (args) => {
if (args.event.request.method === 'GET') {
return workboxSW.strategies.cacheFirst(args);
}
return fetch(args.event.request);
},
});这是正确的方法，但他提供的示例代码不起作用。处理程序参数需要处理程序，而不是策略。幸运的是，策略有一个(公共)方法，称为“句柄”。
因此，我稍微修改了他的代码；首先，我创建了一个名为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);
}
);Stack Overflow用户
发布于 2018-01-19 20:10:08
workboxSW.router.setDefaultHandler({
handler: workboxSW.strategies.cacheFirst({...})
});一般都是正确的语法。
我相信你看到了
TypeError:请求方法'POST‘不受支持
因为默认处理程序是为所有不匹配任何显式路由的HTTP请求(包括HTTP请求)触发的。但是HTTP POST请求不能与缓存存储API一起使用，当缓存第一策略试图将请求/响应对存储在缓存中时，将引发类似于您所看到的异常。
在这种情况下，当您知道您的web应用程序将发出HTTP请求时，您可以采取两种方法之一。
您可以在默认处理程序中检查请求类型，并且只对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.
);https://stackoverflow.com/questions/48308426
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号