Introduction à la gestion d'un site en mode offline avec Google Gears

Les applications Web ont énormément évolué ces deux dernières années, tout particulièrement depuis l'avènement du concept Web 2.0. Nous disposons de plus en plus d'applications Web dynamiques, élégantes et riches en fonctionnalités se rapprochant de leurs homologues Desktop. Néanmoins, il reste encore beaucoup d'applications qui ne peuvent avoir leur équivalent en version web, car les navigateurs sont encore limités par leur nature même. Le meilleur exemple est la connectivité au réseau Internet. Que se passe-t-il lorsqu'on perd sa connexion Internet ? Que peut-on faire pour continuer à travailler ou utiliser partiellement sa solution applicative en mode déconnecté ? Comme à son habitude, Google se démarque par son dynamisme et son innovation en proposant une extension aux navigateurs afin de gérer cette problématique : Google Gears.

Sur le blog dédié à ce framework, nous pouvons lire que « Google Gears est une amélioration incrémentale au Web d'aujourd'hui. Il apporte juste le nécessaire en fonctionnalité AJAX de sorte à permettre aux applications Web actuelles de fonctionner en mode offline ».

Google Gears répond à un besoin qui est « malheureusement » aujourd'hui peu commun : la connectivité permanente au plus grand réseau mondial. Que se passe-t-il quand on ne peut pas se passer d'un besoin ? On le simule…

Ce framework prend la forme d'une extension pour les navigateurs Mozilla Firefox (version 1.5 ou ultérieur) et Internet Explorer (version 6.0 ou ultérieur). À l'heure actuelle, plusieurs versions de Google Gears sont disponibles. La plus récente à l'écriture de ce document est la version 0.2 (0.1.56.0).

Autre bonne nouvelle : Google a choisi d'ouvrir le code de l'application sous la licence Open Source BSD [1]Liens. Cela signifie que tout le monde peut consulter le code source, participer aux nouvelles fonctionnalités, envoyer des correctifs… Ce mode de travail est avantageux pour tous les utilisateurs qui peuvent se reposer sur la communauté existante autour du projet.

Les sites Web d'aujourd'hui proposent des fonctionnalités uniques, intimement liées à la connexion permanente à l'Internet. Sans connexion, le site, et donc ses fonctionnalités, est tout simplement inaccessible.

L'extension Google Gears, installée sur le navigateur du client, permet de proposer à l'utilisateur une continuité de certains de ses services. Il va pouvoir continuer à naviguer et utiliser tout ou partie du site qui sera localement copié sur son disque dur local. Cette continuité de services est à la fois intéressante pour l'utilisateur, car il peut continuer à utiliser le site en mode hors-ligne, et pour les propriétaires du site, car ces utilisateurs continuent à utiliser leur site et non pas un outil de type client lourd.

Un court schéma vaut mieux qu'un long discours, voici comment s'effectuent les transactions entre les modes « connecté » et « déconnecté » :

Ici nous voyons qu'il existe une détection de la connectivité réseau qui va choisir entre afficher les données provenant d'Internet et afficher les informations stockées localement, ou les deux.

Le navigateur « Application UI » se connecte au module « Data Switch » pour savoir ce qu'il peut afficher. Ce dernier :

• si la connexion réseau est présente, aller chercher les données sur le serveur « Server Data Layer » ;
• si des données locales sont présentes, appeler le module « Local Data Layer » pour les récupérer.

La dernière brique à utiliser est le « Sync Engine » qui permet de choisir quand synchroniser les données locales sur le serveur en ligne.

Voyons maintenant ce que propose Google Gears comme API pour arriver à ce résultat.

La nouvelle « killer application » de Google est, avant tout, un mélange savamment composé de plusieurs technologies puissantes :

• Ajax : pour mettre à jour les interfaces en temps réel en allant chercher l'information juste nécessaire sur le serveur ;
• SQLite : base de données légère et performante pour le stockage des données locales ;
• JSON : format Javascript d'échange de données entre les différents mondes.

Ces technologies sont regroupées sous plusieurs modules distincts :

• Localserver : un mini serveur web local ayant le rôle de cache de contenu qui intercepte et gère les accès aux ressources (html, images, css…) en mode sans connexion au serveur ;
• Database : une base de données relationnelle SQL locale (moteur SQLlite) accessible par le navigateur qui stocke les données générées par l'utilisateur ;
• Worker pool : un outil de synchronisation qui assure la communication entre les deux premiers composants et la mise à jour des données une fois la connexion au serveur distant rétablie. En outre, il permet l'exécution du JavaScript en tâche de fond. Ces scripts s'exécutant en mode asynchrone, ne bloquent pas l'interface utilisateur ce qui améliore considérablement les performances de l'application.

III-A. Initialisation du kit de développement▲

<script type="text/javascript" src="http://code.google.com/apis/gears/tools/gears_init.js"></script>

if (!window.google || !google.gears) {
    alert("merci d'installer l'extension google gears");
    window.open("http://gears.google.com/?action=install&message=Mon+message+d%E2%80%99accueil >&return=http://www.monsite.com", "_blank");
    return;
}

III-B. Création de la factory▲

// pour instancier la base de données
var db = google.gears.factory.create('beta.database', '1.0');

