如何在 create-react-app 中以开发模式启用 Service Worker？

我知道我们可以在生产模式下测试我们的 Service Worker，但是重新构建和部署的过程非常烦人。有什么方法可以在开发模式下启用服务工作者吗？

改变这个

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 ) {

请注意它对产品的检查，因此删除该条件也会在本地启动服务工作人员