Déconnecter son application web

POSSIBILITÉS 4 CACHE APPLICATIF 9 STOCKAGE DES DONNÉES 21 EN
LIGNE OU HORS LIGNE ? 33 CONCLUSION 39

© SQLI GROUP – 2012 4 EXEMPLES POSSIBILITÉS GMAIL MOBILE
LINKEDIN MOBILE LANYRD MOBILE

© 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

© 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

© SQLI GROUP – 2012 POSSIBILITÉS 7 INGRÉDIENTS +APPLICATION CACHE
+CLIENT-SIDE STORAGE +NAVIGATOR.ONLINE

© 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

© 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

© 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

© 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É

© 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

© 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

© 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

© 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(); } } });

© 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é }

© 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

© SQLI GROUP – 2012 CACHE APPLICATIF +FIREFOX : about:cache?device=offline
+CHROME : chrome://appcache-internals 19 OUTILS

© SQLI GROUP – 2012 STOCKAGE DES DONNÉES +STANDARDISATION +PERSISTANCE
+CLOISONNEMENT PAR ORIGINE •protocole + sous-domaine + domaine + port 21 HTML5

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

© 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

© 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

© 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

© 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

© 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

© 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); };

© 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é }

© 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

© 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…

? +QUE SIGNIFIE « ÊTRE EN LIGNE » ? CONNECTÉ À UN RÉSEAU ? TRAVAILLER HORS CONNEXION ? +QUE DIT LA SPEC’ ? 34 PROBLEMATIQUE DE DÉTECTION

35 http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html#event-online

? +MA WEB APP PEUT-ELLE COMMUNIQUER AVEC SON BACK-END ? PING DU SERVEUR PÉRIODIQUE VIA AJAX 36 THE PRAGMATIC PROGRAMMER

? 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 } });

© 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 ← ← ← ← ← ←

© 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É

© 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

Déconnecter son application web

Déconnecter son application web

More Decks by Antoine RICHARD

Other Decks in Programming

Featured

Transcript