Приложение React JS PWA не открывается без Интернета при открытии с добавления на главный экран

Я новичок в React JS и PWA. Недавно я сделал приложение на React с функциональностью PWA. Страницы были локально кэшированы сервис-воркером. Но проблема в том, что приложение не открывается без интернета. Если я попытаюсь открыть приложение без интернета со своего мобильного телефона, оно покажет пустую белую страницу. Но если я загружаю приложение в первый раз через Интернет, а затем отключаю Интернет, в это время я могу перейти на любую страницу без Интернета. Итак, проблема в начальной загрузке. Мне нужен интернет для первоначальной загрузки. Я видел некоторые приложения PWA, которые вообще не требуют интернета для начальной загрузки, например: http://hoppscotch.io/. Как я могу решить эту проблему?

Мой код:

Манифест.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/[email protected]/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.info("Service Worker Registered");
  });
};