Création d’une application gérant l’offline et le stockage
1. Création d’une application
gérant l’offline et le stockage
client
David CATUHE - @deltakosh
Microsoft – davca@microsoft.com
http://blogs.msdn.com/eternalcoding
David ROUSSET - @davrous
Microsoft – davrous@microsoft.com
http://blogs.msdn.com/davrous
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. 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. 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. 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. 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. Mode offline – Cycle de vie
Manifest présent ?
[checking]
Déjà vu ?
Oui Non
[downloading]
A changé ?
[progress]
Non [cached]
[noupdate]
[downloading] & [updateready]
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
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. 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>
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. Comprendre via le code
var 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;
}
};
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. Drag’n’Drop – les événements
de 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. Drag’n’Drop – les événements
de réception
<div ondrop="dropHandler(event)" ondragenter="dragEnterHandler(event)"
ondragover="dragOverHandler(event)">
</div>
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