Создать React App ServiceWorker.js перенаправить в автономном режиме - PullRequest
1 голос
/ 11 марта 2019

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

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

Я также могу вручную перейти к 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 && 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 функции я хочу выполнить перенаправление, потому что это логика, которая работает, когда мы не в сети. Я прочитал много документов, и мое текущее решение не работает. Любые идеи о том, как перенаправить в мой сервисWorker?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...