无法清除 Gatsby 静态网站缓存

Question

我有一个网站，最初使用 GatsbyJS（静态网站的 React 框架）构建。现在我将该网站迁移到了 CMS（WordPress），但由于我们最初在同一域上使用了 GatsbyJS，因此它显示了 Gatsby 构建的旧缓存文件。

当某人最初打开 Gatsby 站点时，我们无法在浏览器上访问新网站，因为它只显示缓存文件。

从我的初始搜索中，我了解到以下内容：

1. GatsbyJS 通过使用服务工作者优化 离线访问。
2. 要使服务工作者失效，我需要再次提供 GatsbyJS 静态站点，并添加一些脚本，以便当有人访问站点时，服务工作者被失效。
3. 否则，我无法控制服务工作者。

我无法返回到初始站点，因为它已经发布并且人们正在查看它，但仍有很多人仍在看到损坏的 Gatsby 站点。

是否有解决以上问题的方法？

- Deepak jha

Answer 1

您可以尝试向新站点添加一个脚本，以删除所有服务工作者（如果有）：

<script>
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.getRegistrations().then(function(registrations) {
      for (let registration of registrations) {
        registration.unregister();
      }
    });
  }
</script>

如果此方法在您的情况下不足够，请查看 self-destroying-sw :

1. Remove everything about your previous ServiceWorker (registration/uninstallation code, ServiceWorker file)

2. Create a file with the same name as your previous ServiceWorker and put it in the same place where your previous ServiceWorker was

3. Put following code into the file:

   self.addEventListener('install', function(e) {
     self.skipWaiting();
   });
   
   self.addEventListener('activate', function(e) {
     self.registration.unregister()
       .then(function() {
         return self.clients.matchAll();
       })
       .then(function(clients) {
         clients.forEach(client => client.navigate(client.url))
       });
   });
   

4. Deploy your project!

- Fabian Schultz

---

我之前也试过这个，但没有成功。对我来说，好像浏览器没有向服务器发送任何请求。 - Deepak jha

@Deepakjha 我更新了我的答案。如果这不能解决问题，你可能需要等待人们机器上的缓存过期。 - Fabian Schultz

我不确定是因为缓存自己过期还是因为这个脚本，但是一些存在缓存问题的系统现在已经正常工作了。我只是将脚本添加到根目录并将其包含在头部中。 - Deepak jha

Answer 2

如果您仍在使用 Gatsby，则可以使用官方 Gatsby Browser API 触发服务工作者的更新。

在 Gatsby 中，服务工作者被编程为在导航时更新。问题是，当用户访问主页并且没有进一步导航时，不会显示任何更新。如果您希望页面在第一次访问时自动刷新并使旧缓存无效，则需要触发它。

如果您的 gatsby-config.js 中有 gatsby-plugin-offline，请将此行添加到您的 gatsby-browser.js 中。

// trigger an immediate page refresh when an update is found
export const onServiceWorkerUpdateReady = () => window.location.reload();

这里是官方Github存储库关于此问题的背景信息。

- EliteRaceElephant