Gatsby 中的服务工作者 (react.js)

Question

我正在尝试为 gatsby 应用程序设置自定义服务人员。我的应用程序的构建过程大约需要 7 分钟，并且 service worker 仅在生产模式下注册，因此我无法快速开发。例如，添加一个新的console.log 并检查它需要几分钟。 我可以在开发模式下以某种方式测试 Service Worker 吗？

Answer 1

如果你为 Service Worker 使用 Gatsby 的 API，你需要在 gatsby-browser.js 中导出函数 registerServiceWorker。问题是在构建过程中运行gatsby develop而不是在浏览器中输入网站时触发了此功能。这就是为什么它不会在您的浏览器中注册 Service Worker（它需要在哪里工作）。

要解决您在本地工作时遇到的问题，请在每次在浏览器中进入网站时自己调用导出函数registerServiceWorker（onClientEntry in gatsby-browser.js）。

我建议也将它包装在 if 语句中，以便仅在您在本地使用它时调用它。我的 .env 文件中有一个变量 ENABLE_LOCAL_SW = true。

// gatsby-browser.js

export const onClientEntry = () => {
  if (process.env.ENABLE_LOCAL_SW) {
    registerServiceWorker();
  }
};

export const registerServiceWorker = () => {
  if (typeof window !== 'undefined') {
    // Do magic
  }
}