旧服务人员缓存以前的网站

Question

我在 Gatsby 中构建了一个旧网站，它使用

gatsby-plugin-offline

通过服务工作者缓存页面。我创建了一个新站点（在 NextJS 中），现在通过 Netlify 部署到相同的 URL。

一些用户在尝试访问该网站时，看到的却是带有错误的空白屏幕。这些错误显示在控制台中：

这是由于

gatsby-plugin-offline

服务工作人员提供旧网站的缓存版本：

如果我重新部署旧站点，它会正确显示（因为缓存站点正在查找的资产现在可用），但是，它不会显示最新版本，仅显示旧的缓存版本。

这意味着即使我更新

sw.js

脚本以删除任何服务人员（通过

gatsby-plugin-remove-serviceworker

或其他方式），新版本的脚本也不会被选取。

我还尝试将此

sw.js

脚本添加到我的 NextJS 应用程序的根目录（在

/public

中），但它再次没有被拾取。

受影响的用户可以通过在浏览器中访问

/sw.js

来查看新的 sw.js 脚本，但遗憾的是，当访问该网站时，它没有被拾取。

我也也尝试将其添加到我的

netlify.toml

，再次无济于事

[[headers]]
  for = "/sw.js"
  [headers.values]
    Cache-Control = "no-cache, no-store, must-revalidate"

进行硬刷新会显示正确的站点，但进行常规刷新后会再次显示旧站点。

显然，我可以在开发工具中删除我的机器上的 Service Worker，但这并不能帮助所有遇到此问题的用户。

DevTools 称该 Service Worker 于 6 月收到，它会自然死亡吗？

所以问题的关键是我们：

• 有一个僵尸服务人员正在为旧版本的页面提供服务
• 无法运行更新的软件代码，因为每次都提供相同的缓存页面
• 如何确保用户看到的是最新页面，而不是旧的缓存版本

我实在是无计可施了。任何建议将不胜感激。

Answer 1

我们的一些网站也遇到了同样的问题。我们使用以下方法修复了它。

创建此组件并将其添加到您的根布局中

"use client";
import { useEffect } from “react”;
export default function Layout({ children }: { children: React.ReactNode }) {
  useEffect(() => {
    if (“serviceWorker” in navigator) {
      navigator.serviceWorker.getRegistrations().then((registrations) => {
        registrations.forEach((registration) => {
          registration.unregister();
        });
      });
    }
  }, []);
  return <>{children}</>;
}