Une application en HTML5

HTML5_Logo_256

Lorsqu'on pense application mobile, on pense presque exclusivement Android/Iphone. Cependant, HTML5 apporte tout un flot de fonctionnalités innovantes, parmi lesquelles, la possibilité de créer une application qui fonctionne même lorsqu'elle n'a plus accès au réseau. C'est ce que nous allons aborder dans ce billet, via la présentation de quelques concepts de base.

Le fichier manifeste

Le manifeste permet de préciser quels fichiers font partie de l'application. Lorsque ce fichier est lu et qu'on est connecté, le navigateur va télécharger l'ensemble des fichiers référencés par le manifeste. On pourra y indiquer des fichiers html, mais également des css, des images, du javascript... Une fois déconnecté, le navigateur pourra alors afficher le site complet sans avoir à faire des requêtes HTTP car tout sera déjà en cache.

Tant que l'appareil est connecté, en revanche, seul le fichier de manifeste est transmis. Si la version téléchargée est équivalente à celle en cache, le navigateur ne mettra pas à jour les fichiers listés. En revanche, si le manifeste change, la version en cache est considérée obsolète et l'ensemble des fichiers sera mis à jour.

Le manifeste a le format suivant :

CACHE MANIFEST
# v0.1
CACHE:
index.html
js/script.js
css/style.css
img/logo.jpg
NETWORK:
*
FALLBACK:
/ /offline.html

La première ligne est nécessaire pour interpréter la suite. Toute ligne commençant par # est un commentaire. On s'en servira notamment pour placer le numéro de version. Ainsi, si la liste des fichiers ne varie pas mais que leur contenu change et doit être mis à jour, le manifeste pourra être vu comme différent de celui en cache et l’application mise à jour.

La partie "CACHE" permet de lister les fichiers à sauvegarder dans le cache. Ils seront stockés en cache et appelés avec la même arborescence. Dans "NETWORK", on indique les fichiers qui nécessitent une connexion Internet pour fonctionner. Ils ne sont jamais mis en cache. Si on est offline, une erreur sera affichée. La partie "FALLBACK" permet de substituer certaines ressources à d'autres dans le cas où on se retrouve déconnecté et où la ressource n'est pas en cache. Dans notre exemple, si on essaie d'accéder à un fichier du domaine lorsqu'on est déconnecté et que celui-ci n'est pas dans le cache, offline.hml sera affiché.

Stockage de données

Web Storage

Il s'agit d'un mode de stockage de données dans le navigateur. Plus puissant que les cookies (une taille plus importante, pas de requête HTTP supplémentaire) et plus simple d'utilisation, il existe en deux formats : le sessionStorage et le localStorage, différenciés par le niveau de persistance. Il a pour avantage de stocker rapidement et simplement des données en cache sans passer par Ajax ou par les cookies. La performance ressentie s'en trouve améliorée.

Le sessionStorage mémorise les données le temps d'une session de navigation. Sa portée est limitée à la fenêtre ou à l'onglet actif. A la fermeture de l'onglet, les données sont effacées.

Le localStorage, lui, n'a pas de limitation de durée de vie et sa portée est plus large. Il est possible d'exploiter les données à travers plusieurs onglets ouverts sur le même domaine.

La manipulation du web storage est très simple et se fait en Javascript. Elle se fait soit par méthode :

localStorage.setItem("login", "john");
var login = localStorage.getItem("login");
localStorage.removeItem("login");
localStorage.clear();

Soit, de manière équivalente, par accès direct :

localStorage['login'] = 'john';
localStorage.login = 'john';
var login = localStorage['login'];
login = localStorage.login;

Base de données

Les navigateurs récents supportent tous au moins un type de base de données embarqué parmi les 2 suivants : WebSQL et IndexedDB.

