Déconnecter son application web

Slide 1

Slide 1 text

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Slide 5

Slide 5 text

© 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

Slide 6

Slide 6 text

© 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

Slide 7

Slide 7 text

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

© 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

Slide 10

Slide 10 text

© 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 ... index.html +A SERVIR AVEC LE TYPE MIME : text/cache-manifest +ET LE HEADER : cache-control: no-cache

Slide 11

Slide 11 text

© 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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

© 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

Slide 14

Slide 14 text

© 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

Slide 15

Slide 15 text

© 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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

© 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

Slide 19

Slide 19 text

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Slide 22

Slide 22 text

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

Slide 26

Slide 26 text

© 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

Slide 27

Slide 27 text

© 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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Slide 31

Slide 31 text

© 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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

© 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