Implémentation de l'application hors ligne HTML5 et du stockage client

La prise en charge du développement d'applications Web hors ligne est un autre objectif de HTML5. Les applications Web dites hors ligne sont des applications qui peuvent toujours fonctionner même lorsque l'appareil ne peut pas accéder à Internet.

Le développement d'applications Web hors ligne nécessite plusieurs étapes. La première consiste à s’assurer que l’application sait si l’appareil a accès à Internet afin qu’elle puisse ensuite prendre les mesures appropriées. Ensuite, l’application doit également avoir accès à certaines ressources (images, Javascript, CSS, etc.) pour fonctionner correctement. Mieux encore, il doit y avoir un espace local permettant aux utilisateurs de sauvegarder leurs données, et la lecture et l'écriture ne seront pas gênées, qu'ils aient ou non accès à Internet.

HTML5 et ses API associées font du développement d'applications hors ligne une réalité.

Pour savoir si l'appareil est en ligne ou hors ligne, HTML5 définit un attribut navigator.onLine. Une valeur true indique que l'appareil peut accéder à Internet et une valeur false indique que l'appareil est hors ligne.

 if (navigator.onLine) { // Travailler normalement} else { // Effectuer des tâches en état hors ligne}

Étant donné que navigator.onLine présente certains problèmes de compatibilité, en plus de l'attribut navigator.onLine, afin de mieux déterminer si le réseau est disponible, HTML5 définit également deux événements, en ligne et hors ligne.

Ces deux événements sont déclenchés sur l'objet window lorsque le réseau bascule entre hors ligne et en ligne :

 window.addEventListener('online', function() { // Fonctionne normalement}); window.addEventListener('offline', function() { // Effectue des tâches hors ligne});

Dans les applications pratiques, il est préférable d'obtenir l'état initial via navigator.onLine après le chargement de la page. Utilisez ensuite les deux événements ci-dessus pour déterminer si l'état de la connexion réseau change. Lorsque l'événement ci-dessus est déclenché, la valeur de la propriété navigator.onLine change également, mais cette propriété doit être interrogée manuellement pour détecter les changements dans l'état du réseau.

Le cache d'application HTML5, ou appcache en abrégé, est spécialement conçu pour développer des applications Web hors ligne. Appcache est une zone de cache séparée du cache du navigateur. Pour enregistrer des données dans ce cache, utilisez un fichier manifeste qui répertorie les ressources à télécharger et à mettre en cache. Exemple de fichier de description :

 MANIFESTE DE CACHE # Commentfile.jsfile.css

Puis citez en html :

 <manifeste HTML=./xxx.manifest>

Le type MIME du fichier xxx.manifest doit être text/cache-manifest.

Le cœur de cette API est l'objet applicationCache. Cet objet possède un attribut d'état. La valeur de l'attribut est une constante, indiquant l'état actuel suivant du cache d'application :

• 0 : Pas de cache, c'est-à-dire qu'il n'y a pas de cache d'application lié à la page
• 1 : Idle, c'est-à-dire que le cache de l'application n'a pas été mis à jour
• 2 : Vérification, c'est-à-dire télécharger le fichier de description et vérifier les mises à jour
• 3 : Téléchargement, c'est-à-dire que le cache de l'application télécharge les ressources spécifiées dans le fichier de description.
• 4 : La mise à jour est terminée, c'est-à-dire que le cache de l'application a mis à jour les ressources et que toutes les ressources ont été téléchargées et peuvent être utilisées via swapCache().
• 5 : Abandonné, c'est-à-dire que le fichier de description du cache de l'application n'existe plus, la page ne peut donc plus accéder au cache de l'application.

Événements associés :

• vérification : déclenchée lorsque le navigateur recherche des mises à jour du cache de l'application
• erreur : déclenché lorsqu'une erreur se produit lors de la vérification des mises à jour ou du téléchargement de ressources
• noupdate : déclenché lors de la vérification du fichier de description et de la constatation que le fichier ne contient aucune modification.
• téléchargement : déclenché au démarrage du téléchargement des ressources du cache de l'application
• progression : déclenché en continu pendant le processus de téléchargement du cache de l'application de téléchargement de fichiers
• updateready : déclenché lorsque le nouveau cache d'application de la page a été téléchargé et peut être utilisé via swapCache()
• cached : déclenché lorsque le cache de l'application est entièrement disponible

De manière générale, ces événements seront déclenchés dans l'ordre mentionné ci-dessus au fur et à mesure du chargement de la page. Les événements ci-dessus peuvent également être déclenchés manuellement en appelant la méthode update().

Les cookies HTTP, généralement appelés directement cookies, sont utilisés sur le client pour stocker les informations de session. La norme exige que le serveur envoie l'en-tête HTTP Set-Cookie dans le cadre de la réponse à toute requête HTTP contenant des informations de session. Exemple d'en-tête de réponse du serveur :

HTTP/1.1 200 OK

Type de contenu : texte/html

Set-Cookie : nom=valeur

Autre-en-tête : autre-valeur d'en-tête

Le navigateur définit ensuite les informations de session, puis ajoute l'en-tête HTTP Cookie à chaque demande pour renvoyer les informations au serveur, comme indiqué ci-dessous :

OBTENIR /index.html HTTP/1.1

Cookie : nom=valeur

Autre-en-tête : autre-valeur d'en-tête

Les informations supplémentaires renvoyées au serveur peuvent être utilisées pour vérifier de manière unique de quelle requête provient le client.

Les cookies complets incluent :

1. Nom : un nom qui identifie de manière unique le cookie. Doit être codé en URL.
2. Value : la valeur de chaîne stockée dans le cookie. Doit être codé en URL.
3. Domaine : Le domaine pour lequel le cookie est valide.
4. Chemin : pour ce chemin dans le domaine spécifié, un cookie doit être envoyé au serveur.
5. Heure d'expiration : un horodatage indiquant le moment où le cookie doit être supprimé.
6. Indicateur de sécurité : lorsqu'il est spécifié, le cookie n'est envoyé au serveur que lors de l'utilisation d'une connexion SSL.