La 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éconnecté, 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 à toujours charger depuis le réseau. On met ici # une étoile pour dire "tout le reste". Si on ne fait pas ça, # on va se retrouver sans css et js :) NETWORK: * # Ressources alternatives si les précédentes sont inacessibles. # 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.
A noter aussi que le nom du manifeste ne doit pas changer.
Par exemple si vous avez un “cache_V1.manifest” et que vous le nommez “cache_V2.manifest” :
– toute personne qui aura récupéré le cache V1 ne verra pas la nouvelle version;
– tous les nouveaux users utiliseront le cache V2.
Si après une heure vous vous rendez compte de votre erreur :
– tous les nouveaux users qui ont récupéré le cache V2 n’auront jamais accès aux mises à jours futures de cache V1 (a moins de se débarrasser du cache bien sûr).
Dernière info pour le fin, ce genre de manifest est la base d’une appli Firefox OS. Et ça c’est cool !
Et pour un site comme le votre, est-ce que l’on fait un manifest ou est-ce que c’est illusoire/overkill ?
Et du coup, de quoi le remplis t’on ?
Cet article est un peu trop théorique à mon gout :D
Un site comme le notre ? Un blog ? Un site de cul ? Le multiboard ? Zerobin ?
Intéressant. Si j’ai bien compris, le fichier manifest doit être à la racine du projet c’est ça, vu la déclaration du header ?
Tu peux mettre n’importe quelle URL, relative ou absolue, qui respecte la politique de sécurité de ton navigateur.
Ortho :
Si on est déconnecter => déconnecté
innacessibles => inaccessibles
Merci Luigi.
Bonjour,
Est-il possible de gérer une mise à jour automatique du fichier manifest en fonction de la date et de l’heure système ?
Merci d’avance
Il suffit de faire un process qui réécrit le fichier à l’heure dite (ex un cron).
Bonjour, pour répondre à Cédric tu peux utilisé grunt qui watch tous les fichier de ton projet et change le manifest.
lien utils: https://github.com/gunta/grunt-manifest
Bonjour,
J’ai réalisé un site de cette façon et je dois le refaire avec de nouvelles contraintes.
1 ) Je dois pouvoir filtrer les pages que je souhaite afficher avec des cases à cocher. Pour ce faire LocalStorage doit apparemment faire l’affaire.
2) Je souhaite pouvoir accéder à une vingtaine de fichiers PDF, et là … pas d’idées …pas de solutions trouvées. Même un seul fichier PDF indiqué dans le manifest ne fonctionne pas. J’avais d’ailleurs eu le même problème avec une vidéo. J’ai lu des articles qui parle d’API FILE mais ne semble pas solutionner mon problème.
Donc, pour faire simple, est-il possible de lire un fichier PDF sur un site hors ligne ?
Merci pour votre aide
La mémoire disponible pour une site hors ligne est limitée par nom de domaine. Il me semble que la limite est 5Mo. Donc à mon avis les PDF, zob.