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

Question

[hzzzzl]

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

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

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

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

Кто делал что-то такое? Как и через что можно "заставить" браузер из сервис воркера редиректить всё непонятное на /index.html?

Answer 1

[Aves]

this.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response =>
      response || fetch(event.request)
    ).catch(() =>
      caches.match('/')
    )
  );
});

Comments

[hzzzzl]

ДА, но нет - хром понимает что роут подменен, и отказывается его загружать (в мозилле и эдже причем работает)
вчера пробовал решения типа этого, но так и не завелось
https://stackoverflow.com/a/45440505



в общем худо-бедно настроил через регекспы и workbox, благо роутов не особо много, буду потом продолжать разбираться...
https://developers.google.com/web/tools/workbox/gu...

[Aves]

hzzzzl, в workbox для этого есть navigateFallback в GenerateSW вроде бы