// pour instancier le serveur de cache local
var localServer = google.gears.factory.create('beta.localserver, '1.1');

III-C. Zoom sur les différents modules proposés▲

var db = google.gears.factory.create('beta.database', '1.1');

db.open('twitygears');
db.execute('create table if not exists twitmsg (data TEXT, timestamp INT)');

// insertion
db.execute('INSERT INTO twitmsg VALUES (?, ?)', [message, currTime]);

// sélection
var rs = db.execute('SELECT * FROM twitmsg ORDER BY timestamp');

while (rs.isValidRow()) {
    alert(rs.field(0) + " correspond à " + rs.fieldName(0));
    rs.next();
}
rs.close();

var request = google.gears.factory.create('beta.httprequest', '1.0');
request.open('GET', '/index.html');
request.onreadystatechange = function() {
  if (request.readyState == 4) {
    console.write(request.responseText);
  }
};
request.send();

// instanciation de la classe localserveur
var localSrv = google.gears.factory.create('beta.localeserver', '1.1') ;

// création d'un conteneur
var store = localServer.createStore('stockage');

var localServer = google.gears.factory.create('beta.localserver', '1.1');
var store = localServer.createStore('stockage');

var filesToCapture = [
  location.pathname,
  'index.js',
  'style.css'
];

function captureCallback(url, success, captureId) {
  alert(url + 'captured: ' + success ? 'success' : 'failure');
}

int captureId = store.capture(filesToCapture, captureCallback);

{
// version du format du fichier manifest
  "betaManifestVersion": 1,

// version des ressources contenues dans ce manifest
  "version": "v1.0",

// les url à mettre dans le cache
  "entries": [
    { "url": "managed_store.html",
      "src": "managed_store_v1.html" },
    { "url": "managed_store.js",
      "src": "managed_store_v1.js" },
    { "url": "managed_store_demo_utils.js" },
    { "url": "sample.css", "src": "../styles.css" },
    { "url": "sample.js", "src": "../index.js" },
    { "url": "gears_init.js", "src": "../gears_init.js" } ]
}

// instanciation de la classe timer
var timer = google.gears.factory.create("beta.timer", "1.0");

var timer = google.gears.factory.create("beta.timer", "1.0");
timer.setTimeout(checkEmails, 42000);

// instanciation de la classe workerpool
var wp = google.gears.factory.create('beta.workerpool', '1.1') ;

var wp = google.gears.factory.create('beta.workerpool', '1.1') ;

// fonction appelée de la réception d'un message dans la file d'attente
wp.onmessage = function(a, b, message) {
    alert('Message reçu ' + message.sender + ': ' + message.text);
}

function evalHandler(msg, sender) {
    var result = eval(msg);
    google.gears.workerPool.sendMessage(String(result), sender)
}
// creation du 'producteur'
var workerCode = String(evalHandler) + 'google.gears.workerPool.onmessage = evalHandler;';
var workerId = wp.createWorker(workerCode);

// envoie un message
wp.sendMessage('salut', workerId);

Google fait un cadeau extraordinaire à tous les développeurs d'un framework léger et lève une des limitations critiques des applications Web. Bien que disponible en version bêta, cette boîte à outils bénéficie déjà d'une certaine maturité. Son avenir est très prometteur de par les potentialités offertes comme nous avons pu le constater dans les exemples présentés.

Nous pouvons encore aller plus loin en regardant les prémices des futures applications de type RIA (Rich Internet Application) intégrant complètement Google Gears dans leur système :

• Google Widget Toolkit : le framework de développement Java de Google intègre directement l'API de Google Gears ;
• Mozilla Xulrunner : la couche basse de Firefox permettant de développer ses propres applications web directement en tant qu'application de type client lourd est de facto utilisable avec Google Gears.

Google Gears devient incontournable pour beaucoup de sites Internet désirant toujours être de plus en plus disponibles pour les utilisateurs. Nous pouvons aussi nous demander l'intérêt d'une telle technologie quand on sait que presque tout le monde dispose d'une connexion permanente à Internet. Les applications qui trouvent le plus de potentiel dans la gestion du mode « offline » ne seraient-elles pas dans les machines à haute mobilité ? Quelque chose me dit que le nombre de sites supportant Google Gears va vite augmenter dans les prochains mois. Êtes-vous prêt de votre côté à intégrer Google Gears dans les fonctionnalités que vous proposez sur votre site ?

Pour le mot de la fin, je vous poserais la question aventureuse : qu'aimeriez-vous que votre navigateur préféré puisse faire, sortant du cadre strict de l'application cliente qui affiche des contenus Web ? Voilà le réel enjeu de Google Gears. Alors n'hésitez pas, participez et communiquez vos idées à la communauté.

[1] http://www.opensource.org/licenses/bsd-license.php
[2] http://code.google.com/apis/gears/
[3] http://www.sqlite.org/
[4] http://code.google.com/apis/gears/api_database.html
[5] http://code.google.com/apis/gears/api_httprequest.html
[6] http://code.google.com/apis/gears/api_localserver.html
[7] http://code.google.com/apis/gears/api_timer.html
[8] http://code.google.com/apis/gears/api_workerpool.html
[9] http://www.iosart.com/blog/2007/06/05/install-google-gears-in-a-xulrunner-app-in-3-quick-steps/

Mourad Lafer est ingénieur d'étude senior, architecte en développement pour EDIS Consulting.

Maxime Alexandre est chef de projet et ingénieur d'étude spécialisé dans les technologies Web.

EDIS Consulting