Application cache manifest hors ligne HTML5 avec Sencha Touch 2

Sencha Touch vous permet de créer des applications mobiles avec des languages web. Ce n’est pas pour autant que le téléphone de vos utilisateurs doit avoir un accès à Internet, vous pouvez utiliser les fonctionnalités HTML5 et particulièrement le cache manifest pour ordonner au téléphone/tablette de stocker en local les fichiers nécessaires !

Le cache manifest

Ce fichier « nomdufichier.appcache » est un fichier que vous référencerez dans votre page web sur la balise HTML5 « html ». Elle indiquera à votre navigateur qu’il doit charger également ce fichier en plus de vos ressources web. Attention aux serveurs du type IIS qui filtrent les types de fichiers envoyés par les serveurs, il vous faudra ajouter une exception pour bien servir des fichiers de type appcache.

La structure de ce fichier est ainsi :

CACHE MANIFEST
# timestamp de mise à jour

CACHE:
/favicon.ico
index.html
app.css
images/logo.png
scripts/app.js

# Liste des ressources qui ont nécessairement besoin d'internet
NETWORK:
http://api.twitter.com

# Liste des fichiers à utiliser (à droite) si le fichier à gauche n'est pas disponible (offline)
FALLBACK:
/index.php /offline.html
*.html /offline.html

La première partie CACHE sera les fichiers qui seront une fois chargés servis par le navigateur à la place d’aller les chercher sur le net. Il n’y aura même pas de requête HTTP qui pourraient renvoyer une 304 non modifiés. NETWORK correspond aux ressources distantes que vous ne pouvez pas cacher, comme les widget Facebook Like, les APIs.. Et FALLBACK correspond à la liste des fichiers à utiliser dans le cas où un autre n’est pas disponible.

Vous pouvez noter le premier commentaire ‘timestamp..’ c’est en fait la technique qui va permettre de mettre à jour ce fichier sur le navigateur : celui-ci va a chaque chargement aller voir sur le serveur si le contenu a changé, peu importe le changement (un commentaire, l’ordre qui a changé..) pour ensuite retélécharger toutes les ressources (importants de modifier si vous mettez à jour votre site).

Le mode hors ligne ( offline HTML5 application cache) appliqué à Sencha Touch

Sencha à travers sa ligne de commande va compresser votre application et générer le strict minimum possible nécessaire à l’utilisation de votre app : le fichier js contenant votre code applicatif + le framework, les css, les images.. Par défaut, Sencha va générer un fichier app.cache qui est inutile par défaut. Pour le personnaliser et donc rendre votre application complètement hors ligne, il vous faudra aller dans votre fichier « app.json » et à la partie « appCache ».

Vous pouvez voir un exemple ici https://github.com/flrent/ConfMate/blob/master/app.json#L79

Vous n’aurez ensuite qu’à indiquer les fichiers que vous voulez avoir en hors ligne, et la commande générera la prochaine fois le bon fichier appCache ! Vous pourez voir alors ce genre de message dans la console qui détaille précisément les étapes d’application cache. Il existe également une API pour y accéder en JavaScript.

 

Application cache HTML5 Sencha Touch

Application cache HTML5 Sencha Touch