Le manifeste du cache du mode hors ligne pour HTML5
dimanche 20 avril 2014 à 14:17La bataille app native VS site responsive va faire rage pendant pas mal de temps, et pour le moment les apps gagnent : performances plus élevées, meilleures intégration visuelle dans l’OS, accès à une API plus riche… Les utilisateurs les préfèrent, et du coup les pros sont obligés de se les coltiner. C’est chiant, mais c’est la réalité du terrain pour les dev sur mobile.
Mais pour les sites Web ou les apps simples, il est super intéressant d’exploiter les capacités HTLM5 au max pour une obtenir une expérience plus “app” et moins “site web”.
Parmi ces possibilités : le mode hors ligne. D’un côté, il y a le stockage des données dans le navigateur, mais on vous en a déjà parlé.
De l’autre, il y a le cache des ressources. Cela consiste à déclarer quels fichiers (html, css, js, images, fonts, n’importe quoi…) garder en mémoire afin de les charger directement depuis le disque dur au lieu de le faire en ligne.
Pour cela, il faut déclarer un manifeste dans son HTML :
<html manifest="cache.manifest">
Ensuite, on créer le fichier cache.manifest dans son projet, qui est un fichier de texte simple.
Il faut le faire servir avec le mime-type
text/cache-manifest
sinon ça ne marche pas. Si vous le nommez
*.manifest
et que vous le servez avec un serveur de dev, ça marchera tout seul. Pour la prod, il faut le spécifier à votre serveur. Par exemple avec nginx, il faut éditer le fichier /etc/nginx/mime.types et y ajouter :
text/cache-manifest manifest;
Pour apache, c’est un truc du genre dans le .htaccess:
AddType text/cache-manifest .manifest
Ensuite, le manifeste ressemble à ça :
CACHE MANIFEST # 2014-04-20 13:25:00 # Toutes les ressources à sauvegarder en local. Le navigateur # va toujours chercher ces ressources sur le disque. # Si on est déconnecter, la page index.html, ses styles et javascript # s'afficheront donc quand même. CACHE: index.html /favicon.ico stylesheet.css images/logo.png scripts/main.js fonts/font.woff # Ressources qui ne sont chargées que si on est en ligne. # Par exemple, on charge le module de stats de visiteurs que si on est # en ligne car impossible de compter les vues sans le serveur. NETWORK: js/visits.js # Ressources alternatives si les précédentes sont innacessibles. # Par exemple, pour afficher un point rouge si on est hors ligne # et un point vert si on est en ligne : # images/offline.png sera servi si images/online.png est inaccessible FALLBACK: images/online.png images/offline.png
Notez le commentaire # 2014-04-20 13:25:00 tout en haut. C’est
une convention qu’on utilise pour donner la dernière date de modification des
fichiers cachés. En effet, les fichiers de la section CACHE ne seront
pas rechargés tant que le manifeste n’a pas été modifié.
Cela veut dire que si vous modifiez index.html, l’utilisateur
ne verra pas la modification. Mais si vous changez la date du fichier manifeste,
le fichier est modifié, et le navigateur rechargera donc toutes les ressources
qu’il a mis en cache. Ainsi, vous permettez aux utilisateurs de voir les
ressources cachées qui ont été modifiées.
