Javascript 有没有办法告诉你';您正在从服务工作者获取缓存数据吗?
我正在编写/CMS类型的应用程序。该应用程序允许并发编辑各种数据块。它支持脱机使用appache和indexDB。通过这种方法,我知道我的数据是来自网络还是来自缓存。现在我想迁移一些东西来使用服务工作者和新的缓存api 我需要一种方法来知道我的数据(请求)是从缓存还是从网络提供的,这样我就可以通知用户他们可能正在查看过时的数据,这样任何编辑都可以覆盖他们不知道的数据。在我看来,这是一件很平常的事情,但事实证明这并不那么容易 我目前正在尝试使用WorkBox使事情正常工作,但我非常乐意使用本机解决方案。使用Workbox,我试图在响应上设置一个新的标题,但Chrome对此表示不满Javascript 有没有办法告诉你';您正在从服务工作者获取缓存数据吗?,javascript,html,caching,service-worker,workbox,Javascript,Html,Caching,Service Worker,Workbox,我正在编写/CMS类型的应用程序。该应用程序允许并发编辑各种数据块。它支持脱机使用appache和indexDB。通过这种方法,我知道我的数据是来自网络还是来自缓存。现在我想迁移一些东西来使用服务工作者和新的缓存api 我需要一种方法来知道我的数据(请求)是从缓存还是从网络提供的,这样我就可以通知用户他们可能正在查看过时的数据,这样任何编辑都可以覆盖他们不知道的数据。在我看来,这是一件很平常的事情,但事实证明这并不那么容易 我目前正在尝试使用WorkBox使事情正常工作,但我非常乐意使用本机解决
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;
}
);
那么,有没有办法知道响应是来自网络还是缓存?如果您查看浏览器的开发工具(即chrome),切换到网络选项卡,它将显示为(来自ServiceWorker)。另外,如果您启用调试workbox输出,那么您需要知道控制台中的所有信息。结果是有一大堆。我能够使用定制的
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
}));
});
});
};
newresponse
功能取自Thank@mjs
我现在可以检查
x-sw-cache
标题,通知用户他们可能正在查看状态数据。:) 这不是我想要的。我需要知道我的js代码中的数据来自哪里。