问题描述
所以我们最近将登陆页面从 create-react-app 更改为使用 Next.js。我们旧的 create-react-app 在用户浏览器上注册了一个基本的默认服务工作线程。
每当我切换到我们的新 Next.js 网站时，我们意识到以前访问过该网站的用户将继续获得旧网站的糟糕缓存版本。
我已经找到了一些讨论这个问题的讨论，但两种解决方案似乎都不适合我。这两个讨论是：
这两种解决方案本质上都包括向您的 Next 项目添加一个新的 Service Worker 文件，并使用一些代码来删除现有的 Service Worker。该代码看起来像
if ("serviceWorker" in navigator) {
window.addEventListener("load",function () {
navigator.serviceWorker.getRegistrations().then((registrations) => {
console.log("--");
for (let registration of registrations) {
registration.unregister().then((bool) => {
console.log("unregister: ",bool);
});
}
if (registrations.length) {
window.location.reload();
}
});
});
}
所以我试过了。我的旧 Service Worker 是通过路径 OUR_URL/service-worker.js 上的文件提供的。我在我的 Next 项目中添加了一个公共目录，并在我的项目中添加了一个同名文件和上面的代码。然后我在我的 _document.js 中链接了这个文件，并且可以确认它可以运行，并且我可以在我的 Next.js 站点上找到它。新文件和旧文件的 URL 相同。不幸的是，问题似乎仍然存在。
在上面链接的其他文章之一中，它还提到将此文件放在 Next 项目的根目录中。这对我来说没有多大意义，因为它并没有以我所知道的任何方式提供，但我也试了一下，仍然没有运气。
有谁知道我在这里可能做错了什么，或者我可以做些什么来解决这个问题？本质上，我们只想强制删除所有旧的 Service Worker，以便我们的新网站正确加载。
解决方法
服务工作者（至少通常）是通过网站本身注册的，浏览器不会自动找到（至少目前还没有）。
此代码（为域取消注册所有服务工作者）应该包含在从 next.js 发送到浏览器的任何内容（例如 index.js）中。如果你把它放在你的主页上，所有去那里的用户都应该解决问题。如果您有理由怀疑（根据流量数据）用户将其他页面添加为书签，您可能希望将其包含在通用包或页脚中。