title: ServiceWorker in React and Typescript
body: <p>When creating javascript-based React projects, installing a Service Worker is just a matter of changing <code>serviceWorker.unregister()</code> to <code>serviceWorker.register()</code> on index.jsx.</p>
  <p>With such project structure:</p>
  <pre><code>- src
     |- index.jsx
     |- serviceWorker.js
  </code></pre>
  <p>When this code gets built, the <code>/build</code> folder will look as followed:</p>
  <pre><code>- build
     |- static
     |   |- css
     |   |- js
     |   |- media
     |
     |- index.html
     |- service-worker.js
  </code></pre>
  <p>This will work fine and will result in the Service Worker being registered properly.</p>
  <hr />
  <p>On the other hand, when setting up a project in Typescript, given the same project structure (where the <code>js</code> / <code>jsx</code> files are <code>ts</code> / <code>tsx</code> instead), the <code>/build</code> will look something similar:</p>
  <pre><code>- build
     |- static
     |   |- js
     |       |- bundled-js.chunk.js
     |       |- bundled-js2.chunk.js
     |       |- ..
     |
     |- index.html
  </code></pre>
  <p>So it seems Typescript builds the <code>serviceWorker</code> bundling it with all the other js files.</p>
  <p>This will then result in the Service Worker not being registered, with the following error in console:</p>
  <pre><code>Error during service worker registration: DOMException: Failed to register a ServiceWorker for scope ('https://example.com/') with script ('https://example.com/service-worker.js'): The script has an unsupported MIME type ('text/html').
  </code></pre>
  <p>The live site with the error can be seen <a href="https://alessiopetrin.com" rel="nofollow noreferrer">here</a>; The open source code can be found <a href="https://github.com/ale917k/portfoliov4/tree/master/client" rel="nofollow noreferrer">here</a>.</p>
  <p>Any idea of what I may be doing wrong?</p>
  <p>Any tip is greatly appreciated, thank you in advance!</p>