View
236
Download
0
Category
Preview:
Citation preview
Voteriez-vous pour un web déconnecté ?
Rossi Oddet@rossioddethttp://blog.roddet.com
2014, l’année de l’Internet des Objets
Pourquoi toute cette frustration ?
HTTP !Request
HTTP !Response
Pas de ça chez HTTP !
Résumons
Une système sans mode déconnecté ?
Inutile quand la connexion est perdue
Contre-nature Humaine
Inadaptée à la vie réelle
Contre-nature HTTP
Où mettre le mode déconnecté ?
Comment faire ?
Offline First !
1. Développer son système en mode déconnecté
2. Ajouter les fonctionnalités du mode connecté
Arrêtez de considérer la perte de connexion comme une erreur technique
Container
App
PROXY
Server
UI
ONLINE ?
features!offline
features!online
SENSORS
SYNC
Et si mon container est le navigateur ?
+ Des Librairies + Surtout votre talent de développeur !
Attention à la sécurité !
Application Cache
<html manifest="myApp.appcache"> !!!
</html>
index.html
CACHE MANIFEST !CACHE: favicon.ico script.js stylesheet.css !!NETWORK: * !!FALLBACK: /online /offline.html !!!
myApp.appcache
10
cache-control : no-cache!MIME-type : text/cache-manifest
Web Storage
8
!localStorage.setItem(key,value); !!localStorage.getItem(key); !!localStorage.removeItem(key); !!localStorage.length !!localStorage.key(index) !!localStorage.clear()
localStorage vs sessionStorage
Stockage Clé/Valeur
Et bien d’autres…
File System API!!
IndexedDB!!
navigator.online!!
Page Visibility API!!
Battery Status API!!
Cookie :)
Quelques librairies
JQuery Server Observer PluginLIB
!$.serverObserver.enable({ url: "http://xxx", frequency: 5000, onServerOnline: function() { // The server is available }, onServerOffline: function() { // The server is unavailable } }); !$.serverObserver.disable() !$.serverObserver.isServerOnline()
https://github.com/antoine-richard/jquery-server-observer
jQuery Offline PluginLIB
jQuery.retrieveJSON("/url", {data: "toSend"}, function(json, status, data) { }); !jQuery.clearJSON("/url", {data: “toSend"});
https://github.com/wycats/jquery-offline
http://www.breezejs.com/
https://github.com/forbesmyester/SyncIt
La sécurité
Container
XSS StockéeXSS Basée sur le DOM
XSS Réfléchie
Déni de service!Corruption des données!Vol de données!…
https://www.owasp.org/index.php/OWASP_Testing_Guide_v4_Table_of_Contents
Nouvelle rubrique
Et surtout…
Container
App
PROXY
UI
ONLINE ?
features!offline
features!online
SENSORS
SYNC
Votre talent !!!
Et si vous décidiez vous aussi d’être “tendance” ?
Soyez “réactif” avec le mode déconnecté !
http://www.reactivemanifesto.org/
responsive
event-driven
scalable resilient
Et si tout le monde jouait le jeu ?
Voteriez-vous pour un web déconnecté ?
Recommended