WebSQL est considéré comme un prédécesseur de IndexedDB et est aujourd'hui obsolète, cependant il s'agit de la seule option possible sous IOS Safari. IndexedDB, quant à elle, est la seule option possible pour IE et Firefox. Chrome, Opera et le navigateur natif d'Android peuvent gérer les 2 types de base. En fonction de la plateforme visée, le choix peut donc être déterminant même s'il est toujours possible de gérer les 2 types au sein de l'application.

WebSQL est un système de base de données relationnelle, avec une interrogation SQL classique. IndexedDB, quand à lui, est un système de base de données NoSQL et son utilisation est sensiblement différente. Nous aborderons ici exclusivement WebSQL.

Création/récupération de la BDD (WebSQL)

if (DB.instance != null) {
		log("=> Returning existing instance", 'debug');
		return DB.instance;
	}
	try {
		if (window.openDatabase) {
			DB.instance = openDatabase(params.db, params.version,
					params.displayName, params.maxSize);
			log("=> Returning new instance", 'debug');
			return DB.instance;
		} else {
			alert("Le navigateur ne supporte pas les bases de donnees.");
		}
	} catch (e) {
		if (e === 2) {
			log("Version de la base de donnees invalide.", 'error');
		} else {
			log("Exception : " + e, 'error');
		}
	}

La méthode openDatabase() permet d'accéder à la base de données ou de la créer le cas échéant. Le paramètre de version permet d'indiquer le numéro de version de la base. Supposons que l'utilisateur déploie dans son cache une première version de la base, avec une structure particulière. Il utilise l'application, ce qui a pour effet de modifier certaines données. En parallèle, le développeur modifie le format de la base. Lorsque le client va mettre à jour les données, il se trouvera avec 2 versions de la base. Que faire alors avec les données existantes ? Va-t-il les perdre ? C'est à cela que sert le paramètre de version. On sera en mesure de reconnaître la version actuelle de la base du client et donc de procéder à une migration des données si nécessaire.

Exécution de requêtes sur la BDD (WebSQL)

DB.getInstance().transaction(
    function(trans) {
        trans.executeSql('SELECT count(*) as nb FROM residences;', [], successHandler, errorHandler);
});

Débogage d'une application HTML5

Tous les navigateurs récents disposent aujourd'hui d'outils de débogage, certains étant cependant plus qualitatifs que d'autres. Ils ont cependant tous l'avantage d'être aisément utilisés. Sous Google Chrome, on y accède avec la touche F12. L'onglet Resources est notamment très utile et permet de visualiser le fichier manifeste (accessible aussi via son URL), les données stockées localement et le contenu des bases de données.

Les outils de débogage de Chrome permettent également de positionner des points d'arrêt et des espions.

Bien entendu, si l'application est destinée à être utilisée sur plusieurs navigateurs, il sera indispensable de la tester sur chacun d'eux car le code ne sera pas forcément compatible. Les outils de débogage natif ou les plugins de débogage seront alors les meilleurs amis du développeur.

Fonctionnalités avancées

Le standard HTML5 prévoit un certain nombre d'API Javascript, différemment intégrées selon les navigateurs. Les fonctionnalités offertes sont similaires à certaines fonctionnalités natives, rapprochant ainsi le développement HTML5 du développement de certaines applications mobiles.

On pourra, entre autres :

  • Faire vibrer l'appareil selon un motif choisi.
  • Déclencher l'appareil photo ou la caméra de l'appareil.
  • Créer des notifications.
  • Consulter l'état de la batterie, savoir si le chargeur est branché, être informé des événements associés.
  • Savoir si on est connecté et utiliser les événements associés.
  • Utiliser le GPS.
  • Stocker des fichiers sur disque.
  • Exécuter des tâches de fond.
  • Faire de la 3D

 Conclusion

Lorsqu'on a une application web qui fait office d'application online, il peut être à la fois "relativement" aisé et pertinent économiquement de la transformer en application offline plutôt que de créer son équivalent ou ses équivalents (un par plateforme de destination). Le résultat final peut être relativement proche d'une application native et avoir même de sérieux avantages sur le développement d'une telle application.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.