无法清除 Gatsby 静态站点缓存

Question

我有一个使用 gatsbyJS（静态网站的 React 框架）的网站

现在我已将该站点移动到 CMS (WordPress)，但因为我们最初在同一域中使用了 gatsbyJS，所以它显示了 gatsby 构建的旧缓存文件。

我们无法在最初打开 gatsby 网站的浏览器上访问新网站，因为它只显示缓存文件。

通过最初的搜索，我了解到以下内容：

GatsbyJS 使用 service workers.

offline access

为了使 service workers 失效，我需要在添加一些脚本后再次为 GatsbyJS 静态站点提供服务器，这样当有人访问该站点时，service workers 就会失效。
否则我无法控制服务人员。

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

以上问题有什么解决办法吗？

Answer 1

您可以尝试将脚本添加到新站点以删除所有服务工作者，如果有的话：

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

如果您的情况还不够，请查看 self-destroying-sw:

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

Create a file with the same name as your previous ServiceWorker and put it in the same place where your previous ServiceWorker was
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))
    });
});
Deploy your project!

Answer 2

如果您仍在使用 Gatsby，您可以使用官方 Gatsby Browser API 来触发对 service worker 的更新。

在 Gatsby 中，service worker 被编程为在导航时更新。问题在于，当用户回家并且不再继续导航时，将看不到任何更新。如果想让页面在第一次访问时自动刷新，让旧的缓存失效，就需要触发。

如果您的 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();

这里有一些 background information 来自官方 github 存储库的关于这个问题的内容。

无法清除 Gatsby 静态站点缓存

Can't clear Gatsby static site cache

javascript

dom

reactjs

service-worker

gatsby