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

1. © SQLI GROUP – 2012 DÉCONNECTER SON APPLICATION WEB
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