javascript - 无法清除 Gatsby 静态站点缓存

Question

我有一个使用 gatsbyJS(静态网站的 React 框架)的网站

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

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

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

1. GatsbyJS 针对 offline access 进行了优化使用 service workers。
2. 要使 service workers 失效，我需要在添加一些脚本后再次为 GatsbyJS 静态站点提供服务，这样当有人访问该站点时，service workers 就会失效。
3. 否则我无法控制服务人员。

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

以上问题有什么解决方案吗？

Answer 1

您可以尝试将脚本添加到新站点以删除所有服务 worker (如果有的话):

<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! 🎉