需要刷新之前访问过的 Gatsby 站点才能查看更改

Question

我在 Netlify 上托管了一个 Gatsby 网站。当我部署一个新版本时，我对站点所做的更改在我刷新页面之前是不可见的。有谁知道为什么会这样？

我正在使用gatsby-plugin-offline 和gatsby-plugin-manifest。我看到我可以安装gatsby-plugin-remove-serviceworker 插件来删除服务工作者，但如果可能的话我想继续使用它。

这是一个很难搜索的问题，因为我得到了有关本地目录中 .cache 文件夹的结果

Answer 1

问题：您的 service worker 仍然显示旧页面

在 Gatsby 中，Service Worker 被编程为在导航时进行更新。通过使用gatsby-plugin-offline 插件，Service Worker 会自动加入您的站点。

问题在于，当用户访问主页并且没有进一步导航时，将看不到任何更新。如果您希望页面在第一次访问时自动刷新并使旧缓存失效，则需要触发它。

解决办法：

您可以使用官方Gatsby Browser API 来触发对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();

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