breizhcamp 2014 - voteriez-vous pour un web déconnecté ?
TRANSCRIPT
![Page 1: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/1.jpg)
Voteriez-vous pour un web déconnecté ?
Rossi Oddet@rossioddethttp://blog.roddet.com
![Page 2: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/2.jpg)
2014, l’année de l’Internet des Objets
![Page 3: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/3.jpg)
![Page 4: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/4.jpg)
![Page 5: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/5.jpg)
![Page 6: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/6.jpg)
![Page 7: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/7.jpg)
Pourquoi toute cette frustration ?
![Page 8: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/8.jpg)
![Page 9: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/9.jpg)
![Page 10: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/10.jpg)
![Page 11: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/11.jpg)
HTTP !Request
![Page 12: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/12.jpg)
HTTP !Response
![Page 13: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/13.jpg)
![Page 14: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/14.jpg)
Pas de ça chez HTTP !
![Page 15: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/15.jpg)
Résumons
![Page 16: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/16.jpg)
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
![Page 17: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/17.jpg)
Où mettre le mode déconnecté ?
![Page 18: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/18.jpg)
![Page 19: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/19.jpg)
Comment faire ?
![Page 20: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/20.jpg)
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
![Page 21: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/21.jpg)
Container
App
PROXY
Server
UI
ONLINE ?
features!offline
features!online
SENSORS
SYNC
![Page 22: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/22.jpg)
Et si mon container est le navigateur ?
![Page 23: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/23.jpg)
+ Des Librairies + Surtout votre talent de développeur !
Attention à la sécurité !
![Page 24: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/24.jpg)
![Page 25: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/25.jpg)
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
![Page 26: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/26.jpg)
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
![Page 27: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/27.jpg)
Et bien d’autres…
File System API!!
IndexedDB!!
navigator.online!!
Page Visibility API!!
Battery Status API!!
Cookie :)
![Page 28: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/28.jpg)
Quelques librairies
![Page 29: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/29.jpg)
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
![Page 30: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/30.jpg)
jQuery Offline PluginLIB
jQuery.retrieveJSON("/url", {data: "toSend"}, function(json, status, data) { }); !jQuery.clearJSON("/url", {data: “toSend"});
https://github.com/wycats/jquery-offline
![Page 37: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/37.jpg)
http://www.breezejs.com/
![Page 38: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/38.jpg)
https://github.com/forbesmyester/SyncIt
![Page 39: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/39.jpg)
La sécurité
![Page 40: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/40.jpg)
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!…
![Page 41: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/41.jpg)
https://www.owasp.org/index.php/OWASP_Testing_Guide_v4_Table_of_Contents
Nouvelle rubrique
![Page 42: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/42.jpg)
Et surtout…
![Page 43: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/43.jpg)
Container
App
PROXY
UI
ONLINE ?
features!offline
features!online
SENSORS
SYNC
Votre talent !!!
![Page 44: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/44.jpg)
Et si vous décidiez vous aussi d’être “tendance” ?
![Page 45: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/45.jpg)
Soyez “réactif” avec le mode déconnecté !
![Page 46: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/46.jpg)
http://www.reactivemanifesto.org/
responsive
event-driven
scalable resilient
![Page 47: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/47.jpg)
Et si tout le monde jouait le jeu ?
![Page 48: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/48.jpg)
![Page 49: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/49.jpg)
![Page 50: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/50.jpg)
![Page 51: BreizhCamp 2014 - Voteriez-vous pour un web déconnecté ?](https://reader030.vdocuments.site/reader030/viewer/2022020217/5560b6afd8b42af43b8b4a51/html5/thumbnails/51.jpg)
Voteriez-vous pour un web déconnecté ?