Access service-worker.js In Development

1

I have replaced .unregister() with .register() in index.tsx of my CRA with Typescript project.

Here is the register() code:

export function register(config?: Config) {
  if (process.env.NODE_ENV === 'development' && 'serviceWorker' in navigator) {
    const publicUrl = new URL(
      process.env.PUBLIC_URL,
      window.location.href
    );
    if (publicUrl.origin !== window.location.origin) {
      return;
    }
    window.addEventListener('install', () => console.log("Yup, installed"))
    window.addEventListener('load', () => {
      console.log("On load")
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

      if (isLocalhost) {
        registerValidSW(swUrl, config);
       // checkValidServiceWorker(swUrl, config);

but this code fails to register the service worker because there is no such file as service-woker.js in the public folder. I have tried:

const swUrl = `${process.env.PUBLIC_URL}/serviceWorker.js`;

const swUrl = `service-worker.js`;

const swUrl = `./service-worker.js`;

const swUrl = `serviceWorker.js`;

const swUrl = `./serviceWorker.js`;

most, if not all permutations and still could not resolve the transpiled version of serviceWorker.ts

Questions

  1. How can I resolve the file service-worker.js or what can I replace it with to be resolved.
  2. When I build the project, the service-worker.js file in the build folder looks nothing like the serviceWorker.ts , which I would presume it is derived from. All the code in serviceWorker.ts is none-existent in service-worker.js . Why?