Démonstration de la mise en cache via HTML 5 sur iphone

Dimension: px

Commencer à balayer dès la page:

Download "Démonstration de la mise en cache via HTML 5 sur iphone"

Yves Charbonneau
il y a 8 ans
Total affichages :

1 Last update: 2011/08/18 21:46 wiki:devmobile:webapp:html5:presentation Démonstration de la mise en cache via HTML 5 sur iphone Overview Parmi les nouveautés du HTML 5, l une d elles est très intéressent pour les applications web. Appelée «cache d application hors connexion», elle permet aux utilisateurs d exécuter une application, même lorsqu ils ne sont pas connectés à internet. Le principe de fonctionnement est le suivant : lorsqu un utilisateur accède à votre application web, le navigateur télécharge et stocke tous les fichiers requis pour afficher les pages (HTML, CSS, JavaScript, php, images etc ). La prochaine fois que l utilisateur accédera à l application web, le navigateur reconnaîtra l URL et fournira les fichiers contenus dans le cache d application local, au lieu de les télécharger depuis le réseau. Nous allons vous présenter les différents concepts impliqués dans un simple exemple d application. Tutorial Arborescence de l application : html5 -html index.html images icon.png startup.png javascript cache.js.htaccess cache.manifest Le fichier.htaccess Le fichier.htaccess est un fichier de configuration du serveur web Apache sur lequel vous hébergé votre application. AddType text/cache-manifest.manifest Cette permet d associer l extension.manifest avec le type MIME text/cache-manifest. De ce fait, notre fichier cahe.manifest sera reconnu par le serveur. Certains serveurs web ne reconnaissent pas les fichiers.htaccess ou le type MIME. Printed on 2012/02/16 11:49

