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 108 vues

Publié le

Techdays 2012

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
4 108
Sur SlideShare
0
Issues des intégrations
0
Intégrations
1 179
Actions
Partages
0
Téléchargements
27
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • Welcome pack Davrous &amp; 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

    ×