28 Août 2014

Application Web offline HTML5

Dans le cadre de développement d’application Web, il faut de plus en plus à penser à l’usage sur mobile. Le problème sur ce genre de périphérique c’est qu’on n’a pas forcément un réseau de très bonne qualité voir, pas de réseau du tout.

Par exemple, supposons qu’on ait une application de messagerie et qu’on souhaite envoyer un message (logique) depuis notre téléphone… Tant qu’on a du réseau, pas de soucis. Mais si on se déplace avec notre téléphone dans un métro, alors là, c’est plus compliqué. L’application s’en fou, tente d’envoyer le message, et plante honteusement en se fermant, vous laissant en plan.

Avec HTML5, on dispose d’une nouvelle fonctionnalité : la possibilité de faire des applications déconnectées et de gérer ce cas. Comme on parle d’HTML5, il faut faire attention, les fonctionnalités qui vont être présentées ne sont pas forcément compatibles tous navigateurs. Pour les récents, pas de soucis (Chrome, FF, IE10+). Pour les plus anciens, il faudra faire attention. Mais dans l’ensemble, le mode déconnecté aura un réel intérêt sur tablette et smartphone et donc sur des navigateurs récents. Cela fonctionnera sans aucuns soucis sur WP, Android et IPhone !

Manifeste HTML5

Le manifeste est en fait un fichier texte contenant trois choses :
– La liste des fichiers que le navigateur va devoir mettre en cache
– La liste des urls qui nécessiterons forcement une connexion pour être appelées
– Les « fallback », correspondance entre une url et un fichier. Si le navigateur n’arrive pas à appeler l’url, alors appellera le fichier correspondant.
Voici un exemple de manifeste :

CACHE MANIFEST
# 09:24:21
# Version 1.0
CACHE:
# Site Content
Content/Site.css
favicon.ico
Scripts/jquery-1.10.2.min.js
Scripts/modernizr-2.6.2.js
index.html
offline.html
FALLBACK:
/doAction /offline.html
NETWORK:
*

Ce manifeste indique donc les css/js/html à conserver en cache et donc utilisable en déconnecté.
Si l’utilisateur essaie d’accéder à l’url doAction et qu’il n’est pas connecté, alors c’est la page offline.html qui sera affichée.
Pour toutes les autres url, la connexion est nécessaire et donc, rien d’autre ne sera mis en cache navigateur.
Reste ensuite à référencer ce fichier dans la balise html de notre page web :

<html manifest="cache.manifest">

Attention : Ce fichier doit être servi par le serveur web avec le type mime : text/cache-manifest.

Maintenant, lorsque le navigateur va détecter que le manifeste n’est pas à jour, il téléchargera automatiquement la liste des fichiers spécifiés dans la section CACHE

refresh du manifest sous chrome

refresh du manifest sous chrome

Il peut être rusé de mettre un commentaire dans le manifeste contenant la version pour permettre gérer la mise à jour des fichiers.

Attention : lorsque le navigateur va télécharger les fichiers suite à la mise à jour du manifeste, c’est l’ancienne application qui va s’afficher ! La nouvelle version ne sera disponible qu’après que l’utilisateur ait rafraichi la page.

Ce petit bout de script permet de rafraichir la page lorsqu’une nouvelle version est disponible :

// Check if a new cache is available on page load.
window.addEventListener('load', function (e) {
window.applicationCache.addEventListener('updateready', function (e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Browser downloaded a new app cache.
if (confirm('A new version of this site is available. Load it?')) {
window.location.reload();
}
} else {
// Manifest didn't changed. Nothing new to server.
}
}, false);
}, false);

Pour en apprendre un peu plus sur les différents points d’écoute pour faire de jolies choses avec les applications déconnectées : Documentation developer.mozilla.org du Application Cache

Il est également possible de connaître l’état d’une connexion grâce à navigator.onLine.

Attention : Cette propriété fonctionne correctement sur la plupart des navigateurs (IE10+, Chrome, Safari, donc WP8, Android, IPhone) mais pas FireFox.

Share

Comments are closed.