Заставьте историю браузера activ-маршрутизатора работать с Appcache, не сохраняя каждый путь отдельно

Question

TL;DR: я пытаюсь выяснить, как настроить мой манифест AppCache таким образом, чтобы он сохранял только корневой URL-адрес плюс любые явно упомянутые статические файлы и использовал указанный корневой веб-сайт в качестве запасного для любого другого URL-адреса, чтобы я мог может заставить его работать с моим методом маршрутизации на основе JS SPA.

У меня есть SPA, который использует react-router и browserHistory для создания чистых URL-адресов, как если бы они были отдельными сайтами.

Уловка для того, чтобы сделать эту работу, заключается в том, что когда мы нажимаем обновить, веб-сервер должен обслуживать index.html веб-сайт (а затем использовать JavaScript, чтобы прочитать URL-адрес и делать вещи). Хорошо, это достаточно просто.

Сейчас я пытаюсь заставить SPA работать в автономном режиме с AppCache (потому что я должен поддерживать Safari). Приложение работает примерно так, как Google Maps позволяет вам обмениваться местоположениями с URL: оно позволяет пользователям обмениваться представлениями в наборах данных с определенными настройками просмотра по простой ссылке: /dataset/<dataset name>/<parameters>, Поэтому я в основном хочу, чтобы он работал в автономном режиме как с основного URL-адреса, так и с любого возможного пути, подобного этому.

После многих проб и ошибок (и инструментов Firefox для отладки манифеста) я получил это:

CACHE MANIFEST
# dfb55f7a1c2f0ab09a93

/static/js/bundle.dfb55f7a1c2f0ab09a93.js

CACHE:
/
static/css/bundle.min.css

NETWORK:
*

FALLBACK:
/dataset/ /index.html

Это позволяет мне обновлять и просматривать URL набора данных в автономном режиме off по желанию! Но теперь браузеры не просто кешируют корень /но и любой /dataset/<foo>/<bar>, И если мои пользователи начнут передавать URL-адреса, они начнут кэшировать каждый из них. Это тоже не то, чего я хочу, потому что это пустая трата ресурсов и создает дополнительные сложности при обновлении приложения.

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

¹ Хорошо, если предположить, что набор данных ранее был в кэше; для этого мы используем библиотеку localForage. Это все работает нормально, не перекрывается с AppCache, насколько я вижу.

Answer 1

Хорошо, решение, объясненное на этой веб-странице, сработало для меня:

http://dev.topheman.com/automate-appcache-offline-support-in-your-webpack-build/

Ключевым моментом в объяснении здесь было другое:

FALLBACK:
. offline.html

В частности, любой другой сайт (включая страницу с обычно превосходным MDN) будет использовать это в качестве своего примера:

FALLBACK:
/ offline.html

Это делает недействительным манифест (как можно проверить в Firefox с помощью SHIFT + F2, appcache validate). Как объяснено в текстовой части страницы MDN:

FALLBACK: раздел FALLBACK: определяет резервные страницы, которые браузер должен использовать, если ресурс недоступен. В каждой записи в этом разделе перечислены два URI: первый - это ресурс, а второй - запасной вариант. Оба URI должны быть относительными и иметь то же происхождение, что и файл манифеста. Подстановочные знаки могут быть использованы.

Chrome не волнует, но Firefox делает.