le web offline & les apis de contrôle javascript

Le Web Offline& les APIs de contrôle Javascript

Willy Leloutre - @wleloutrelundi 16 septembre 13

PréambuleAppCache, LocalStorage, SessionStorage, indexedDb, les APIs HTML5 qui ne déconnectent «jamais» !

Quelles sont les avantages et limites ?

Quels sont les usages actuels et à venir ?

lundi 16 septembre 13

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 HTML5Sur 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 configuration 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 Polyfill pour Internet Explorer «LT IE8»! http://bestiejs.github.io/json3/


http://bestiejs.github.io/json3/

http://bestiejs.github.io/json3/

Cas d’utilisation

Twitter, avec le stockage du message en cours de rédaction

Les préférence d'affichage pour une interface d’administration

...


Can I Use Web storage ?


Application Cache


Comment ça fonctionne ?

En exploitant un cache spécifique permettant de stocker des ressources consultables ultérieurement.

En anticipant les actions nécessaires ou non en offline (pages statiques, images, vidéos, ...)

En re-synchronisant votre web app une fois la connection retrouvée


En pratiqueif(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 connectionfunction 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 manifestLe manifeste est un simple fichier listant les autres ressources nécessaires à la bonne exécution de l'application web en mode déconnecté.

CACHE MANIFEST

# Version 2012-1

index.htmlinfo.html

js/script.jscss/styles.cssimg/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="offline.appcache">

Dans le fichier .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 fichier du manifeste change

Le cache est modifié 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érification

DOWNLOADING en phase de téléchargement

UPDATEREADY mise à jour prête

OBSOLETE cache marqué comme obsolète

window.applicationCache.status


Les événementsonchecking vérification en cours (premier déclenché)

onupdate le manifeste n'a pas bougé

ondownloading téléchargement du manifeste

onprogress téléchargement des fichiers

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érification 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/


http://developers.whatwg.org/

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 offline.






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 !


http://127.0.0.1

http://127.0.0.1

Précaution supplémentaire

La solution est peut-être de modifier le fichier « .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


WebSql

Les specification 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


IndexedDbA 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


Exemple


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://appcachefacts.info/

http://www.alsacreations.com/article/lire/1402-web-storage-localstorage-sessionstorage.html










http://appcachefacts.info

http://appcachefacts.info





MERCI !

Willy Leloutre - @wleloutreDirecteur Technique - La Mygale à Chaussette

Digital agency


le web offline & les apis de contrôle javascript

Technology