Mise hors connexion d'une page entière à l'aide de l'API FileSystem HTML5

Avouez-le, AppCache est ennuyeux et pose des problèmes [1, 2, 3]. L'une des principales limites est qu'il est impossible de mettre en cache dynamiquement des éléments à la demande. En d'autres termes, il n'est pas possible de rendre une application hors connexion partiellement. Tout le contenu du fichier manifeste est mis en cache au préalable, ou rien n'est mis en cache.

L'API FileSystem HTML5 devient une solution attrayante pour pallier les lacunes d'AppCache. Vous pouvez stocker des fichiers et des hiérarchies de dossiers de manière programmatique dans le système de fichiers local (bac à sable), puis ajouter/mettre à jour/supprimer des ressources individuelles si nécessaire. Mon collègue Boris Smus a même écrit une bibliothèque intéressante pour gérer ce type de mise en cache hors connexion dans le contexte des jeux. La même idée peut être extrapolée pour fonctionner avec n'importe quel type d'application Web.

crbug.com/89271 est un correctif important pour l'API FileSystem, qui permet aux chemins relatifs filesystem: URL de fonctionner à merveille.

Supposons que j'ai enregistré index.html dans le dossier racine du système de fichiers (fs.root), créé un dossier img et enregistré "test.png" dedans. L'URL filesystem: de ces deux fichiers sera respectivement filesystem:http://example.com/temporary/index.html et filesystem:http://example.com/temporary/img/test.png. Ensuite, si je voulais utiliser "test.png" pour un img.src, je devais utiliser son chemin absolu complet: <img src="filesystem:http://example.com/temporary/img/test.png">. Cela a nécessité de réécrire toutes les URL relatives dans index.html pour qu'elles pointent vers l'URL filesystem: du fichier correspondant. Pas cool ! Avec ce correctif, je peux conserver le chemin d'accès relatif au fichier (<img src="img/test.png">), car il sera correctement résolu en tant qu'origine de système de fichiers.

Cette fonctionnalité permet de télécharger facilement une page et d'enregistrer toutes ses ressources hors connexion, tout en conservant la même structure de dossiers que la version en ligne.