Your SlideShare is downloading. ×
0
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Le Web Offline & les APIs de contrôle Javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Le Web Offline & les APIs de contrôle Javascript

581

Published on

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

No Downloads
Views
Total Views
581
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
19
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Le Web Offline & les APIs de contrôle Javascript Willy Leloutre - @wleloutre lundi 16 septembre 13
  • 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. 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. Le Web Storage lundi 16 septembre 13
  • 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. Le Web Storage 2010 - 20** ! lundi 16 septembre 13
  • 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. 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. En pratique localStorage.setItem("name", "will"); var foo = localStorage.getItem("name"); console.log(foo); localStorage.removeItem('name'); localStorage.clear(); lundi 16 septembre 13
  • 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. 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. Can I Use Web storage ? lundi 16 septembre 13
  • 13. Application Cache lundi 16 septembre 13
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Exemple http://developers.whatwg.org/ lundi 16 septembre 13
  • 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. 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. 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. Can I Use AppCache ? lundi 16 septembre 13
  • 29. WebSQL lundi 16 septembre 13
  • 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. Can I Use WebSql ? lundi 16 septembre 13
  • 32. IndexedDb lundi 16 septembre 13
  • 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. IndexedDb chez le W3C lundi 16 septembre 13
  • 35. Exemple lundi 16 septembre 13
  • 36. Can I Use IndexedDb ? lundi 16 septembre 13
  • 37. Conclusion lundi 16 septembre 13
  • 38. Web Storage, AppCache sont dès à présent utilisables et leur potentiel dépend de votre créativité ! lundi 16 septembre 13
  • 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. MERCI ! Willy Leloutre - @wleloutre Directeur Technique - La Mygale à Chaussette Digital agency lundi 16 septembre 13

×