Le Web Offline & les APIs de contrôle Javascript

Le Web Ofﬂine
& les APIs de contrôle Javascript
Willy Leloutre - @wleloutre
lundi 16 septembre 13

Préambule
AppCache, LocalStorage,
SessionStorage, indexedDb, les
APIs HTML5 qui ne déconnectent
«jamais» !
Quelles sont les avantages et
limites ?
Quels sont les usages actuels et à
venir ?

Pourquoi ?
Pour stocker des
données dans le
navigateur
Pour utiliser vos web
apps en mode
déconnecté
Pour améliorer
l’expérience des
utilisateurs nomades

Le Web Storage

Le Web Storage (Dom Storage) c’est...
Session Storage : stockage de session
Local Storage : stockage local « durable »
Nb : La plupart des navigateurs utilisent SqLite pour
stocker ces données.

Le Web Storage 2010 - 20** !

Avant HTML5
Sur Internet Explorer 5,
il y avait userData.
Le Web Storage existait donc
avant HTML5 !
Mais...Internet Explorer avait
une longueur d’avance
alors !...
http://diveintohtml5.info/
storage.html

Cookies vs WebStorage
Un stockage « durable »
Une API très simple d’utilisation
Une plus grande capacité de stockage (5Mo / domaine) ou
plus selon la conﬁguration du navigateur client
De meilleurs performances de chargement (3x à 5x plus rapide
qu’un cache natif)
Le Web Storage, est une nouvelle API qui a pour objectif
principal de corriger les défaillances rencontrées avec
l'utilisation des cookies.

En pratique
localStorage.setItem("name", "will");
var foo = localStorage.getItem("name");
console.log(foo);
localStorage.removeItem('name');
localStorage.clear();

Web Storage & Json
var personne = { yeux:"rouge", cheveux: "blond" };
localStorage.setItem("mapersonne",JSON.stringify(personne));
console.log(JSON.parse(localStorage.getItem("ma personne")));
Pour stocker des données plus complexes,
il faut les sérialiser avec Json.
Attention, pensez au Polyﬁll pour Internet Explorer «LT IE8»!
http://bestiejs.github.io/json3/

Cas d’utilisation
Twitter, avec le stockage du message en cours de
rédaction
Les préférence d'afﬁchage pour une interface
d’administration
...

Can I Use Web storage ?

Application Cache

Comment ça fonctionne ?
En exploitant un cache spéciﬁque permettant de
stocker des ressources consultables ultérieurement.
En anticipant les actions nécessaires ou non en ofﬂine
(pages statiques, images, vidéos, ...)
En re-synchronisant votre web app une fois la
connection retrouvée

En pratique
if(navigator.onLine) {
alert("Connecté !");
} else {
alert("Déconnecté :(");
}
Attention sur desktop, nous pouvons être connecté au
réseau mais pas au web, auquel cas, navigator.online
retourne «true»

