Création d’une application gérant l’offline et le stockage

4,017 views
3,920 views

Published on

Techdays 2012

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,017
On SlideShare
0
From Embeds
0
Number of Embeds
1,178
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Welcome pack Davrous & Davca
  • Davrous
  • Davrous
  • Démo par le légendaire DavCa
  • T+5minDavCa
  • DavCA
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • T + 15 minDavRousConsole IIS  StopManifest dynamique avec console F12 ouverte + message dialog « voulez vous ? »
  • T + 20Davca
  • DavCa
  • DavCaDemo F12 avecDebug sur ImageProcessor.js et fonction getFile()
  • DavRous
  • DavRous
  • T + 30 minDavCa
  • T + 33 minDavRous
  • DavRous
  • DavRous
  • DavRous
  • T+38min
  • T+45 min
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • DavCa
  • T + 50 minDavRous
  • Création d’une application gérant l’offline et le stockage

    1. 1. Création d’une applicationgérant l’offline et le stockageclientDavid CATUHE - @deltakoshMicrosoft – davca@microsoft.comhttp://blogs.msdn.com/eternalcodingDavid ROUSSET - @davrousMicrosoft – davrous@microsoft.comhttp://blogs.msdn.com/davrous
    2. 2. Du web de présentation vers le web applicatif
    3. 3. Quelques fonctionnalités clés Accélération matérielle Audio/Vidéo CSS3 grid, flexible box ECMAScript 5 Multi-columns Geolocation Stockage client Websockets Drag’n’drop Webworkers Accès au système de fichiers Hit testing / touch / gestures Mode offline Canvas, SVG, animations Blobs …
    4. 4. DémonstrationPrésentation de l’application SnapX
    5. 5. Support du mode hors connexion
    6. 6. Mode offline Version du site téléchargée lorsque le site est en ligne Prérequis : Liste des ressources (HTML, CSS, JS, Images, etc.) Le navigateur détecte la connectivité et  Si en ligne :  Télécharge les ressources  Les garde synchronisées  Si hors ligne :  Indique dans le DOM le statut  Lève un événement si le statut change Le navigateur ne fait pas :  La sauvegarde de vos données  La synchronisation lors de la reconnexion http://www.w3.org/TR/offline-webapps/
    7. 7. Mode offline Mise en œuvre :  Cache Manifest File  Liste des ressources <!DOCTYPE HTML> <html manifest="/cache.manifest"> <body> ... </body> </html  Chaque page doit pointer vers le fichier de manifeste CACHE MANIFEST /default.htm /default.css /default.js /logo.jpg # commentaires…..  Attention au cache! Il faut modifier le contenu pour forcer le rafraichissement (si vous modifiez les fichiers cibles, cela ne suffit pas!)
    8. 8. Mode offline – mode avancé Gestion des entêtes : CACHE MANIFEST NETWORK: /connect.asmx CACHE: /default.htm /default.css /default.js /logo.jpg  NETWORK : Liste des fichiers uniquement disponible en mode connecté  CACHE : Liste des fichiers à rendre disponible hors ligne
    9. 9. Mode offline – Mode de repli Mise en œuvre du mode de repli  Fichiers de remplacement en cas d’erreurs: CACHE MANIFEST FALLBACK: / /offline.htm NETWORK: /connect.asmx CACHE: /default.htm /default.css /default.js /logo.jpg  « / » : Chaque page
    10. 10. Mode offline – Ressources externes Gestion des entêtes : CACHE MANIFEST FALLBACK: / /offline.html NETWORK: *  « * » : Toutes les ressources qui ne sont pas dans FALLBACK et CACHE
    11. 11. Mode offline – Cycle de vie Manifest présent ? [checking] Déjà vu ? Oui Non [downloading] A changé ? [progress] Non [cached] [noupdate] [downloading] & [updateready]
    12. 12. Mode offline - Status Window.applicationCache.status  UNCACHED  IDLE  CHECKING  DOWNLOADING  UPDATEREADY  OBSOLTE Window.applicationCache.update() Window.applicationCache.abort() Window.applicationCache.swapCache()
    13. 13. Mode offline - Support http://www.caniuse.com
    14. 14. DémonstrationFonctionnement hors ligne de SnapX
    15. 15. File API
    16. 16. File API Lecture et Création et Répertoire et manipulation écriture hiérarchie File/blob DirectoryReader BlobBuilder FileEntry/ FileList DirectoryEntry FileWriter FileReader LocalFileSystem
    17. 17. DémonstrationDemo File API
    18. 18. Stockageclient
    19. 19. Stockage client – DOM Storage Stockage par paire clé/valeur et les propriétés sont stockées uniquement sous forme de chaîne Chaque domaine dispose d’une zone de stockage isolée de 10 Mo 2 types :  localStorage : partagé par toute l’application et persistant  sessionStorage : durée de vie par session -> pratique pour les problématiques multi-onglets Scénarios d’usage : sauvegarde d’un formulaire de saisie, mise en place de cache, etc.
    20. 20. Comprendre par le code<script>var lStorage = window.localStorage;function init() { if (!lStorage.score) lStorage.score = 0; document.getElementById(c1).innerText = lStorage.score;}function save() { lStorage.score = getGameScore();}</script><body onload=“init();”> <p>Votre dernier score était: <span id="c1">non défini</span> </p></body>
    21. 21. DémonstrationDémo DOM Storage – avec YODA
    22. 22. Stockage client - IndexedDB De type NoSQL : paires de clé-valeur Les valeurs sont stockées sous forme d’objets JS  Une indexation permet un filtrage et une recherche efficace Tout est asynchrone et tout est transaction Les opérations classiques en SQL comme la jointure se font manuellement par code
    23. 23. Comprendre via le codevar oRequestDB = window.indexedDB.open(“Library”);oRequestDB.onsuccess = function (event) { db1 = oRequestDB.result; if (db1.version == 1) { txn = db1.transaction([“Books”],IDBTransaction.READ_ONLY); var objStoreReq = txn.objectStore(“Books”); var request = objStoreReq.get("Book0"); request.onsuccess = processGet; }};
    24. 24. IndexedDB - Support http://www.caniuse.com
    25. 25. Idées de scénarios Canvas ou autre élément HTML File Object (Blob) Web File Object Indexed (Blob) DB
    26. 26. DémonstrationUne belle démo moche d’IndexedDB ! Démo de l’outil de debug iDBGestion d’IndexedDB dans SnapX avec driver BackBone.js
    27. 27. Drag’n’Drop
    28. 28. Drag’n’Drop Gestion du glisser/déposer interne et externe Recette de cuisine :  Marquer les objets [draggable]  S’abonner aux événements (ondragstart, ondragend)  Définition de la dropzone  Via l’attribut [dropzone]  Via les événements (ondragenter, ondragover)  S’abonner à l’événement ondrop  Récupération de l’objet DataTransfer
    29. 29. Drag’n’Drop – les événementsde départ<ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)" > <li draggable="true" data-value="World of Warcraft">Wow</li> <li draggable="true" data-value="Elder Scroll 5">Skyrim</li> <li draggable="true" data-value="Angry birds">Angry Birds</li></ol>
    30. 30. Drag’n’Drop – les événementsde réception <div ondrop="dropHandler(event)" ondragenter="dragEnterHandler(event)" ondragover="dragOverHandler(event)"> </div>
    31. 31. Drag’n’Drop – DropZone <div dropzone="move string:text/monformat" ondrop="dropHandler(event)"> </div> Mode de drop: Moniker: Type mime • Move • File • Link • String • Copy
    32. 32. Drag’n’Drop - DataTransfer Interface utilisée pour stocker les données à transférer  dropEffect : none, copy, link, move  effectAllowed : none", "copy", "copyLink", "copyMove", "link", "linkMove", "move", "all", "uninitialized“  items  setDragImage  addElement  types  getData / setData  clearData  files
    33. 33. Drag’n’Drop - Lancement <script> var internalDNDType = text/monformat; function dragStartHandler(event) { if (event.target instanceof HTMLLIElement) { event.dataTransfer.setData(internalDNDType, event.target.dataset.value); event.dataTransfer.effectAllowed = move } else { event.preventDefault(); } } </script>
    34. 34. Drag’n’Drop - Réception <script> var internalDNDType = text/monformat; function dropHandler(event) { var li = document.createElement(li); var data = event.dataTransfer.getData(internalDNDType); if (data == World of Warcraft) { li.textContent = Yeahhh; } else { li.textContent = Game over; } event.target.appendChild(li); } </script>
    35. 35. DémonstrationGestion du drag’n’drop de SnapX
    36. 36. <Questions/>
    37. 37. palais descongrèsParis7, 8 et 9février 2012

    ×