Блог

Я кэширую приложение react со всеми статическими файлами и некоторыми api, которые мне нужно кэшировать, и оно работает нормально, и кэширует только те api, которые я хочу, и также обновляет кэш, когда у api появляется новый ответ, но не может отображать маршруты react в автономном режиме, не может извлекать данные из кэша

Вот мой код файла работника службы —

 let CACHE_VERSION = 10; const CURRENT_CACHE = `main-`; const reg = new RegExp("^(http|https)://", "i"); const cacheApi = [  "https://base-api-t3e66zpola-uk.a.run.app/",  "https://followers-table-t3e66zpola-ez.a.run.app/",  "https://show-market-items-t3e66zpola-ue.a.run.app/",  "https://get-doc-t3e66zpola-uc.a.run.app/",  "https://transaction-hist-t3e66zpola-uc.a.run.app/",  "https://show-feed-t3e66zpola-uc.a.run.app/", ];  // these are the routes we are going to cache for offline support const cacheFiles = [  "/",  "/asset-manifest.json",  "/custom-service-worker.js",  "/favicon.png",  "/manifest.json",  "/robots.txt",  "/sitemap.xml",  "/16x16.png",  "/24x24.png",  "/32x32.png",  "/64x64.png",  "/192x192.png",  "/512x512.png",  "/index.html",  "/offline.html",  "/static/js/bundle.js",  "/static/js/vendors~main.chunk.js",  "/static/js/main.chunk.js",  "/static/js/2.e2e81f40.chunk.js",  "/static/js/main.bb7019a6.chunk.js",  "/static/js/runtime-main.72b5b8f8.js",  "/static/css/2.3fd7d989.chunk.css",  "/static/css/main.9bba949c.chunk.css",  "/static/media/blackjack-120.f8d95ade.png",  "/static/media/Blackjack.62ff1f53.png",  "/static/media/logo.9f5189da.png",  "/static/media/logo1.c598593a.png",  "/static/media/Webp.net-gifmaker.b324acdc.gif",  "/static/media/shop_market.3006f50f.png",  "/static/media/Rolling-2.6s-88px (1).66644d42.gif",  "/static/media/profile.924f260d.jpg",  "/static/media/playing cards release.6e562d92.mp3",  "/static/media/playing card slide.fa57aada.mp3",  "/static/media/market place spell.6d67f47e.mp3",  "/static/media/logocoin.1627ed13.png",  "/static/media/level-up.6a14d059.mp3",  "/static/media/DiceLVsmall.2845c8fb.gif",  "/static/media/DiceLV.2845c8fb.gif",  "/static/media/coins.46f4f7a4.mp3",  "/static/media/coins-7.cc47dc25.png",  "/static/media/coins-6.131c2148.png",  "/static/media/coins-5.05539b14.png",  "/static/media/coins-4.df8cdf7c.png",  "/static/media/coins-3.b742e8e0.png",  "/static/media/coins-2.27ef3a8d.png",  "/static/media/coins-1.e7cf49ff.png",  "/static/media/check.e0f75101.png",  "/static/media/Cash play.9f6eaf57.png",  "/static/media/card button.6145e72d.mp3", ];  // on activation we clean up the previously registered service workers this.addEventListener("activate", (evt) =gt;  evt.waitUntil(  caches.keys().then((cacheNames) =gt; {  return Promise.all(  cacheNames.map((cacheName) =gt; {  if (cacheName !== CURRENT_CACHE   CACHE_VERSION) {  return caches.delete(cacheName);  }  })  );  })  ) );  // on install we download the routes we want to cache for offline this.addEventListener("install", (evt) =gt; {  evt.waitUntil(  caches.open(CURRENT_CACHE   CACHE_VERSION).then((cache) =gt; {  return cache.addAll(cacheFiles);  })  ); });  // fetch the resource from the network const fromNetwork = (evt) =gt; {  return fetch(evt.request)  .then(function (response) {  let responseClone = response.clone();  if (cacheApi.find((el) =gt; evt.request.url.search(el) !== -1)) {  console.log("evet =gt;", evt.request.url);  evt.waitUntil(  caches.open(CURRENT_CACHE   CACHE_VERSION).then(function (cache) {  cache.put(evt.request, responseClone);  })  );  }  return response;  })  .catch(function (err) {  console.log("catchin fetch =gt;", err);  return fromCache(evt);  }); };  // fetch the resource from the browser cache const fromCache = (evt) =gt; {  console.log("from cache", evt.request.url);  return caches  .open(CURRENT_CACHE   CACHE_VERSION)  .then((cache) =gt; cache.match(evt.request).then((matching) =gt; matching))  .catch((err) =gt; {  console.log("from cache errr =gt;", err);  return caches.match("/offline.html");  }); };  // general strategy when making a request (eg if online try to fetch it // from the network with a timeout, if something fails serve from cache) this.addEventListener("fetch", function (event) {  if (reg.test(event.request.url)) {  event.respondWith(fromNetwork(event));  } else {  fromCache(event);  } });