[英]service worker: cached data again loads from server, fetch is not triggered
[英]Is there a way to tell if you're getting cached data from the service worker?
我正在开发一个创作/CMS 类型的应用程序。 该应用程序允许同时编辑各种数据“块”。 它支持离线使用 appache 和 indexDB。 通过这种方法,我知道我的数据是来自网络还是来自缓存。 现在我想迁移东西以使用服务工作者和新的缓存 api。
我需要一种方法来知道我的数据(请求)是从缓存还是网络提供的,以便我可以通知用户他们可能正在查看陈旧数据,因此任何编辑都可能覆盖他们不知道的数据。 IMO,这将是一件很常见的事情,但事实证明并不那么容易......
我目前正在尝试使用 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
插件获得我需要的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
标头以通知我的用户他们可能正在查看状态数据。 :)
如果您查看浏览器的开发工具(即 chrome)切换到网络选项卡,它将显示为(来自 ServiceWorker)。 此外,如果您启用调试工作箱输出所有您需要在控制台中知道的信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.