title: how to use service-worker in dev mode
body: <p>I am using <code>create-react-app 4</code> and the <code>cra-template-pwa</code> (<a href="https://github.com/cra-template/pwa" rel="nofollow noreferrer">source</a>)</p>
  <p>By default, it looks like the service-worker is only used in production builds:</p>
  <pre><code>export function register(config) {
      if (process.env.NODE_ENV === 'production' &amp;&amp; 'serviceWorker' in navigator) {
  </code></pre>
  <p><a href="https://github.com/cra-template/pwa/blob/25cb9f06938c671507684a8438c347d3c8bc8b24/packages/cra-template-pwa/template/src/serviceWorkerRegistration.js#L22" rel="nofollow noreferrer">https://github.com/cra-template/pwa/blob/25cb9f06938c671507684a8438c347d3c8bc8b24/packages/cra-template-pwa/template/src/serviceWorkerRegistration.js#L22</a></p>
  <p>That's a problem for me since building the production build takes a long time, hence I would like to register the service-worker while dev builds too.
  In order to get that result I removed the check <code>process.env.NODE_ENV === 'production'</code> and also another <code>isLocalhost</code> check.</p>
  <p><strong>Now, even the debug build is trying to load the <a href="http://www.example.com/service-worker.js" rel="nofollow noreferrer">www.example.com/service-worker.js</a></strong>, just as I hoped.</p>
  <hr />
  <p>The problem now is, this file is inside <code>src</code>. Which makes sense since it is using imports as you can see <a href="https://github.com/cra-template/pwa/blob/master/packages/cra-template-pwa/template/src/service-worker.js" rel="nofollow noreferrer">here</a>. But because of this, the file itself is not accessible from the webbrowser and therefore <code>www.example.com/service-worker.js</code> is for sure unreachable.</p>
  <p>Copying the file into public does not work either</p>
  <blockquote>
  <p>Uncaught SyntaxError: Cannot use import statement outside a module</p>
  </blockquote>
  <p>I fear I haven't really understood which part belongs to JS, which one to NodeJS, which one to reactjs and which one to CRA.</p>
  <p><strong>So my question now is:</strong></p>
  <p>Is there a way to get the &quot;path&quot; of the &quot;translated&quot; <code>service-worker.js</code> (after imports,..)?</p>