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

Transcript

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

   View Slide

2. View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

    View Slide

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
    

    View Slide

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É
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

30. © SQLI GROUP – 2012
    STOCKAGE DES DONNÉES
    +FIREFOX (CONSOLE FIREBUG)
    +CHROME
    30
    LOCAL STORAGE : OUTILS
    

    View Slide

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
    

    View Slide

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

    View Slide

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…
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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É
    

    View Slide

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
    

    View Slide

42. © SQLI GROUP – 2012
    @richard_antoine
    arichard@sqli.com
    

    View Slide