title: ServiceWorker MIME Type Error ('text/html') on register (React)
body: <h3>The current behavior:</h3>
  
  <p>Service worker does not register due to the below error</p>
  
  <h3>The expected behavior:</h3>
  
  <p>Service worker registers</p>
  
  <hr>
  
  <h3>Details</h3>
  
  <p>Posted as a github issue:
  <a href="https://github.com/facebook/create-react-app/issues/8593" rel="noreferrer">https://github.com/facebook/create-react-app/issues/8593</a></p>
  
  <p>Service worker is giving the following error when attempting to register:  </p>
  
  <blockquote>
    <p>Error during service worker registration:<br>
    DOMException: Failed to register a ServiceWorker for scope ('<a href="http://localhost:3000/" rel="noreferrer">http://localhost:3000/</a>') with script ('<a href="http://localhost:3000/sw.js" rel="noreferrer">http://localhost:3000/sw.js</a>'):<br>
    The script has an unsupported MIME type ('text/html').
    console. @ index.js:1</p>
  </blockquote>
  
  <p><code>sw.js</code> is showing in the sources tab of the Chrome dev tools, but not registering.</p>
  
  <p>React version: 16.12.0</p>
  
  <p>Error Message:</p>
  
  <blockquote>
    <p>Error during service worker registration: DOMException:<br>
    Failed to register a ServiceWorker for scope ('<a href="http://localhost:3000/" rel="noreferrer">http://localhost:3000/</a>') with script ('<a href="http://localhost:3000/sw.js" rel="noreferrer">http://localhost:3000/sw.js</a>'):<br>
    The script has an unsupported MIME type ('text/html').</p>
  </blockquote>
  
  <p>Failed ServiceWorker in Chrome's Inspect Tab:
  <a href="https://i.stack.imgur.com/Nz0pN.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Nz0pN.png" alt="Chrome Error"></a></p>
  
  <hr>
  
  <h3>Steps To Reproduce:</h3>
  
  <p>Register a Service Worker in React (change from unregister to register, or place SW code directly in index.html, or use a simpler SW. All cause the same error when running, in either dev or a build react app.)  </p>
  
  <p>SW Example:</p>
  
  <pre><code>export function register() {
    if ("serviceWorker" in navigator) {
      navigator.serviceWorker
        .register("./sw.js")
        .then(function(registration) {
          // Successful registration
          console.log(
            "Hooray. Registration successful, scope is:",
            registration.scope
          );
        })
        .catch(function(error) {
          // Failed registration, service worker won’t be installed
          console.log(
            "Whoops. Service worker registration failed, error:",
            error
          );
        });
    }
  }
  </code></pre>
  
  <hr>
  
  <h3>Also, `<a href="http://localhost:3000/sw.js" rel="noreferrer">http://localhost:3000/sw.js</a> when using the default SW from React returns this HTML:</h3>
  
  <p><a href="https://i.stack.imgur.com/JLRBi.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/JLRBi.jpg" alt="enter image description here"></a></p>
  
  <h3>Using the code sample above returns index.html (default 404, <a href="http://localhost:3000/" rel="noreferrer">http://localhost:3000/</a>) when trying to access <a href="http://localhost:3000/sw.js" rel="noreferrer">http://localhost:3000/sw.js</a></h3>
  
  <hr>
  
  <h3>Suggested fixes:</h3>
  
  <p>Move <code>sw.js</code> to public folder, gives this error:
  <a href="https://i.stack.imgur.com/bbnmM.png" rel="noreferrer"><img src="https://i.stack.imgur.com/bbnmM.png" alt="Public folder error"></a></p>
  
  <hr>
  
  <p>Is there a way to change the header (from <code>text/html</code> to <code>application/javascript</code>) for specifically <code>sw.js</code> when served to the browser in React?</p>
  
  <p>I tried following some Medium articles on registering custom serviceWorkers in React, to no avail...</p>