Gatsby 网站需要刷新才能查看新数据答案

【问题标题】：Gatsby Site Requires Refresh to View New DataGatsby 网站需要刷新才能查看新数据
【发布时间】：2022-01-04 11:37:40
【问题描述】：

我在 Gatsby 上运行了一个博客，每次我推送和部署新的博客文章时，我都需要刷新我的页面以查看新数据。

我尝试按照this post 的建议并添加一个 onServiceWorkerUpdate 函数，但似乎没有做任何事情。

任何人都有解决此问题的方法，如果有，是否有办法在本地进行测试？当我在 gatsby 开发模式下测试时，更改已经自动更新。

这是我的 gatsby-browser.js 文件的全部内容

export const onServiceWorkerUpdateReady = () => window.location.reload();

【问题讨论】：

标签： javascript node.js gatsby service-worker

【解决方案1】：

您需要先安装gatsby-plugin-offline。留下您的 gatsby-config.js 类似于：

{
  plugins: [
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        ...
      }
    },
    'gatsby-plugin-offline'
  ]
}

注意：在这种情况下，插件的顺序很重要。

插件将注册一个服务工作者并将其加载到客户端。

然后，在您的 gatsby-browser.js 文件中，您可以简单地添加：

export const onServiceWorkerUpdateReady = () => {
  const answer = window.confirm(
    `This application has been updated. ` +
      `Reload to display the latest version?`
  )

  if (answer === true)  window.location.reload()
}

此外，您可能需要添加以下 hack（在存储库中很常见）：

export const onRouteUpdate = () => {
  navigator.serviceWorker.register('/sw.js').then((reg) => {
    reg.update();
  });
};

基本上，它会在 onServiceWorkerUpdateReady 刷新时强制整个站点的 service-worker 注册。

查看这个有趣的帖子，了解针对某些特定场景的进一步注意事项和解决方法：https://github.com/gatsbyjs/gatsby/issues/9087#issuecomment-774680408

【讨论】：

知道了，谢谢，我下班后试试看！

【解决方案2】：

使用 gatsby 提供的链接无效

import { Link as GatsbyLink } from 'gatsby';

<GatsbyLink to={to} {...props} />

它使用传统的a标签工作：

<a href={props.to} target="_blank">
   {props.children}
</a>

【讨论】：