Блог

У меня есть приложение React, созданное с помощью create-react-app. По умолчанию этот инструмент создает serviceWorker.js файл для нас, и я использую это для регистрации работника службы. Кроме того, в документах предлагается использовать мастер Google workbox для создания service-worker.js используется для управления моим веб-сайтом в автономных целях. Цель для меня — сохранить offline.html страница в кэше браузера и всякий раз, когда нет подключения к Интернету, отобразите кэшированную offline.html страница.

Мне удалось сохранить offline.html в кэше, и, как вы можете видеть ниже, оно хранится в предварительно кэшированных URL-адресах (проверьте последние две строки).

Я также могу вручную перейти к offline.html , если изменю URL в своем браузере.

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

В serviceWorker.js в коде, который сгенерирован для меня из CRA, есть функция, вызываемая checkValidServiceWorker :

 function checkValidServiceWorker(swUrl, config) {
  // Check if the service worker can be found. If it can't reload the page.
  fetch(swUrl)
    .then(response => {
      // Ensure service worker exists, and that we really are getting a JS file.
      const contentType = response.headers.get('content-type');
      if (
        response.status === 404 ||
        (contentType != null amp;amp; contentType.indexOf('javascript') === -1)
      ) {
        // No service worker found. Probably a different app. Reload the page.
        navigator.serviceWorker.ready.then(registration => {
          registration.unregister().then(() => {
            window.location.reload();
          });
        });
      } else {
        // Service worker found. Proceed as normal.
        registerValidSW(swUrl, config);
      }
    })
    .catch(() => {
      console.log(
        'No internet connection found. App is running in offline mode.'
      );
      const OFFLINE_URL = '/.offline/offline.html';
      return caches.match(OFFLINE_URL).then((response) => {
        console.log(response)
      });
    });
}
  

Итак, в catch части функции я хочу выполнить свое перенаправление, потому что это логика, которая выполняется, когда мы находимся в автономном режиме. Я прочитал много документов, и мое текущее решение не работает. Есть идеи о том, как перенаправить в моем ServiceWorker?