我正在开发一个创作/ CMS类型的应用程序。该应用程序允许同时编辑各种数据“块”。它已使用appache和indexDB支持脱机。通过这种方法，我知道我的数据是来自网络还是来自缓存。现在，我想迁移内容以使用服务工作者和新的缓存API。
我需要一种方法来了解我的数据（请求）是从缓存还是从网络提供的，因此我可以通知用户他们可能正在查看过时的数据，以便任何编辑都可以覆盖他们不知道的数据。海事组织，这是一件很平常的事，但事实并非如此简单……
我目前正在尝试使用WorkBox进行工作，但我对本机解决方案感到非常满意。我尝试使用Workbox在响应中设置新的标头，但Chrome抱怨
const apiStrategy = workbox.strategies.cacheFirst({
cacheName: 'data-cache',
cacheExpiration: {
maxEntries: 100,
maxAgeSeconds: 3600 * 24
},
cacheableResponse: { statuses: [200] }
});
workbox.routing.registerRoute(
new RegExp('/api/'),
async ({event, url}) => {
const cachedResponse = await apiStrategy.handle({event, url});
if (cachedResponse) {
const responseClone = cachedResponse.clone();
responseClone.headers.set('x-sw-cache', 'yes');
return responseClone;
}
return cachedResponse;
}
);
那么有什么方法可以知道响应是来自网络还是来自缓存？
原来有很多插件。使用自定义cacheWillUpdate插件，我可以获得所需的东西。我的代码现在看起来像
workbox.routing.registerRoute(
new RegExp('/api/'),
new workbox.strategies.NetworkFirst({
cacheName: 'data-cache',
cacheExpiration: {
maxEntries: 100,
maxAgeSeconds: 3600 * 24
},
cacheableResponse: { statuses: [ 200 ] },
plugins: [
{
cacheWillUpdate: ({ response }) => {
return newResponse(response.clone(), (headers) => {
headers.set("x-sw-cache", 'yes');
return headers;
});
}
}
]
})
);
const newResponse = (res, headerFn) => {
const cloneHeaders = () => {
const headers = new Headers();
for (const kv of res.headers.entries()) {
headers.append(kv[0], kv[1]);
}
return headers;
};
const headers = headerFn ? headerFn(cloneHeaders()) : res.headers;
return new Promise(function (resolve) {
return res.blob().then(function (blob) {
resolve(new Response(blob, {
status: res.status,
statusText: res.statusText,
headers: headers
}));
});
});
};
该newReponse函数取自如何更改响应的标头？谢谢@mjs！
现在，我可以检查x-sw-cache标题以通知我的用户他们可能正在查看状态数据。:)
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句