How to build progressive web applications (PWA) with React

{
    "name": "Progressive Web Application",
    "short_name": "PWA",
    "description": "Use web application with the ease of native application. There is absolutely no need to install any software or packages.",
    "start_url": "/",
    "icons": [
        {
            "src": "icon-512.png",
            "sizes": "512x512"
        }
    ],
    "theme_color": "#eeffee",
    "background_color": "#eeffee",
    "display": "standalone"
}

const VERSION = "v1";
const CACHE_NAME = `PWA-learner-${VERSION}`;
// Resources cached for offline access
const APP_STATIC_RESOURCES = [
  './index.html',
  './styles/css',
  'icon-512.png'
];
// Installation Listener
self.addEventListener("install", (e) => {
  e.waitUntil((async () => {
      const cache = await caches.open("cacheName_identifier");
      cache.addAll([
        APP_STATIC_RESOURCES
      ]);
    })()
  );
});
// delete old caches on activate
self.addEventListener("activate", (event) => {
  event.waitUntil(
    (async () => {
      const names = await caches.keys();
      await Promise.all(
        names.map((name) => {
          if (name !== CACHE_NAME) {
            return caches.delete(name);
          }
        })
      );
      await clients.claim();
    })()
  );
});
// On fetch, intercept server requests
// and respond with cached responses instead of going to network
self.addEventListener("fetch", (event) => {
  // As a single page app, direct app to always go to cached home page.
  if (event.request.mode === "navigate") {
    event.respondWith(caches.match("/"));
    return;
  }
  // For all other requests, go to the cache first, and then the network.
  event.respondWith(
    (async () => {
      const cache = await caches.open(CACHE_NAME);
      const cachedResponse = await cache.match(event.request.url);
      if (cachedResponse) {
        // Return the cached response if it's available.
        return cachedResponse;
      } else {
        // If resource isn't in the cache, return a 404.
        return new Response(null, { status: 404 });
      }
    })()
  );
});

<!-- Manifest file  -->
<link rel="manifest" href="manifest.json" />
<!-- Resgister Service Worker (service_worker.js filename) -->
<script>
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker.register("service_worker.js").then(
      (registration) => {
        console.log("Service worker registration successful:", registration);
      },
      (error) => {
        console.error(`Service worker registration failed: ${error}`);
      },
    );
  } else {
    console.error("Service workers are not supported.");
  }
</script>

npx create-react-app my-pwa-app --template cra-template-pwa

npx create-react-app my-pwa-ts-app --template cra-template-pwa-typescript

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorkerRegistration.register();