le web offline & les apis de contrôle javascript
Post on 19-May-2015
555 Views
Preview:
TRANSCRIPT
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
lundi 16 septembre 13
Le Web Storage
lundi 16 septembre 13
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.
lundi 16 septembre 13
Le Web Storage 2010 - 20** !
lundi 16 septembre 13
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
lundi 16 septembre 13
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.
lundi 16 septembre 13
En pratique
localStorage.setItem("name", "will");
var foo = localStorage.getItem("name");console.log(foo);
localStorage.removeItem('name');
localStorage.clear();
lundi 16 septembre 13
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/
lundi 16 septembre 13
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
...
lundi 16 septembre 13
Can I Use Web storage ?
lundi 16 septembre 13
Application Cache
lundi 16 septembre 13
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
lundi 16 septembre 13
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»
lundi 16 septembre 13
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;}
lundi 16 septembre 13
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
lundi 16 septembre 13
Declarer le Manifest
Dans le DOM :<!doctype html><html lang="fr" manifest="offline.appcache">
Dans le fichier .htaccess :AddType text/cache-manifest .appcache
lundi 16 septembre 13
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
lundi 16 septembre 13
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 :
lundi 16 septembre 13
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
lundi 16 septembre 13
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
lundi 16 septembre 13
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
lundi 16 septembre 13
Exemple http://developers.whatwg.org/
lundi 16 septembre 13
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.
lundi 16 septembre 13
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 !
lundi 16 septembre 13
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>
lundi 16 septembre 13
Can I Use AppCache ?
lundi 16 septembre 13
WebSQL
lundi 16 septembre 13
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
lundi 16 septembre 13
Can I Use WebSql ?
lundi 16 septembre 13
IndexedDb
lundi 16 septembre 13
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
lundi 16 septembre 13
IndexedDb chez le W3C
lundi 16 septembre 13
Exemple
lundi 16 septembre 13
Can I Use IndexedDb ?
lundi 16 septembre 13
Conclusion
lundi 16 septembre 13
Web Storage, AppCache sont dès à présent utilisables et leur potentiel dépend de votre
créativité !
lundi 16 septembre 13
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
lundi 16 septembre 13
MERCI !
Willy Leloutre - @wleloutreDirecteur Technique - La Mygale à Chaussette
Digital agency
lundi 16 septembre 13
top related