Задать вопрос
hzzzzl
@hzzzzl
react

PWA | React Router оффлайн?

Есть PWA апп на реакте, собранный через create-react-app

Настроено кеширование через простенький service worker, всё работает, если переходишь из онлайн в оффлайн, не обновляя апп (f5 refresh), то появляется заглушка через которую кое-что из функционала можно сделать (сохранить запросы записи в БД, итп)

Можно даже в оффлайне обновить стартовую страницу https://my-app.com/, и попасть на index.html с это заглушкой, всё круто

НО! Если обновить браузер оффлайн по любому из роутов https://my-app.com/route, то браузер будет пытаться делать запрос по этому роуту, потому что он не знает что мы делаем роутинг в реакте, и тогда уже будет 404 с динозавриком от хрома и надписью No internet

Кто делал что-то такое? Как и через что можно "заставить" браузер из сервис воркера редиректить всё непонятное на /index.html?
  • Вопрос задан
  • 369 просмотров
Комментировать
Подписаться 2 Средний Комментировать
Решения вопроса 1
@Aves 
this.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response =>
      response || fetch(event.request)
    ).catch(() =>
      caches.match('/')
    )
  );
});
Ответ написан
2 комментария
2 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
React разработчик
Uptrade
от 150 000 до 200 000 ₽
JS|React Native разработчик
Венста • Киров
от 60 000 до 120 000 ₽
Senior React Developer
DARS • Москва
от 200 000 до 300 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Сделать тг бота для сбора 4 данных в эксель + проверка на подписку
26 апр. 2024, в 19:17
1000 руб./за проект
Написать видео сцену на unity с картой
26 апр. 2024, в 19:12
5000 руб./за проект
Написать программу на c# используя видео и карту
26 апр. 2024, в 19:10
5000 руб./за проект
Ещё заказы