提问人:Moodo9 提问时间:10/24/2023 最后编辑:Moodo9 更新时间:11/22/2023 访问量:85
如何修复网站无缘无故被缓存?
How to fix website being cached for no reason?
问:
目前,我有一个网站,我使用node.js作为后端,React.js作为前端。我使用 cloudflare,我当前的 cloudflare 缓存设置是
缓存级别:标准
浏览器缓存 TTL:4 小时
爬虫提示:开启
始终在线™:开启
开发模式:关闭
我使用服务工作者
const cacheVersion = 2;
const cacheName = `cache-${cacheVersion}`;
self.addEventListener('activate', event => {
event.waitUntil(
caches.keys().then(cacheNames => {
return Promise.all(
cacheNames.map(cache => {
if (cache !== cacheName) {
console.log("deleted cache: " + cache);
return caches.delete(cache);
}
})
);
})
);
});
self.addEventListener("install", (event) => {
event.waitUntil(
caches.open(cacheName).then((cache) => {
return cache.addAll([
the url endings
]);
})
);
});
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((response) => {
if (response) {
return response;
}
return fetch(event.request).then((response) => {
if (response && response.status === 200) {
const responseClone = response.clone();
caches.open(cacheName).then((cache) => {
cache.put(event.request, responseClone);
});
}
return response;
})
})
);
});
我看不出它有什么问题,我不认为这是问题所在,因为我禁用了它并且问题仍然存在,但这可能是问题所在。
注意我知道更改在服务器上,因为当我通过 IP 访问该站点时,它是 100% 更新的
更多信息: 我在 node.js 中使用 express,对于除我使用的一些例外之外的所有文件 app.use(“/path”, express.static(path));IDK,如果这会影响它,但我再次尝试将其连接到 IP 版本而不是 url,它工作正常,所以是的......
我尝试了很多不同的东西,首先是 cloudflare I: 清除缓存, 开启开发模式,
在客户端 I 清除了所有站点数据, 摆脱了服务工作者
在服务器端 I 重新安装所有新设备
我期待该网站的更新版本,但我看到的是旧版本。
不过,非常重要的一点是,当我在一个从未访问过该网站的新浏览器中尝试它时,它就可以工作了。这真的让我感到困惑,因为清除所有站点数据不起作用吗?
所以我的主要问题是我怎样才能解决这个问题?但是对于以后,我如何修复我的服务工作者以使其正常工作,特别是当我更新站点时,它会更新。
谢谢!
答:
尝试将代码添加到公用文件夹中的索引 .html 中。这将防止您的网站被缓存。
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
看起来 Service Worker 正在积极缓存资源,这有时会导致提供过时的内容。若要确保始终从网络获取最新内容,可能需要实现具有网络回退的缓存优先策略,或使用与此类似的过时同时重新验证策略
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.open(cacheName).then((cache) => {
return cache.match(event.request).then((response) => {
const fetchPromise = fetch(event.request).then((networkResponse) => {
cache.put(event.request, networkResponse.clone());
return networkResponse;
});
return response || fetchPromise;
});
})
);
});
此外,请尝试更改 Cloudfare 缓存级别,因为它可能会覆盖浏览器缓存
缓存级别:旁路
处理持续的缓存问题确实令人头疼,但让我们尝试逐步排除和解决此问题。
缓存问题解决: Cloudflare:
确保正确配置了 Cloudflare 的缓存设置。理想情况下,清除缓存并使用开发模式应该可以防止缓存问题,但有时可能需要一些时间才能传播更改。请考虑在清除缓存后等待一段时间,以确保更改已生效。 服务人员:
Service Worker 确实会导致缓存问题。由于您已禁用它并且问题仍然存在,因此它可能不是此处的根本原因。但是,必须确认 Service Worker 不会无意中拦截请求,即使禁用也是如此。在“网络”选项卡下检查浏览器的开发人员工具,以确认 Service Worker 的行为。
浏览器缓存:浏览器倾向于主动缓存资源。即使在清除站点数据后,有时也可能存在残留缓存。尝试硬刷新(Ctrl + F5 或 Shift + 重新加载)或以隐身/私密模式打开站点以绕过缓存并确认更新的版本是否正确加载。 服务器端缓存:
Express 可能有自己的缓存机制。确保任何服务器端缓存配置正确,或出于测试目的暂时禁用它,以查看它是否解决了问题。 Service Worker 更新: 关于服务工作者,供将来参考:
版本控制策略: 确保 Service Worker 文件本身具有版本控制策略。更新 Service Worker 时,更改版本号将强制浏览器获取更新的 Service Worker。
缓存管理: 修改 Service Worker,以便仅在必要时更新缓存。它目前甚至缓存状态为 200 的响应,这可能会导致对未更改内容进行不必要的缓存。您可以考虑实施更细致入微的缓存策略,例如仅缓存特定内容或基于内容更改进行缓存(例如,使用 ETag 或时间戳比较)。
处理更新:
在 Service Worker 中实现逻辑,以通知客户端更新。这可能涉及侦听来自服务器的信号,指示新内容的可用性,并提示用户刷新页面以获取最新版本。
结论: 根据提供的信息,这些步骤应有助于隔离问题并可能解决缓存问题。如果问题仍然存在,请考虑寻求更具体的调试工具或联系 Cloudflare 支持,以获得诊断缓存问题的进一步帮助。
评论
如果您想验证您的网站是否正在从缓存中提供。只需打开 inspect 元素并逐个检查您的文件(html、CSS 和 JS 文件)。
检查属性。X-Cache
HIT
表示它从缓存中提供。 表示这是一个新请求,而不是来自缓存。MISS
评论