我如何在create-react-app的开发模式下启用service worker？

Question

我知道我们可以在生产模式下测试我们的Service Worker，但是重新构建和部署的过程相当麻烦。有没有一些方法可以在开发模式下启用Service Worker？

- Tạ Sinh Phúc

Answer 1

更改这个

window.addEventListener('load', () => {

      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;


      console.log("file location" + swUrl);
      if (isLocalhost) {
        // This is running on localhost. Let's check if a service worker still exists or not.
        checkValidServiceWorker(swUrl, config);

        // Add some additional logging to localhost, pointing developers to the
        // service worker/PWA documentation.
        navigator.serviceWorker.ready.then(() => {
          console.log(
            'This web app is being served cache-first by a service ' +
              'worker. To learn more, visit'
          );
        });
      } else {
        // Is not localhost. Just register service worker
        registerValidSW(swUrl, config);
      }
    });

使用这个

window.addEventListener('load', () => {

      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

      console.log("file location" + swUrl);

        // Is not localhost. Just register service worker
        registerValidSW(swUrl, config);

    });

在你的 serviceWorker.js 文件中，

还要替换这个。

if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator ) {

使用此代码

if ( 'serviceWorker' in navigator ) {

注意它正在检查生产环境，因此删除该条件将在本地启动服务工作者。

- HimanshuArora9419

---

它可以工作，但是它没有像生产模式一样缓存静态文件。我不认为 service-worker.js 存在于开发模式下。 - Tạ Sinh Phúc

所有这些都将变得棘手，使用默认的服务工作者。建议您编写自己的服务工作者，可以是原始的，也可以使用Workbox。 - HimanshuArora9419

我的问题是服务器没有返回 service worker：http://localhost:3000/service-worker.js，反而返回了 index.html。 - karianpour