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

Question

我对React JS和PWA很陌生。最近，我制作了一个具有PWA功能的React应用程序。这些页面已与服务工作者一起在本地缓存。但问题是，如果没有互联网，这款应用程序就无法打开。如果我试图在没有互联网的情况下从手机上打开应用程序，它会显示一个空白的白色页面。但如果我第一次用互联网加载应用程序，然后关闭互联网，那时我可以在没有互联网的情况下导航到每个页面。因此，问题在于初始负载。我需要互联网作为初始负载。我看到一些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生成两个新的捆绑包，我还需要将它们添加到缓存列表中。我把答案贴出来，以防其他人也像我一样面临同样的问题。

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

1. 在线部署react应用程序(我使用了Netlify(
2. 首先加载具有互联网连接的应用程序，并让服务人员注册
3. 关闭互联网，然后重新加载页面
4. 在开发工具下的控制台选项卡中查找错误
5. 从那里找到丢失的捆绑包，并将它们添加到cachelist中

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

这是更新后的缓存列表。

1. 在本地构建您的项目
2. 转到内部版本>static，并查找CSS和js文件夹
3. 将每个生成的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
...
];