从React切换到Next.js后，由于服务工作者的缓存，网站不会刷新。如何强制更新？
在react上制作的一个网站有一个用于缓存的服务工作者。我们用unregister()代码运行网站，网站被移植到Next.js。尽管在一些机器上，注销代码从未运行过，因此现在这些机器运行的是旧的react代码，并且不会反映任何所做的更改并推送到服务器。这些更改在隐姓埋名和运行注销代码的其他机器上运行。它在Caddy服务器上。
如何从服务器端强制刷新？我们可以在我们的机器上清除缓存或注销服务工作者，但我们不知道有多少客户端拥有旧代码。
谢谢!
回答 2
Stack Overflow用户
发布于 2021-01-18 21:10:33
所以这个问题已经解决了。创建了一个新的服务工作者文件，其中只包含删除服务工作者的代码。
if ("serviceWorker" in navigator) {
window.addEventListener("load", function () {
navigator.serviceWorker.getRegistrations().then((registrations)
=> {
for (let registration of registrations) {
registration.unregister().then((bool) => {
console.log("unregister: ", bool);
});
}
});
});
}并将此文件放在保存以前的服务工作者的确切位置(您可以从chrome开发人员工具中找到该文件)。还包括在index.html或_document.js (对于next.js)中链接此文件的脚本标记。这应该可以解决这个问题。
Stack Overflow用户
发布于 2021-09-23 18:38:36
为了解决这个问题，我们的想法是注销React应用程序的Service Worker，这样浏览器就可以删除它。为此，我们必须在Next.js项目的根目录上创建一个Service Worker，并在任何加载的页面上添加一个EventListener，以便从浏览器中删除此文件。一旦我们这样做了，我们就可以确定下一次浏览器发出请求时，它会被更新。另一件需要注意的重要事情是，浏览器需要关闭与我们的应用程序相关联的所有Service Worker实例才能应用更改。
public/service-worker.js
if ('serviceWorker' in navigator) {
window.addEventListener('load', function() {
navigator.serviceWorker.getRegistrations().then(registrations => {
for(let registration of registrations) {
registration.unregister().then(bool => {console.log('unregister: ', bool);});
}
window.location.reload();
});
});
}来源：https://www.asapdevelopers.com/service-worker-issue-nextjs-framework/
https://stackoverflow.com/questions/65762531
复制相似问题