Question

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

现在，我已将网站移至CMS（WordPress），但是由于我们最初在同一域上使用了gatsbyJS，因此它显示了gatsby构建的旧缓存文件。

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

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

GatsbyJS已使用service workers为offline access进行了优化。
要使服务人员无效，我需要在添加一些脚本后再次为GatsbyJS静态站点提供服务器，以便当有人访问该站点时，服务人员将无效。
否则我无法控制服务人员。

我无法返回初始站点，因为该站点已经发布，人们正在关注它，但是仍有许多其他人仍在查看损坏的盖茨比站点。

上述问题有解决方案吗？

Answer 1

您可以尝试将脚本添加到新站点，以删除所有服务工作程序（如果有）：

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

如果这还不够，请查看self-destroying-sw：

删除与以前的ServiceWorker有关的所有信息（注册/卸载代码，ServiceWorker文件）



创建一个与先前ServiceWorker相同名称的文件，并将其放在先前ServiceWorker所在的位置
将以下代码放入文件中：
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))
    });
});
部署您的项目！

Answer 2

如果您仍在使用Gatsby，则可以使用官方的Gatsby Browser API来触发对服务人员的更新。

在盖茨比，服务人员被编程为在导航时进行更新。问题在于，当用户访问家并且不进行任何进一步导航时，将看不到任何更新。如果希望页面在第一次访问时自动刷新并使旧的缓存无效，则需要触发它。

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

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

在官方github信息库中有一些background information。

无法清除Gatsby静态站点缓存

2 个答案: