Почему при кешировании файлов при PWA, при оффлайне, сайт падает?

Question

[takoyklasnii]

Имею бекенд на LARAVEL (api) и front-end на React. Стоит задача построить PWA.
Есть подключение к service-worker.js в app.js:

if ("serviceWorker" in navigator) {
  console.log("В условии");
  window.addEventListener("load", () => {
    navigator.serviceWorker.register("/service-worker.js").then(
      reg => {
        console.log("worked!");
      },
      err => {
        console.log("Error", err);
      }
    );
  });
} else {
  console.log("service worker is not supported");
}

Есть сам service-worker.js:

let CACHE_NAME = "-cache";

let cachedUrl = [
  "/js/app.js",
  "/css/app.css",
  "/css/styles.css",
];

self.addEventListener("install", event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => {
      console.log("Кеш открыт, install событие! Пробуем кешировать!");
      return cache.addAll(cachedUrl);
    })
  );
});

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

      return fetch(event.request);
    })
  );
});

self.addEventListener("activate", event => {
  let cacheWhitelist = [CACHE_NAME];
  event.waitUntil(
    caches.keys().then(cacheNames => {
      return Promise.all(
        cacheNames.map(cacheName => {
          if (cacheWhitelist.indexOf(cacheName)) {

            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

Почему если я отрубаю интернет, приложение падает? Или нужно подключить offline страницы, которые будут работать в офф ?

Comments

[Alex Step]

"Падает" это как ? Сайт не открывается как при выключенном интернете - потому что сам index.html не кэшируется скорее всего в массиве cachedUrl его нет

Если index html открывается но что-то не рендерится - значит какие-то еще ресурсы нужные для работы отсутствуют в кэше

Answer 1

[Артур]

Вы же добавили в кэш только js, css. Нужно добавить и сами страницы