从 React 切换到 Next.js 后，由于 service worker 的缓存，网站没有刷新。怎么强制更新？

Question

一个基于 React 的网站有一个 service worker 用于缓存。我们运行使用 unregister() 代码的网站，该网站被移植到 Next.js 。尽管在某些机器上，注销代码永远不会运行，所以现在这些机器是运行旧的 React 代码，不会反映所做的任何更改并推送到服务器。这些更改是运行在隐身和其他取消注册代码运行的机器上。它在 Caddy 服务器上。

如何强制它从服务器端刷新？我们可以清除缓存或在我们的机器上注销服务工作者，但我们不知道有多少客户端有旧代码。

谢谢！

Answer 1

所以问题已经解决了。制作了一个新的 service worker 文件，其中只有删除 service worker 的代码。

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);
        });
     }
    });
  });
}

并将此文件放在之前 service worker 所在的确切位置（您可以从 chrome 开发人员工具中找到它）。还包括在 index.html 或 _document.js（对于 next.js）中链接此文件的脚本标记。这应该可以解决问题。

Answer 2

为了解决这个问题，我们的想法是取消注册我们的 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/

从 React 切换到 Next.js 后，由于 service worker 的缓存，网站没有刷新。怎么强制更新？

A website is not refreshing because of caching of service worker, after switching from React to Next.js. How to force update?

web

reactjs

caddy

next.js