У меня есть приложение React, созданное с помощью create-Reaction-app. По умолчанию этот инструмент создает файл serviceWorker.js для нас, и я использую его для регистрации работника сервиса. Кроме того, в документах предлагается использовать мастер рабочих коробок Google для создания 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 && 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?