React JS PWA app not opening without internet when opening from add to home screen

I am pretty new to React JS and PWA. Recently I have made an app with React with PWA functionality. The pages have been cached locally with the service worker. But the problem is the app does not open without the internet. If I try to open the app without internet from my mobile, it shows a blank white page. But if I load the app the first time with the internet then turn the internet off, at that time I can navigate to every page without the internet. So, the issue is for the initial load. I need internet for the initial load. I have seen some PWA apps that does not require internet at all for the initial load for example: http://hoppscotch.io/. How can I solve this problem?

My Code:

Manifest.json

{
  "short_name": "Al Quran",
  "name": "Full Quran with Audio",
  "icons": [
    {
      "src": "windows11/SmallTile.scale-100.png",
      "sizes": "71x71",
      "type": "image/png",
      "purpose": "any"
    },
  ...
   
  ],
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#9345F2",
  "background_color": "#9345F2"
}

ServiceWorker.js

let catchName = "Cache-Control";
let catchValue = "no-cache";
let cacheName = "quran-cache-v1";
let cacheList = [
  // "https://cdn.jsdelivr.net/gh/nhridoy/quran-api@main/v1/singleSurah.min.json",
  // Extarnal CSS Files and JS and Images
  "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;800&display=swap",
  "https://fonts.gstatic.com/s/poppins/v19/pxiEyp8kv8JHgFVrJJfecg.woff2",
  "https://fonts.gstatic.com/s/poppins/v19/pxiByp8kv8JHgFVrLEj6Z1xlFQ.woff2",
  "https://fonts.gstatic.com/s/poppins/v19/pxiByp8kv8JHgFVrLDD4Z1xlFQ.woff2",
  "https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js",
  "https://unpkg.com/@lottiefiles/lottie-player@1.5.6/dist/lottie-player.js",
  "https://assets9.lottiefiles.com/packages/lf20_5mpwodai.json",
  "https://img.icons8.com/external-color-outline-adri-ansyah/16/000000/external-islam-islam-and-ramadhan-color-outline-adri-ansyah-8.png",
  "https://img.icons8.com/external-color-outline-adri-ansyah/16/000000/external-islam-islam-and-ramadhan-color-outline-adri-ansyah-13.png",

  // Local React Files
  "/",
  "/surah",
  "/para",
  "/index.html",
  "/static/css/main.92447845.css",
  "/static/js/main.f8ea3893.js",
  "/static/js/bundle.js",
  "/static/media/logo.e4a082d466ccc7346f5b.png",
  "/manifest.json",
  "/favicon.ico",
  "/logo192.png",
  "/logo512.png",

  // "/index.js",
  // "/index.css",
  // "/logo.png",
  // "/serviceWorker.js",
  // "/src/index.js",
  // "/src/index.css",
  // "/src/App.js",
  // "/src/components/pages/Surah/Player.js",
  // "/src/components/pages/Surah/Player.css",
];

for (let index = 1; index <= 114; index++) {
  cacheList.push(`/surah/${index}`);
}
for (let index = 1; index <= 30; index++) {
  cacheList.push(`/para/${index}`);
}

self.addEventListener("install", (event) => {
  event.waitUntil(
    caches.open(cacheName).then((cache) => {
      return cache.addAll(cacheList);
    })
  );
});

self.addEventListener("fetch", (event) => {
  if (!navigator.onLine) {
    event.respondWith(
      caches.match(event.request).then((response) => {
        return response || fetch(event.request.clone());
      })
    );
  }
});

ServiceWorkerDev.js

export const serviceWorkerDev = () => {
  let serviceWorkerUrl = `${process.env.PUBLIC_URL}/serviceWorker.js`;
  navigator.serviceWorker.register(serviceWorkerUrl).then((registration) => {
    console.log("Service Worker Registered");
  });
};

Ok, So I have found the problem. Turns out after building the react app it is generating two new bundles for js and CSS, I need to add those on the cache list also. I am posting the answer just in case anyone else faces the same problem like me too.

Oh and one more thing, I found those missing bundles files following these steps.

1. Deploy the react app online (I used Netlify)
2. Load the app with internet connection first, and let the service worker register.
3. Turn off the internet and reload the page again.
4. Look for the errors in the console tab under dev tools.
5. Found the missing bundles from there and added them to the cachelist.

Another Way to add files to cache:

Here is the updated cache list.

1. Build your project locally.
2. Go to build>static and look for CSS and js folder.
3. Add every generated js and CSS to the cache list.

let cacheList = [
  ...
  "https://img.icons8.com/external-color-outline-adri-ansyah/16/000000/external-islam-islam-and-ramadhan-color-outline-adri-ansyah-13.png",

  // Local React Files
  "/",
  "/surah",
  "/para",

  "/static/js/main.bd80fb27.js", //<--- New Bundle Added
  "/static/css/main.7dc91d28.css", //<--- New Bundle Added

...
];