Gatsby 站点需要刷新才能查看新数据

Question

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

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

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

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

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

Answer 1

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

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

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

该插件将注册一个 service worker 并将其加载到客户端。

然后，在您的 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

Answer 2

使用 gatsby

提供的 Link 将不起作用

import { Link as GatsbyLink } from 'gatsby';

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

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

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

Gatsby 站点需要刷新才能查看新数据

Gatsby Site Requires Refresh to View New Data

javascript

node.js

gatsby

service-worker