从添加到主屏幕打开时，React JS PWA 应用程序在没有互联网的情况下无法打开

Question

我对 React JS 和 PWA 还很陌生。最近我用 React 和 PWA 功能制作了一个应用程序。这些页面已通过 Service Worker 在本地缓存。但问题是应用程序在没有互联网的情况下无法打开。如果我尝试在没有互联网的情况下从我的手机打开应用程序，它会显示一个空白的白页。但是如果我第一次使用互联网加载应用程序然后关闭互联网，那时我可以在没有互联网的情况下导航到每个页面。因此，问题在于初始负载。我需要互联网进行初始加载。我见过一些 PWA 应用程序在初始加载时根本不需要互联网，例如：http://hoppscotch.io/。我该如何解决这个问题？

我的代码：

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");
  });
};

Answer 1

好的，所以我找到了问题所在。事实证明，在构建 React 应用程序后，它为 js 和 CSS 生成了两个新包，我还需要将它们添加到缓存列表中。我发布答案以防万一其他人也遇到像我一样的问题。

还有一件事，我按照这些步骤找到了那些丢失的捆绑文件。

在线部署react app（我用的是Netlify）
首先通过互联网连接加载应用程序，然后让 Service Worker 注册。
关闭互联网并重新加载页面。
在开发工具下的控制台选项卡中查找错误。
从那里找到丢失的包并将它们添加到 cachelist。

将文件添加到缓存的另一种方法：

这是更新后的缓存列表。

在本地构建您的项目。
转到 build>static 并查找 CSS 和 js 文件夹。
将每个生成的js和CSS添加到缓存列表。

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

...
];

从添加到主屏幕打开时，React JS PWA 应用程序在没有互联网的情况下无法打开

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

javascript

offline-mode

reactjs

progressive-web-apps