Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
Création d’une applicationgérant l’offline et le stockageclientDavid CATUHE - @deltakoshMicrosoft – davca@microsoft.comhtt...
Du web de présentation vers le web applicatif
Quelques fonctionnalités clés   Accélération matérielle        Audio/Vidéo   CSS3 grid, flexible box        ECMAScript 5  ...
DémonstrationPrésentation de l’application SnapX
Support du mode  hors connexion
Mode offline  Version du site téléchargée lorsque le site est en ligne  Prérequis : Liste des ressources (HTML, CSS, JS, I...
Mode offline  Mise en œuvre :   Cache Manifest File  Liste des ressources             <!DOCTYPE HTML>             <html ...
Mode offline – mode avancé  Gestion des entêtes :             CACHE MANIFEST             NETWORK:             /connect.asm...
Mode offline – Mode de repli  Mise en œuvre du mode de repli   Fichiers de remplacement en cas d’erreurs:             CAC...
Mode offline – Ressources externes  Gestion des entêtes :             CACHE MANIFEST             FALLBACK:             / /...
Mode offline – Cycle de vie                          Manifest présent ?                              [checking]           ...
Mode offline - Status  Window.applicationCache.status   UNCACHED   IDLE   CHECKING   DOWNLOADING   UPDATEREADY   OBS...
Mode offline - Support  http://www.caniuse.com
DémonstrationFonctionnement hors ligne de SnapX
File API
File API  Lecture et     Création et     Répertoire et manipulation     écriture        hiérarchie     File/blob          ...
DémonstrationDemo File API
Stockageclient
Stockage client – DOM Storage  Stockage par paire clé/valeur et les propriétés  sont stockées uniquement sous forme de cha...
Comprendre par le code<script>var lStorage = window.localStorage;function init() {   if (!lStorage.score)       lStorage.s...
DémonstrationDémo DOM Storage – avec YODA
Stockage client - IndexedDB  De type NoSQL : paires de clé-valeur  Les valeurs sont stockées sous forme d’objets JS      ...
Comprendre via le codevar oRequestDB = window.indexedDB.open(“Library”);oRequestDB.onsuccess = function (event) {    db1 =...
IndexedDB - Support  http://www.caniuse.com
Idées de scénarios                              Canvas ou                                autre                            ...
DémonstrationUne belle démo moche d’IndexedDB ! Démo de l’outil de debug iDBGestion d’IndexedDB dans SnapX avec driver Ba...
Drag’n’Drop
Drag’n’Drop  Gestion du glisser/déposer interne et externe  Recette de cuisine :    Marquer les objets [draggable]    S’...
Drag’n’Drop – les événementsde départ<ol ondragstart="dragStartHandler(event)" ondragend="dragEndHandler(event)" >        ...
Drag’n’Drop – les événementsde réception  <div ondrop="dropHandler(event)" ondragenter="dragEnterHandler(event)"          ...
Drag’n’Drop – DropZone <div dropzone="move   string:text/monformat" ondrop="dropHandler(event)"> </div> Mode de drop:     ...
Drag’n’Drop - DataTransfer  Interface utilisée pour stocker les données à transférer    dropEffect : none, copy, link, mo...
Drag’n’Drop - Lancement <script>  var internalDNDType = text/monformat;   function dragStartHandler(event) {     if (event...
Drag’n’Drop - Réception <script>  var internalDNDType = text/monformat;  function dropHandler(event) {    var li = documen...
DémonstrationGestion du drag’n’drop de SnapX
<Questions/>
palais descongrèsParis7, 8 et 9février 2012
Prochain SlideShare
Chargement dans…5
×

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

4 140 vues

Publié le

Techdays 2012

Publié dans : Technologie
  • Soyez le premier à commenter

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

×