OnConnectionLost: The life of an offline web application - Craft Conf 2015
-
Upload
johannes-thoenes -
Category
Technology
-
view
177 -
download
0
Transcript of OnConnectionLost: The life of an offline web application - Craft Conf 2015
![Page 1: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/1.jpg)
C r a f t C o n f e r e n c e 2 0 1 5
ON CONNECTION LOSTThe life of an offline web application
#craftconf #offlinefirst @thoughtworks
@sgrewenig @jthoenes
![Page 2: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/2.jpg)
OFFLINE ??!
![Page 3: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/3.jpg)
![Page 4: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/4.jpg)
WHAT ISOFFLINE ?
![Page 5: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/5.jpg)
STUPIDCLIENT
![Page 6: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/6.jpg)
MORE LOGICCLIENT-SIDE
![Page 7: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/7.jpg)
“INDEPENDENT”CLIENT
![Page 8: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/8.jpg)
WHY ?
![Page 9: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/9.jpg)
![Page 10: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/10.jpg)
![Page 11: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/11.jpg)
HOW ?
![Page 12: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/12.jpg)
CLIENT AVAILABLE OFFLINE
2 DATA AVAILABLE OFFLINE
3 DATA CHANGES OFFLINE
1
![Page 13: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/13.jpg)
CLIENT AVAILABLE OFFLINE1
![Page 14: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/14.jpg)
![Page 15: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/15.jpg)
APP CACHE
![Page 16: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/16.jpg)
APP CACHE
![Page 17: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/17.jpg)
INDEX.HTML
1 <!doctype html> 2 <html ... manifest="appcache.manifest"> . <!-- (...) --> 54 </html>
![Page 18: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/18.jpg)
APPCACHE.MANIFEST 1 CACHE MANIFEST 2 # rev 1 - 2014-10-03T13:50:18.799Z 3 4 CACHE: 5 404.html 6 favicon.ico 7 scripts/scripts.js # (...) 111 112 NETWORK: 113 * 114 115 FALLBACK: 116 / /offline.html
![Page 19: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/19.jpg)
APPCACHE.MANIFEST 1 CACHE MANIFEST 2 # rev 1 - 2014-10-03T13:50:18.799Z 3 4 CACHE: 5 404.html 6 favicon.ico 7 scripts/scripts.js # (...) 111 112 NETWORK: 113 * 114 115 FALLBACK: 116 / /offline.html
![Page 20: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/20.jpg)
APPCACHE.MANIFEST 1 CACHE MANIFEST 2 # rev 1 - 2014-10-03T13:50:18.799Z 3 4 CACHE: 5 404.html 6 favicon.ico 7 scripts/scripts.js # (...) 111 112 NETWORK: 113 * 114 115 FALLBACK: 116 / /offline.html
![Page 21: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/21.jpg)
APPCACHE.MANIFEST 1 CACHE MANIFEST 2 # rev 1 - 2014-10-03T13:50:18.799Z 3 4 CACHE: 5 404.html 6 favicon.ico 7 scripts/scripts.js # (...) 111 112 NETWORK: 113 * 114 115 FALLBACK: 116 / /offline.html
![Page 22: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/22.jpg)
APPCACHE.MANIFEST 1 CACHE MANIFEST 2 # rev 1 - 2014-10-03T13:50:18.799Z 3 4 CACHE: 5 404.html 6 favicon.ico 7 scripts/scripts.js # (...) 111 112 NETWORK: 113 * 114 115 FALLBACK: 116 / /offline.html
![Page 23: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/23.jpg)
![Page 24: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/24.jpg)
ADDITIONAL CACHE
![Page 25: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/25.jpg)
![Page 26: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/26.jpg)
![Page 27: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/27.jpg)
CLIENT AVAILABLE OFFLINE
2 DATA AVAILABLE OFFLINE
1
![Page 28: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/28.jpg)
28
//Store localStorage.town = “Antwerpen”
//Retrieve alert(localStorage.town)
WEBSTORAGEEasy to use key/value store Synchronous API
![Page 29: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/29.jpg)
INDEXED DB
![Page 30: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/30.jpg)
30
![Page 31: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/31.jpg)
10 var dbRequest = indexedDB.open('db_name', ‘1’);
31 var trans = database.transaction(['name'], ‘readonly'); 32 var store = trans.objectStore('name'); 33 var getRequest = store.get('4'); 34 getRequest.onsuccess = // …
42 var index = store.index('stockAmount'); 43 var cursorRequest = index.openCursor(IDBKeyRange.lower(15)); 44 cursorRequest.onsuccess = // ...
THE API
![Page 32: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/32.jpg)
10 var dbRequest = indexedDB.open('db_name', ‘1’);
31 var trans = database.transaction(['name'], ‘readonly'); 32 var store = trans.objectStore('name'); 33 var getRequest = store.get('4'); 34 getRequest.onsuccess = // …
42 var index = store.index('stockAmount'); 43 var cursorRequest = index.openCursor(IDBKeyRange.lower(15)); 44 cursorRequest.onsuccess = // ...
THE API
![Page 33: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/33.jpg)
10 var dbRequest = indexedDB.open('db_name', ‘1’);
31 var trans = database.transaction(['name'], ‘readonly'); 32 var store = trans.objectStore('name'); 33 var getRequest = store.get('4'); 34 getRequest.onsuccess = // …
42 var index = store.index('stockAmount'); 43 var cursorRequest = index.openCursor(IDBKeyRange.lower(15)); 44 cursorRequest.onsuccess = // ...
THE API
![Page 34: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/34.jpg)
10 var dbRequest = indexedDB.open('db_name', ‘1’);
31 var trans = database.transaction(['name'], ‘readonly'); 32 var store = trans.objectStore('name'); 33 var getRequest = store.get('4'); 34 getRequest.onsuccess = // …
42 var index = store.index('stockAmount'); 43 var cursorRequest = index.openCursor(IDBKeyRange.lower(15)); 44 cursorRequest.onsuccess = // ...
THE API
![Page 35: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/35.jpg)
10 var dbRequest = indexedDB.open('db_name', ‘1’);
31 var trans = database.transaction(['name'], ‘readonly'); 32 var store = trans.objectStore('name'); 33 var getRequest = store.get('4'); 34 getRequest.onsuccess = // …
42 var index = store.index('stockAmount'); 43 var cursorRequest = index.openCursor(IDBKeyRange.lower(15)); 44 cursorRequest.onsuccess = // ...
THE API
![Page 36: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/36.jpg)
10 var dbRequest = indexedDB.open('db_name', ‘1’);
31 var trans = database.transaction(['name'], ‘readonly'); 32 var store = trans.objectStore('name'); 33 var getRequest = store.get('4'); 34 getRequest.onsuccess = // …
42 var index = store.index('stockAmount'); 43 var cursorRequest = index.openCursor(IDBKeyRange.lower(15)); 44 cursorRequest.onsuccess = // ...
THE API
![Page 37: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/37.jpg)
![Page 38: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/38.jpg)
MIGRATIONS
![Page 39: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/39.jpg)
ONUPGRADE
NEEDED
![Page 40: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/40.jpg)
FILESYSTEM APIFILE API
![Page 41: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/41.jpg)
41
ADD IMAGE
filesystem:http://thedomain/persistent/xyz.jpg
![Page 42: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/42.jpg)
42
GET IMAGE
![Page 43: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/43.jpg)
IE 106.1YES YEShttp://caniuse.com/#search=fileapi
![Page 44: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/44.jpg)
YES NONONOhttp://caniuse.com/#search=filesystem
![Page 45: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/45.jpg)
CLIENT AVAILABLE OFFLINE
2 DATA AVAILABLE OFFLINE
3 DATA CHANGES OFFLINE
1
![Page 46: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/46.jpg)
DATA SYNCHRONISATION
![Page 47: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/47.jpg)
CAPTURING1 CHANGES
![Page 48: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/48.jpg)
QUEUE2
![Page 49: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/49.jpg)
PROCESSING3
![Page 50: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/50.jpg)
<<<<<<< HEAD
Hungarian beer is better than German beer.=======
German beer is better than Hungarian beer.>>>>>>> d237ef28dc3fab5dcccc63f580bfa7780f
![Page 51: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/51.jpg)
OR
![Page 52: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/52.jpg)
SIZE OF DATA ?
![Page 53: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/53.jpg)
STRUCTURE OF DATA ?
![Page 54: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/54.jpg)
SENSITIVE DATA ?
![Page 55: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/55.jpg)
POTENTIAL FOR DATA CONFLICTS ?
![Page 56: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/56.jpg)
BROWSER SUPPORT ?
![Page 57: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/57.jpg)
AMOUNT OF FUNCTIONALITY TO WORK OFFLINE ?
![Page 58: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/58.jpg)
58
CHALLENGE REQUIREMENTS
![Page 59: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/59.jpg)
![Page 60: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/60.jpg)
OFFLINE FIRST & EARLY
![Page 61: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/61.jpg)
61
EXPLORE THE POSSIBILITIES
![Page 62: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/62.jpg)
THANKS
@SGREWENIG
@JTHOENES
![Page 63: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/63.jpg)
![Page 64: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/64.jpg)
IE 10YESYES YEShttp://caniuse.com/#search=appcache
![Page 65: OnConnectionLost: The life of an offline web application - Craft Conf 2015](https://reader031.fdocuments.us/reader031/viewer/2022032420/55a5d2831a28abd2758b462e/html5/thumbnails/65.jpg)
IE 107.1YES YEShttp://caniuse.com/#search=indexeddb