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

Eric Bidelman

Il faut se rendre à l'évidence : AppCache est ennuyeux et pose des problèmes [1, 2, 3]. L'une des limites majeures est le fait qu'il est impossible de mettre en cache dynamiquement des éléments à la demande. En résumé, tout est possible quand il s'agit de mettre une application hors connexion. Soit tous les éléments du fichier manifeste sont mis en cache à l'avance, soit rien n'est mis en cache.

L'API FileSystem HTML5 constitue une solution intéressante pour les lacunes d'AppCache. Il est possible de stocker des fichiers et des hiérarchies de dossiers par programmation dans le système de fichiers local (bac à sable), puis d'ajouter, de mettre à jour et de supprimer des ressources individuelles si nécessaire. Mon collègue, Boris Smus, a même écrit une bibliothèque sympa 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. Grâce à lui, les chemins d'accès relatifs filesystem: URL fonctionnent comme un charme.

Imaginons, par exemple, 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" dans celui-ci. L'URL filesystem: de ces deux fichiers serait filesystem:http://example.com/temporary/index.html et filesystem:http://example.com/temporary/img/test.png, respectivement. Ensuite, si je souhaite utiliser "test.png" pour un élément img.src, je devais utiliser son chemin absolu complet: <img src="filesystem:http://example.com/temporary/img/test.png">. Cela impliquait de réécrire toutes les URL relatives dans index.html pour qu'elles pointent vers l'URL filesystem: du fichier correspondant. Pas cool ! Grâce à cette correction de bug, je peux conserver le chemin d'accès relatif au fichier (<img src="img/test.png">), car il sera correctement résolu vers une origine du système de fichiers.

Grâce à cette fonctionnalité, il est facile d'extraire une page et d'enregistrer toutes ses ressources hors connexion, tout en conservant exactement la même structure de dossiers que la version en ligne.