Rendre le travail browserHistory de réagir-routeur avec AppCache sans enregistrer tous les chemins séparément

Question

TL; DR: Ce que je suis en train de comprendre comment configurer mon AppCache manifeste afin que seulement stocke l'URL racine, plus tout explicitement mentionné les fichiers statiques, et utilise ce site web comme une solution de repli pour toute autre URL, afin que je puisse le faire fonctionner avec ma méthode de routage basée sur SPA JS.

J'ai un SPA qui utilise react-router and browserHistory pour créer des URL propres comme s'il s'agissait de sites Web distincts. La capture pour faire ce travail est que lorsque nous touchons rafraîchir, le serveur web doit servir le même site Web (et ensuite utiliser JavaScript pour lire l'url et faire des choses). Ok, c'est assez facile.

Maintenant j'essaye de faire fonctionner le SPA hors ligne avec AppCache (parce que je dois supporter Safari). L'application fonctionne un peu comme Google Maps vous permet de partager des lieux avec l'URL: elle permet aux utilisateurs de partager des vues dans des ensembles de données avec des paramètres d'affichage spécifiques via un simple lien: /dataset/<dataset name>/<parameters>. Donc, je veux essentiellement qu'il fonctionne hors ligne à partir de l'URL principale, mais aussi de tout chemin possible comme celui-ci.

Après beaucoup d'essais et d'erreurs (et Firefox's tools to debug the manifest) je me suis ceci:

CACHE MANIFEST 
# dfb55f7a1c2f0ab09a93 

/static/js/bundle.dfb55f7a1c2f0ab09a93.js 

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

NETWORK: 
* 

FALLBACK: 
/dataset/ /index.html 

Cela me permet de rafraîchir et URL de l'ensemble de données de vue lorsque hors line¹ comme vous le souhaitez! Mais maintenant, les navigateurs ne font pas que mettre en cache la racine /, mais aussi /dataset/<foo>/<bar>. Et si mes utilisateurs commencent à passer des URL, ils vont commencer à mettre en cache chacun d'eux. Ce n'est pas ce que je veux non plus, parce que c'est un gaspillage de ressources, et crée plus de complications lors de la mise à jour de l'application.

Alors, où je suis coincé comment configurer mon AppCache manifeste afin que seulement stocke l'URL racine, ainsi que toute mention explicite des fichiers statiques, tout en me permettant d'utiliser ledit site racine en tant que solution de repli pour toute autre URL afin que je peux frapper rafraîchir hors ligne.

¹ Eh bien, en supposant que l'ensemble de données a été visité en cache auparavant; pour cela, nous utilisons la bibliothèque localForage. Tout cela fonctionne bien ne chevauche pas avec AppCache autant que je peux voir.

Answer 1

Ok, la solution a expliqué à cette page Web a fonctionné pour moi:

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

La chose principale qui était différente dans l'explication ici était la suivante:

FALLBACK: 
. offline.html 

Plus précisément, chaque l'autre site (et qui comprend the page on the normally-excellent MDN) utiliserait ceci comme exemple:

FALLBACK: 
/offline.html 

Ceci invalide le manifeste (comme peut être testé dans Firefox avec MAJ + F2, appcache validate). Comme expliqué dans le texte partie de la page MDN:

REPLI: La REPLI: section spécifie les pages du navigateur de secours doit utiliser si une ressource est inaccessible.Chaque entrée dans cette section répertorie deux URI: la première est la ressource, la seconde est la solution de repli. Les deux URI doivent être relatifs et avoir la même origine que le fichier manifeste . Les caractères génériques peuvent être utilisés.

Chrome s'en fout, mais Firefox le fait.