Le Web Offline & les APIs de contrôle Javascript

918 views
816 views

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
918
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
23
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

×