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

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

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

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 …

Démonstration
Pré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, 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/

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!)

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

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

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

Mode offline – Cycle de vie
Manifest présent ?

[checking]

Déjà vu ?

Oui Non

[downloading]
A changé ?
[progress]

Non [cached]
[noupdate]
[downloading] & [updateready]

Mode offline - Status

Window.applicationCache.status
 UNCACHED

 IDLE

 CHECKING

 DOWNLOADING

 UPDATEREADY

 OBSOLTE

Window.applicationCache.update()
Window.applicationCache.abort()
Window.applicationCache.swapCache()

Mode offline - Support

http://www.caniuse.com

Démonstration
Fonctionnement hors ligne de SnapX

File API

Lecture et Création et Répertoire et
manipulation écriture hiérarchie

File/blob DirectoryReader
BlobBuilder

FileEntry/
FileList
DirectoryEntry

FileWriter
FileReader LocalFileSystem

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.

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>

Démonstration
Dé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
 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

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

IndexedDB - Support

http://www.caniuse.com

Idées de scénarios
Canvas ou
autre
élément
HTML
File
Object
(Blob)

Web

File
Object Indexed
(Blob) DB

Démonstration
Une belle démo moche d’IndexedDB ! 
Démo de l’outil de debug iDB
Gestion d’IndexedDB dans SnapX avec driver BackBone.js

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

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>

Drag’n’Drop – les événements
de réception

<div ondrop="dropHandler(event)" ondragenter="dragEnterHandler(event)"
ondragover="dragOverHandler(event)">
</div>

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

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

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>

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>

Démonstration
Gestion du drag’n’drop de SnapX

palais des
congrès
Paris

7, 8 et 9
février 2012

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

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

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

Ähnlich wie Création d’une application gérant l’offline et le stockage (20)

Mehr von davrous

Mehr von davrous (20)

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

Hinweis der Redaktion