Surveiller la connection
function goOnline() {
alert("Passage en connecté");
}
function goOffline() {
alert("Passage en déconnecté");
}
if(window.addEventListener {
window.addEventListener("online",goOnline,false);
window.addEventListener("offline",goOffline,false);
} else {
document.body.ononline = goOnline;
document.body.onoffline = goOffline;
}

Le manifest
Le manifeste est un simple ﬁchier listant les autres
ressources nécessaires à la bonne exécution de
l'application web en mode déconnecté.
CACHE MANIFEST
# Version 2012-1
index.html
info.html
js/script.js
css/styles.css
img/image.jpg
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js

Declarer le Manifest
Dans le DOM :
<!doctype html>
<html lang="fr" manifest="ofﬂine.appcache">
Dans le ﬁchier .htaccess :
AddType text/cache-manifest .appcache

Cache, Network ou Fallback ?
CACHE : (par défaut) les fichiers mis en cache
explicitement
NETWORK : fichiers nécessitant à l'utilisateur d'être
connecté, qui court-circuitent le cache quoi qu'il arrive
FALLBACK : ressources de repli en offline pour
remplacer des ressources online qui ne peuvent être
cachées

Rafraîchir le cache
L'utilisateur efface volontairement le cache
Le ﬁchier du manifeste change
Le cache est modiﬁé par JavaScript
Attention, le navigateur n'ira chercher des nouveaux
contenus que dans 3 situations :

Les statuts
UNCACHED pas de cache associé
IDLE sans activité, le cache n’est pas marqué comme obsolète
CHECKING en cours de vériﬁcation
DOWNLOADING en phase de téléchargement
UPDATEREADY mise à jour prête
OBSOLETE cache marqué comme obsolète
window.applicationCache.status

Les événements
onchecking vériﬁcation en cours (premier déclenché)
onupdate le manifeste n'a pas bougé
ondownloading téléchargement du manifeste
onprogress téléchargement des ﬁchiers
onupdateready mise à jour prête
oncached cache opérationnel
onobsolete cache obsolète effacé
onerror erreur quelconque

Les méthodes
update() déclenche le processus de vériﬁcation et de
mise à jour du cache
swapCache() passe au cache plus récent s'il est prêt
abort() arrêt des opérations

Exemple http://developers.whatwg.org/

Exemple : Gmail mobile
http://googlecode.blogspot.fr/2009/04/gmail-for-
mobile-html5-series-using.html
En 2009, Gmail pour mobile développé en
HTML5 dispose de l’API AppCache pour
fonctionner en ofﬂine.

Attention !
Sur desktop, nous pouvons être connecté au réseau mais pas au
web, auquel cas, navigator.online() retourne « true ».
Les tests nécessitent un serveur web (local).
Sur http://127.0.0.1 ça ne fonctionnera pas ! Il faut travailler sur un
domaine (ou localhost).
Le cache du Manifest est à part du cache navigateur, mais le
manifest lui même peut-être mis en cache dans le cache
"principal" du navigateur web !

Précaution supplémentaire
La solution est peut-être de modiﬁer le ﬁchier « .htaccess » pour le
faire expirer à la consultation du manifeste.
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/cache-manifest "access"
</IfModule>

Can I Use AppCache ?

WebSql
Les speciﬁcation ne sont plus maintenues
Le concept est rebasculé sur IndexedDB
Ce n'est pas vraiment du SQL mais plutôt un catalogue d'objet,
complexe à mettre en place, et mal supporté…
WebSQL est supporté pour les apps mobile hybrides

Can I Use WebSql ?

IndexedDb

IndexedDb
A mi-chemin entre Web Storage et Web SQL, IndexedDb propose
un mappage simple, mais offre en plus une compatibilité avec les
index du même type que ceux utilisés par les bases de données
relationnelles.
Par conséquent, la recherche d'objets correspondant à un champ
particulier est rapide, puisque vous n'avez pas à itérer manuellement
chaque objet.
https://developer.mozilla.org/fr/docs/IndexedDB/Using_IndexedDB

IndexedDb chez le W3C

Can I Use IndexedDb ?

Conclusion

Web Storage, AppCache sont dès à présent
utilisables et leur potentiel dépend de votre
créativité !

Quelques liens
http://www.html5rocks.com/fr/features/storage
http://alistapart.com/article/application-cache-is-a-
douchebag
http://diveintohtml5.info/storage.html
http://appcachefacts.info/
http://www.alsacreations.com/article/lire/1402-web-
storage-localstorage-sessionstorage.html

MERCI !
Willy Leloutre - @wleloutre
Directeur Technique - La Mygale à Chaussette
Digital agency

Le Web Offline & les APIs de contrôle Javascript

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Le Web Offline & les APIs de contrôle Javascript

Ähnlich wie Le Web Offline & les APIs de contrôle Javascript (20)

Mehr von Willy Leloutre

Mehr von Willy Leloutre (6)

Le Web Offline & les APIs de contrôle Javascript