Le principe de fonctionnement est le suivant : lorsqu un utilisateur accède à votre application web, le navigateur télécharge et stocke tous les fichiers requis pour afficher les pages (HTML, CSS,

2 wiki:devmobile:webapp:html5:presentation Last update: 2011/08/18 21:46 Il est donc nécessaire de se renseigner au préalable sur cette caractéristique. Le fichier cache.manifest Le fichier de manifeste est un simple document texte placé sur le serveur web. Il contient la liste des fichiers que le périphérique utilisateur doit télécharger pour fonctionner. La moindre erreur typographique dans ce manifeste l invaliderait et empêcherait l application de fonctionner hors connexion. CACHE MANIFEST # version 1.0 CACHE: html/index.html images/icon.png images/startup.png javascript/cache.js Les lignes 4 à 7 contiennent l ensemble des fichiers de l application. On remarque que le fichier.htaccess et cache.manifest ne sont pas présent. La ligne 2 sert à signaler quand une mise à jour est disponible. En effet, l ensemble des fichiers seront téléchargés une nouvelle fois dès que le manifeste aura changé. En ajoutant un commentaire au fichier, grâce au «#», il suffit de changer le numéro de version pour modifier le manifeste et donc provoquer la mise à jour de l application. Les autres options du manifest : CACHE MANIFEST # version 1.0 CACHE: html/index.html images/icon.png images/startup.png javascript/cache.js NETWORK: FALLBACK: Il est possible de forcer le navigateur à accéder à certaines ressources sur le serveur. Le navigateur ne mettra pas en cache au niveau local les fichiers de la partir NETWORK. Ces ressources ne seront donc pas visibles lorsque l utilisateur sera hors connexion. Grâce à la partie FALLBACK, nous pouvons préciser des fichiers de remplacement dans le cas ou l utilisateur n a pas d accès internet. Le fichier html Printed on 2012/02/16 11:49

La moindre erreur typographique dans ce manifeste l invaliderait et empêcherait l application de fonctionner hors connexion. CACHE MANIFEST # version 1.0 CACHE: html/index.html images/icon.

3 Last update: 2011/08/18 21:46 wiki:devmobile:webapp:html5:presentation Considérons dans notre exemple la structure suivante : <!DOCTYPE html> <html manifest="manifest.php"> <head> <meta http-equiv="content-type" content="text/html; charset=iso "/> <meta content="yes" name="apple-mobile-web-app-capable" /> <link rel="apple-touch-icon" href="images/icon.png" /> <link href="images/startup.png" rel="apple-touch-startup-image" /> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <meta content="minimum-scale=1.0, width=device-width, maximum-scale=0.6667, user-scalable=no" name="viewport" /> <script src="cache.js" type="text/javascript"></script> <title>contact</title> </head> <body onload="init()"> </body> </html> <center> </center> <B>Mon application offline!</b> La ligne 1 permet d utiliser le HTML 5. La ligne 2 fait référence au fichier cache.manifest précédemment créé. Les lignes 5 et 6 permettent d ajouter une icône et une image de démarrage à l application. La ligne 7 appel le fichier cache.js pour pouvoir utiliser la fonction init() à la ligne 10. La ligne 14 est le contenu qui sera affiché à l écran du périphérique utilisateur. NB : Par soucis de clarté, nous n avons pas représenté les balises <meta> nécessaire pour la visualisation de l application sur l iphone. Le fichier cache.js Une fois les fichiers téléchargés pour la première fois, le mobile ouvre en priorité les fichiers du cache et non ceux du serveur. Quand une mise à jour est disponible, les fichiers sont téléchargés mais pour qu ils prennent effet, il faut relancer l application. Le fichier cache.js permet d utiliser quelques fonctions JavaScript qui permettent d avertir l utilisateur par un popup quand une nouvelle version de l application est disponible. Cela l invite à relancer l application afin de visualiser la nouvelle version. // variable du cache géré par le fichier MANIFEST Printed on 2012/02/16 11:49

png" /> <link href="images/startup.png" rel="apple-touch-startup-image" /> <meta content="text/html; charset=utf-8" http-equiv="content-type" /> <meta content="minimum-scale=1.

4 wiki:devmobile:webapp:html5:presentation Last update: 2011/08/18 21:46 var webappcache = window.applicationcache; function init() { // METTRE A JOUR LE CACHE SI UNE MAJ EST DISPO. webappcache.addeventlistener("updateready", updatecache, false); // FORCER LA VISITE MEME SI LE CACHE N'A PAS PU ETRE MIS A JOUR webappcache.addeventlistener("error", initvisite, false); webappcache.addeventlistener("idle", initvisite, false); function updatecache() { // METTRE A JOUR LE CACHE webappcache.swapcache(); // DEMANDER A L'UTILISATEUR DE RELANCER L'APP POUR VOIR LA NOUVELLE VERSION alert("une mise à jour est disponible. Veuillez relancer l'application!"); function initvisite() { // CODE OU COMMENCER LA VISITE ET CHARGER LE PREMIER PANO Le manifest dynamique Il est très intéressant de créer dynamiquement le fichier manifeste pour plusieurs raisons. Lorsque l application utilise un nombre important de fichiers, il serait fastidieux de les lister manuellement. De plus, lors d ajout de fichiers à l application, il faudrait éditer à chaque fois le manifeste. Générer dynamiquement la liste des fichiers est donc un avantage très intéressant. Il est également astucieux de générer dynamiquement un commentaire au manifeste lorsqu un ou plusieurs fichiers ont été modifiés pour ne pas avoir à éditer manuellement ce dernier pour activer la mise à jour de l application. Pour ce faire, Il est nécessaire d activer la dernière version php du serveur web grâce au.htaccess afin que les fonctions utilisées pour le fichier manifeste soient reconnues. AddType text/cache-manifest.manifest SetEnv PHP_VER 5 La ligne 2 nous permet d activer la version 5 du php de notre serveur web. Nous allons donc remplacer le fichier cache.manifest par le fichier manifest.php. Il faut donc modifier l appel du manifest dans le fichier index.html Remplacer la ligne 2 : <html manifest="cache.manifest"> Printed on 2012/02/16 11:49

addeventlistener("updateready", updatecache, false); // FORCER LA VISITE MEME SI LE CACHE N'A PAS PU ETRE MIS A JOUR webappcache.addeventlistener("error", initvisite, false); webappcache.

5 Last update: 2011/08/18 21:46 wiki:devmobile:webapp:html5:presentation Par : <html manifest="manifest.php"> Passons à la création du fichier manifest.php. <?php header('content-type: text/cache-manifest'); echo "CACHE MANIFEST\n"; $hashes = ""; $dir = new RecursiveDirectoryIterator("."); foreach(new RecursiveIteratorIterator($dir) as $file) { if ($file->isfile() && $file!= "./manifest.php" && substr($file->getfilename(), 0, 1)!= ".") { echo $file. "\n"; $hashes.= md5_file($file); echo "# Hash: ". md5($hashes). "\n";?> Les lignes 5, 15 et 19 permettent d analyser le hachage de chaque fichier nécessaire au fonctionnement de l application et de créer une chaîne de 32 caractères qui sera passée en commentaire. La moindre modification d un ou de plusieurs fichiers sera donc répercutée sur la chaîne de caractère ce qui modifiera la manifeste et donc la mise à jour de l application sera proposé à l utilisateur. Les autres lignes permettent de lister l ensemble des fichiers présent sur le serveur web. Téléchargement L'ensemble des scripts disponibles en téléchargement ont été réalisés par mes soins, faites en bonne usage! Lien : html5.zip From: - openwebtech Printed on 2012/02/16 11:49

$php header('content-type: text/cache-manifest'); echo "CACHE MANIFEST\n"; $hashes = ""; $dir = new RecursiveDirectoryIterator(".$

6 wiki:devmobile:webapp:html5:presentation Last update: 2011/08/18 21:46 Permanent link: Last update: 2011/08/18 21:46 Printed on 2012/02/16 11:49

Documents pareils

Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA

Auteur LARDOUX Guillaume Contact guillaume.lardoux@epitech.eu Année 2014 DEVELOPPEMENT MOBILE AVEC CORDOVA Sommaire 1. Introduction 2. Installation 3. Fonctionnement 4. Développement 5. Démonstration 2