Le Web Offline
& 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 le...
Pourquoi ?
Pour stocker des
données dans le
navigateur
Pour utiliser vos web
apps en mode
déconnecté
Pour améliorer
l’expé...
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 ...
Le Web Storage 2010 - 20** !
lundi 16 septembre 13
Avant HTML5
Sur Internet Explorer 5,
il y avait userData.
Le Web Storage existait donc
avant HTML5 !
Mais...Internet Explo...
Cookies vs WebStorage
Un stockage « durable »
Une API très simple d’utilisation
Une plus grande capacité de stockage (5Mo ...
En pratique
localStorage.setItem("name", "will");
var foo = localStorage.getItem("name");
console.log(foo);
localStorage.r...
Web Storage & Json
var personne = { yeux:"rouge", cheveux: "blond" };
localStorage.setItem("mapersonne",JSON.stringify(per...
Cas d’utilisation
Twitter, avec le stockage du message en cours de
rédaction
Les préférence d'affichage pour une interface
...
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 pratique
if(navigator.onLine) {
alert("Connecté !");
} else {
alert("Déconnecté :(");
}
Attention sur desktop, nous pou...
Surveiller la connection
function goOnline() {
alert("Passage en connecté");
}
function goOffline() {
alert("Passage en déc...
Le manifest
Le manifeste est un simple fichier listant les autres
ressources nécessaires à la bonne exécution de
l'applicat...
Declarer le Manifest
Dans le DOM :
<!doctype html>
<html lang="fr" manifest="offline.appcache">
Dans le fichier .htaccess :
...
Cache, Network ou Fallback ?
CACHE : (par défaut) les fichiers mis en cache
explicitement
NETWORK : fichiers nécessitant à l...
Rafraîchir le cache
L'utilisateur efface volontairement le cache
Le fichier du manifeste change
Le cache est modifié par Jav...
Les statuts
UNCACHED pas de cache associé
IDLE sans activité, le cache n’est pas marqué comme obsolète
CHECKING en cours d...
Les événements
onchecking vérification en cours (premier déclenché)
onupdate le manifeste n'a pas bougé
ondownloading téléc...
Les méthodes
update() déclenche le processus de vérification et de
mise à jour du cache
swapCache() passe au cache plus réc...
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...
Attention !
Sur desktop, nous pouvons être connecté au réseau mais pas au
web, auquel cas, navigator.online() retourne « t...
Précaution supplémentaire
La solution est peut-être de modifier le fichier « .htaccess » pour le
faire expirer à la consulta...
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 p...
Can I Use WebSql ?
lundi 16 septembre 13
IndexedDb
lundi 16 septembre 13
IndexedDb
A mi-chemin entre Web Storage et Web SQL, IndexedDb propose
un mappage simple, mais offre en plus une compatibil...
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-
doucheb...
MERCI !
Willy Leloutre - @wleloutre
Directeur Technique - La Mygale à Chaussette
Digital agency
lundi 16 septembre 13
Prochain SlideShare
Chargement dans…5
×

Le Web Offline & les APIs de contrôle Javascript

988 vues

Publié le

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
988
Sur SlideShare
0
Issues des intégrations
0
Intégrations
15
Actions
Partages
0
Téléchargements
23
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Le Web Offline & les APIs de contrôle Javascript

  1. 1. Le Web Offline & les APIs de contrôle Javascript Willy Leloutre - @wleloutre lundi 16 septembre 13
  2. 2. 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 ? lundi 16 septembre 13
  3. 3. 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
  4. 4. Le Web Storage lundi 16 septembre 13
  5. 5. 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
  6. 6. Le Web Storage 2010 - 20** ! lundi 16 septembre 13
  7. 7. 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 lundi 16 septembre 13
  8. 8. 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
  9. 9. En pratique localStorage.setItem("name", "will"); var foo = localStorage.getItem("name"); console.log(foo); localStorage.removeItem('name'); localStorage.clear(); lundi 16 septembre 13
  10. 10. 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
  11. 11. 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
  12. 12. Can I Use Web storage ? lundi 16 septembre 13
  13. 13. Application Cache lundi 16 septembre 13
  14. 14. 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
  15. 15. 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» lundi 16 septembre 13
  16. 16. 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; } lundi 16 septembre 13
  17. 17. Le manifest Le 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.html info.html js/script.js css/styles.css img/image.jpg http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js lundi 16 septembre 13
  18. 18. 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
  19. 19. 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
  20. 20. 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
  21. 21. 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
  22. 22. Les événements onchecking 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
  23. 23. 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
  24. 24. Exemple http://developers.whatwg.org/ lundi 16 septembre 13
  25. 25. 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
  26. 26. 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
  27. 27. 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
  28. 28. Can I Use AppCache ? lundi 16 septembre 13
  29. 29. WebSQL lundi 16 septembre 13
  30. 30. 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
  31. 31. Can I Use WebSql ? lundi 16 septembre 13
  32. 32. IndexedDb lundi 16 septembre 13
  33. 33. 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 lundi 16 septembre 13
  34. 34. IndexedDb chez le W3C lundi 16 septembre 13
  35. 35. Exemple lundi 16 septembre 13
  36. 36. Can I Use IndexedDb ? lundi 16 septembre 13
  37. 37. Conclusion lundi 16 septembre 13
  38. 38. Web Storage, AppCache sont dès à présent utilisables et leur potentiel dépend de votre créativité ! lundi 16 septembre 13
  39. 39. 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
  40. 40. MERCI ! Willy Leloutre - @wleloutre Directeur Technique - La Mygale à Chaussette Digital agency lundi 16 septembre 13

×