IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Réaliser une application offline en HTML5

Cet article vous permettra de faire rapidement une application HTML5 qui gérera le mode offline de votre navigateur.
11 commentaires Donner une note à l´article (5)

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Cet article va vous apprendre à gérer trois technologies : HTML5 gérant le mode offline, le cache du navigateur et le stockage local. Notre exemple est une gestion de « to-do list » qui utilise trois technologies : HTML5 et JavaScript/jQuery pour le côté client et PHP pour le côté serveur.

II. Prérequis

Le code est simple. La page HTML contient une liste non numérotée contenant les tâches, ainsi qu'un formulaire. Dès que celui-ci est activé, le JavaScript intercepte le formulaire et l'envoie au fichier PHP pour qu'il l'enregistre dans un fichier texte.

Code HTML :

index.html
Cacher/Afficher le codeSélectionnez

Code CSS :

style.css
Cacher/Afficher le codeSélectionnez

Code JavaScript :

script.js
Cacher/Afficher le codeSélectionnez

Code PHP :

ajax.php
Cacher/Afficher le codeSélectionnez

III. La gestion du cache

III-1. Théorie

Le mode hors-ligne intervient quand votre ordinateur n'a plus de réseau ou que votre téléphone se situe dans une zone sans réseau. À ce moment-là, votre application Web utilise le cache du navigateur pour stocker les fichiers dont il aura besoin pour travailler (images, JavaScript, feuilles de style et pages HTML). Ces fichiers seront déclarés dans un fichier de type MANIFEST lié à votre fichier HTML via la balise HTML comme ci-dessous :

index.html
Sélectionnez
<html manifest="filename.manifest">

Pour que ce fichier soit bien déclaré au niveau du serveur, il nous faut déclarer son MIME-TYPE via un fichier .htaccess :

.htaccess
Sélectionnez
AddType text/cache-manifest manifest

Après que le fichier a bien été déclaré au niveau du HTML et du serveur, nous allons voir comment il est structuré :

manifest.manifest
Sélectionnez
CACHE MANIFEST
# Comment
 
CACHE:
delete.png
index.html
script.js
style.css
# Fichier JS : jQuery
https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js
 
FALLBACK:
 
NETWORK:
/ajax.php

Ce fichier MANIFEST est divisé en quatre parties :

  • l'en-tête qui doit être déclaré comme tel : CACHE MANIFEST ;
  • la zone de CACHE contenant les fichiers statiques à mettre dans le cache du navigateur ;
  • la zone de FALLBACK contenant la redirection à mettre en place pour le cas où ils ne seraient pas accessibles en ligne ;
  • la zone de NETWORK contenant les fichiers nécessitant une connexion internet (par exemple, les pages de connexion ou les fichiers PHP liés à de l'AJAX).

Comme vous pouvez le voir, un commentaire peut être placé à n'importe quel endroit du fichier si un dièse est placé au début de la ligne.

III-2. Pratique

Après la théorie, la pratique. Nous mettons donc en place le fichier manifest, le .htaccess et la modification de la balise HTML. En visitant la page sous Firefox, un message s'affiche dans le haut du navigateur (figure 3.2.1).

Mozilla Firefox propose le téléchargement du cache
Figure 3.2.1 : Mozilla Firefox propose le téléchargement du cache

Après autorisation, on active le travail hors connexion de Mozilla Firefox.
Actualisons la page.
Résultat : la page HTML et les contenus statiques sont là.
Maintenant, testons un ajout et une suppression de tâche : cela fonctionne.

IV. Le mode hors-ligne

IV-1. Test

On active le travail hors connexion de Mozilla Firefox. Comme on peut le voir dans la figure IV.1.1, la requête AJAX vers le fichier ajax.php a échoué.

Échec de la requête AJAX
Figure IV.1.1 : Échec de la requête AJAX

IV-2. Théorie

Dans ce cas, nous devons détecter quand il n'y a plus de réseau pour empêcher les requêtes AJAX, et quand le réseau est de nouveau disponible, permettre les requêtes vers le serveur. Pour cela, on utilise la propriété onLine de l'objet window.navigator (référence : https://developer.mozilla.org/en-US/docs/Web/API/window.navigator.onLine) qui retourne un booléen contenant le statut en ligne du navigateur. De plus, pour voir les changements réseaux, deux événements existent : window.onOnline et window.onOffline.

IV-3. Pratique

Du côté pratique, il suffit d'interroger la variable navigator.onLine qui contient le statut du navigateur et de suivre via callbacks les deux événements window.onOnline et window.onOffline.

script.js
Cacher/Afficher le codeSélectionnez

V. Le stockage local

À ce niveau, les tâches ne sont envoyées uniquement que dans le cas où le navigateur est en ligne. Si le navigateur est hors-ligne, un simple message d'erreur nous prévient. Mais comme la technologie HTML5 est bien conçue : nous allons pouvoir stocker les actions via la technologie du stockage local, plus communément nommé localStorage.

V-1. Théorie

Le stockage local permet de stocker facilement des informations de type clé-valeur. L'objet localStorage contient six méthodes :

  • localStorage.clear() : supprime toutes les clés stockées ;
  • localStorage.getItem(sKey) : retourne la valeur associée à une clé ;
  • localStorage.key(iIndex) : retourne la clé d'un index ;
  • localStorage.length : retourne le nombre de clés stockées ;
  • localStorage.removeItem(sKey) : supprime une clé et sa valeur associée ;
  • localStorage.setItem(sKey, sValue) : stocke une clé avec une valeur associée.

V-2. Pratique

Dans notre projet, nous allons avoir besoin du stockage local à deux moments :

  • en cas de navigateur hors-ligne pour stocker les actions (ajout et suppression) ;
  • en cas de retour au mode en ligne pour lister et exécuter les actions stockées précédemment.
script.js
Cacher/Afficher le codeSélectionnez

VI. Conclusion

Et voilà, vous savez désormais gérer la déconnexion réseau, le cache de votre application Web et même du stockage local. Ce code est améliorable sur de nombreux points dont voici quelques pistes :

  • sécuriser la gestion des erreurs avec par exemple, la protection des failles XSS (essayer d'ajouter la tâche <script>alert('Test');</script>) ;
  • créer une image qui sera modifiée à chaque changement de statut réseau.

Vous pouvez retrouver toutes les sources sur mon compte GitHub dédié aux articles Développez.com : https://github.com/Progi1984/DVP

VII. Remerciements

Merci à Bovino et LittleWhite pour la relecture technique.

Merci à Torgar et _Max_pour la relecture orthographique.

Merci à Developpez.com pour leur infrastructure et leur aide dans l'élaboration de mes articles.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2012 LEFEVRE Franck. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.