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

Question

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

Answer 1

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

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

我建议也将它包装在一个 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
  }
}

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

Service worker in Gatsby (react.js)

reactjs

service-worker

progressive-web-apps

gatsby