我正在开发一个创作/ 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;
}
);
那么,是否有办法知道响应是来自网络还是来自缓存?
答案 0 :(得分:0)
如果您在浏览器的开发工具(即chrome)中查找,请切换到“网络”标签,该标签将显示为(来自ServiceWorker)。另外,如果启用调试工作箱输出,则您需要在控制台中了解所有信息。
答案 1 :(得分:0)
结果发现有一堆plugins。使用自定义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
函数来自How to alter the headers of a Response?,谢谢@mjs!
我现在可以检查x-sw-cache
标头,以通知我的用户他们可能正在查看状态数据。 :)