Déconnecter son application web

Déconnecter son application web

Retour d'expérience sur les solutions HTML5 permettant de réaliser des applications web accessibles hors connexion.

Session présentée au Google Devfest Nantes 2012

0d67d4ac82fb031ff815245ae00e1a97?s=128

Antoine RICHARD

November 09, 2012
Tweet

Transcript

  1. © SQLI GROUP – 2012 DÉCONNECTER SON APPLICATION WEB

  2. None
  3. POSSIBILITÉS 4 CACHE APPLICATIF 9 STOCKAGE DES DONNÉES 21 EN

    LIGNE OU HORS LIGNE ? 33 CONCLUSION 39
  4. © SQLI GROUP – 2012 4 EXEMPLES POSSIBILITÉS GMAIL MOBILE

    LINKEDIN MOBILE LANYRD MOBILE
  5. © SQLI GROUP – 2012 POSSIBILITÉS +TOLÉRER LES COUPURES OU

    L'ABSENCE DE CONNEXION +MISE À JOUR DE L’APPLICATION WEB SEULEMENT SI NÉCESSAIRE +OPTIMISATION DU RAFRAICHISSEMENT DES DONNÉES +SAISIE HORS-LIGNE ET SYNCHRONISATION ULTÉRIEURE 5 OBJECTIFS
  6. © SQLI GROUP – 2012 POSSIBILITÉS +CONSERVER LOCALEMENT L'APPLICATION WEB

    +STOCKER LOCALEMENT LES DONNÉES MANIPULÉES +CONNAÎTRE L'ÉTAT DE LA CONNEXION +SYNCHRONISER LES DONNÉES AVEC LE SERVEUR 6 PROBLÉMATIQUES
  7. © SQLI GROUP – 2012 POSSIBILITÉS 7 INGRÉDIENTS +APPLICATION CACHE

    +CLIENT-SIDE STORAGE +NAVIGATOR.ONLINE
  8. POSSIBILITÉS 4 CACHE APPLICATIF 9 STOCKAGE DES DONNÉES 21 EN

    LIGNE OU HORS LIGNE ? 33 CONCLUSION 39
  9. © SQLI GROUP – 2012 CACHE APPLICATIF +MISE EN CACHE

    DES RESSOURCES STATIQUES CACHE MAITRISÉ ET PERSISTANT INTÉRÊT MÊME CONNECTÉ : • AMÉLIORATION DES PERFORMANCES • DIMINUTION DE LA CHARGE SERVEUR SUPPORT : 9 HTML5 APPLICATION CACHE
  10. © SQLI GROUP – 2012 CACHE APPLICATIF 10 APERÇU CACHE

    MANIFEST # 2012-08-22: v2 CACHE: favicon.ico script.js stylesheet.css NETWORK: * FALLBACK: /online /offline.html mon-appli.appcache <html manifest="mon-appli.appcache"> ... </html> index.html +A SERVIR AVEC LE TYPE MIME : text/cache-manifest +ET LE HEADER : cache-control: no-cache
  11. © SQLI GROUP – 2012 CACHE APPLICATIF +LES PAGES SPÉCIFIANT

    LE MANIFEST SONT CACHÉES AUTOMATIQUEMENT +NE PAS DÉCLARER LE MANIFEST LUI-MÊME… 11 SECTION CACHE CACHE MANIFEST CACHE: scripts/app.js lib/jquery-1.8.2.min.js styles/layout.css images/sqli-logo.png
  12. © SQLI GROUP – 2012 CACHE APPLICATIF 12 SECTION NETWORK

    CACHE MANIFEST NETWORK: * +LISTE DES RESSOURCES À TÉLÉCHARGER DEPUIS LE SERVEUR +TOUTE RESSOURCE NON MISE EN CACHE NE SERA PAS CHARGÉE WILDCARD ( * ) FORTEMENT RECOMMANDÉ
  13. © SQLI GROUP – 2012 CACHE APPLICATIF +PAIRES D’URL +RESSOURCES

    DE REMPLACEMENT EN CAS D’INDISPONIBILITÉ 13 SECTION FALLBACK CACHE MANIFEST FALLBACK: /img/profiles/ /imgs/profiles/placeholder.png *.html /fallback.html
  14. © SQLI GROUP – 2012 CACHE APPLICATIF +LE CACHE APPLICATIF

    NE SE MET À JOUR QUE SI LE FICHIER MANIFEST ÉVOLUE +MISE À JOUR DES RESSOURCES RÉFÉRENCÉES ? MAINTENIR UN NUMÉRO DE VERSION DANS UN COMMENTAIRE 14 COMPORTEMENT CACHE MANIFEST # 2012-08-22: v2
  15. © SQLI GROUP – 2012 CACHE APPLICATIF +LE TÉLÉCHARGEMENT S’EFFECTUE

    EN ARRIÈRE PLAN +ÉVÉNEMENTS DE SUIVI CHECKING, NOUPDATE, DOWNLOADING, PROGRESS, UPDATEREADY... +LA MISE À JOUR DU CACHE N’EST EFFECTIVE QU’À PARTIR DE LA SECONDE VISITE… 15 PRINCIPE DE MISE À JOUR
  16. © SQLI GROUP – 2012 +PRISE EN COMPTE IMMÉDIATE D’UNE

    NOUVELLE VERSION 16 FORCER LA MISE À JOUR CACHE APPLICATIF // application cache updating window.applicationCache.addEventListener("updateready", function(e) { if (window.applicationCache.status === window.applicationCache.UPDATEREADY) { // An update is available: swap and reload window.applicationCache.swapCache(); if (confirm("An update of the application is available.\nDownload it now ?")) { window.location.reload(); } } });
  17. © SQLI GROUP – 2012 CACHE APPLICATIF +A LA MAIN

    +VIA MODERNIZR 17 DÉTECTION function isAppCacheSupported() { return !!window.applicationCache; } if (Modernizr.applicationcache) { // supporté } else { // non supporté }
  18. © SQLI GROUP – 2012 CACHE APPLICATIF +GÉNÉRATION HTTP://WESTCIV.COM/TOOLS/MANIFESTR HTTP://MANIFESTED.DREGSOFT.COM

    HTTPS://GITHUB.COM/JAMESGPEARCE/CONFESS +VALIDATION HTTP://MANIFEST-VALIDATOR.COM 18 OUTILS
  19. © SQLI GROUP – 2012 CACHE APPLICATIF +FIREFOX : about:cache?device=offline

    +CHROME : chrome://appcache-internals 19 OUTILS
  20. POSSIBILITÉS 4 CACHE APPLICATIF 9 STOCKAGE DES DONNÉES 21 EN

    LIGNE OU HORS LIGNE ? 33 CONCLUSION 39
  21. © SQLI GROUP – 2012 STOCKAGE DES DONNÉES +STANDARDISATION +PERSISTANCE

    +CLOISONNEMENT PAR ORIGINE •protocole + sous-domaine + domaine + port 21 HTML5
  22. © SQLI GROUP – 2012 STOCKAGE DES DONNÉES +FILE SYSTEM

    API +WEB SQL DATABASE +INDEXED DB +WEB STORAGE 22 L’EMBARRAS DU CHOIX
  23. © SQLI GROUP – 2012 STOCKAGE DES DONNÉES +LECTURE /

    ÉCRITURE DE FICHIERS ET DOSSIERS •FileReader, FileWriter - ENCORE PEU RÉPANDU : - PEU APPROPRIÉ À NOTRE BESOIN 23 FILE SYSTEM API
  24. © SQLI GROUP – 2012 STOCKAGE DES DONNÉES +BASE DE

    DONNÉES RELATIONNELLE ET TRANSACTIONNELLE - SUPPORT : - SPÉCIFICATION STOPPÉE LE 18 NOVEMBRE 2010 24 WEB SQL DATABASE
  25. © SQLI GROUP – 2012 STOCKAGE DES DONNÉES +STOCKAGE DE

    TYPE NOSQL +ASYNCHRONE +TRANSACTIONNEL +ADAPTÉ AUX GROS VOLUMES DE DONNÉES •Recherche, indexation - VERBEUX - SUPPORT : 25 INDEXED DB
  26. © SQLI GROUP – 2012 STOCKAGE DES DONNÉES +STOCKAGE DE

    TYPE CLÉ-VALEUR SESSION DE NAVIGATION : SESSION STORAGE PERSISTANT : LOCAL STORAGE +SIMPLE D’UTILISATION +DISPONIBILITÉ : - SYNCHRONE - CHAINES DE CARACTÈRES UNIQUEMENT - NON DESTINÉ À ÊTRE RECHERCHÉ 26 WEB STORAGE
  27. © SQLI GROUP – 2012 STOCKAGE DES DONNÉES localStorage.setItem(key, value)

    localStorage.getItem(key) localStorage.removeItem(key) localStorage.length localStorage.key(index) localStorage.clear() 27 LOCAL STORAGE : UTILISATION
  28. © SQLI GROUP – 2012 STOCKAGE DES DONNÉES 28 LOCAL

    STORAGE : STOCKER DES OBJETS +EXTENSION DE L’OBJET STORAGE +ABSTRACTIONS Storage.prototype.setObject = Storage.prototype.setObject || function(key, value) { this.setItem(key, JSON.stringify(value)); }; Storage.prototype.getObject = Storage.prototype.getObject || function(key) { var value = this.getItem(key); return value && JSON.parse(value); };
  29. © SQLI GROUP – 2012 STOCKAGE DES DONNÉES +A LA

    MAIN +VIA MODERNIZR 29 LOCAL STORAGE : DÉTECTION function islocalStorageSupported() { try { return 'localStorage' in window && window['localStorage'] !== null; } catch(e){ return false; } } if (Modernizr.localstorage) { // supporté } else { // non supporté }
  30. © SQLI GROUP – 2012 STOCKAGE DES DONNÉES +FIREFOX (CONSOLE

    FIREBUG) +CHROME 30 LOCAL STORAGE : OUTILS
  31. © SQLI GROUP – 2012 STOCKAGE DES DONNÉES +CACHE DE

    DONNÉES LOCAL •MÉCANISMES CLASSIQUES DE MISE À JOUR VÉRIFICATION PÉRIODIQUE SI DE NOUVELLES DONNÉES SONT DISPONIBLES LORSQUE LA DURÉE DE VIE DES DONNÉES LOCALES EST EXPIRÉE (TTL) +STOCKAGE TEMPORAIRE ET SYNCHRO ULTÉRIEURE •DÉFINITION DE STRATÉGIES DE SYNCHRONISATION HORODATAGES, VERSIONING ID GÉNÉRÉ CÔTÉ CLIENT 31 PROBLÉMATIQUES DE SYNCHRONISATION
  32. POSSIBILITÉS 4 CACHE APPLICATIF 9 STOCKAGE DES DONNÉES 21 EN

    LIGNE OU HORS LIGNE ? 33 CONCLUSION 39
  33. © SQLI GROUP – 2012 EN LIGNE OU HORS LIGNE

    ? 33 SPÉCIFICATION HTML5 if (navigator.onLine) { // je suis en ligne } else { // je suis hors ligne } window.addEventListener("online", function(e) { // je suis désormais en ligne }, false); window.addEventListener("offline", function(e) { // je suis désormais hors ligne }, false); +API SYMPATHIQUE MAIS…
  34. © SQLI GROUP – 2012 EN LIGNE OU HORS LIGNE

    ? +QUE SIGNIFIE « ÊTRE EN LIGNE » ? CONNECTÉ À UN RÉSEAU ? TRAVAILLER HORS CONNEXION ? +QUE DIT LA SPEC’ ? 34 PROBLEMATIQUE DE DÉTECTION
  35. 35 http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online

  36. © SQLI GROUP – 2012 EN LIGNE OU HORS LIGNE

    ? +MA WEB APP PEUT-ELLE COMMUNIQUER AVEC SON BACK-END ? PING DU SERVEUR PÉRIODIQUE VIA AJAX 36 THE PRAGMATIC PROGRAMMER
  37. © SQLI GROUP – 2012 EN LIGNE OU HORS LIGNE

    ? 37 PLUGIN JQUERY SERVER OBSERVER +PERMET D'ÊTRE NOTIFIÉ DES CHANGEMENTS DE DISPONIBILITÉ DU SERVEUR + DEUX MÉCANISMES UTILISÉS PING PÉRIODIQUE DU SERVEUR VIA UNE REQUÊTE HEAD OBSERVATION DE LA RÉUSSITE (OU NON) DES REQUÊTES AJAX ÉMISES PAR L’APPLICATION https://github.com/antoine-richard/jquery-server-observer $.serverObserver.enable({ url: "/ping", frequency: 5000, onServerOnline: function() { // the server is available }, onServerOffline: function() { // the server is unavailable } });
  38. POSSIBILITÉS 4 CACHE APPLICATIF 9 STOCKAGE DES DONNÉES 21 EN

    LIGNE OU HORS LIGNE ? 33 CONCLUSION 39
  39. © SQLI GROUP – 2012 CONCLUSION 39 SCÉNARIO : APPLICATION

    WEB DE MISE EN RAYON POUR GRANDE SURFACE Application prête. Sauvegarde automatique activée Placement des produits téléchargé avec succès Temps Plus tard, hors connexion, le chef de rayon modifie le placement des produits Le serveur est accessible Une fois la connexion retrouvée, la base de donnée serveur est mise à jour Serveur non joignable, sauvegarde locale du rayon Le placement des produits est désormais sauvegardé sur le serveur Réouverture de l’application suite à une batterie épuisée, toujours hors ligne Serveur non joignable, chargement du rayon depuis la base locale Serveur non joignable, sauvegarde locale du rayon ← ← ← ← ← ←
  40. © SQLI GROUP – 2012 CONCLUSION +UNE APPLICATION WEB DOIT

    POUVOIR SUPPORTER LES COUPURES DE RÉSEAU ET ÊTRE UTILISABLE HORS LIGNE +UNE APPLICATION WEB PEUT OPTIMISER SES TÉLÉCHARGEMENTS APPLICATIFS ET DE DONNÉES +HTML5 PERMET D’ADRESSER CES PROBLÉMATIQUES DÈS AUJOURD’HUI, GRÂCE À L’UTILISATION CONJOINTE DE CACHE APPLICATIF ET DE STOCKAGE CÔTÉ CLIENT 40 UN VRAI PLUS POUR LA MOBILITÉ
  41. © SQLI GROUP – 2012 CONCLUSION +WHATWG.ORG/SPECS/WEB-APPS/CURRENT-WORK/MULTIPAGE/OFFLINE.HTML +W3.ORG/TR/WEBSTORAGE +W3.ORG/TR/INDEXEDDB +APPCACHEFACTS.INFO

    +HTML5ROCKS.COM +DIVEINTOHTML5.INFO +CANIUSE.COM +MODERNIZR.COM 41 RESSOURCES
  42. © SQLI GROUP – 2012 @richard_antoine arichard@sqli.com