66
Craft Conference 2015 ON CONNECTION LOST The life of an offline web application #craftconf #offlinefirst @thoughtworks @sgrewenig @jthoenes
| Date post: | 15-Jul-2015 |
| Category: |
Technology |
| Upload: | johannes-thoenes |
| View: | 177 times |
| Download: | 0 times |
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
OFFLINE ??!
WHAT ISOFFLINE ?
STUPIDCLIENT
MORE LOGICCLIENT-SIDE
“INDEPENDENT”CLIENT
WHY ?
HOW ?
CLIENT AVAILABLE OFFLINE
2 DATA AVAILABLE OFFLINE
3 DATA CHANGES OFFLINE
1
CLIENT AVAILABLE OFFLINE1
APP CACHE
APP CACHE
INDEX.HTML
1 <!doctype html> 2 <html ... manifest="appcache.manifest"> . <!-- (...) --> 54 </html>
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
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
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
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
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
ADDITIONAL CACHE
CLIENT AVAILABLE OFFLINE
2 DATA AVAILABLE OFFLINE
1
28
//Store localStorage.town = “Antwerpen”
//Retrieve alert(localStorage.town)
WEBSTORAGEEasy to use key/value store Synchronous API
INDEXED DB
30
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
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
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
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
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
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
MIGRATIONS
ONUPGRADE
NEEDED
FILESYSTEM APIFILE API
41
ADD IMAGE
filesystem:http://thedomain/persistent/xyz.jpg
42
GET IMAGE
IE 106.1YES YEShttp://caniuse.com/#search=fileapi
YES NONONOhttp://caniuse.com/#search=filesystem
CLIENT AVAILABLE OFFLINE
2 DATA AVAILABLE OFFLINE
3 DATA CHANGES OFFLINE
1
DATA SYNCHRONISATION
CAPTURING1 CHANGES
QUEUE2
PROCESSING3
<<<<<<< HEAD
Hungarian beer is better than German beer.=======
German beer is better than Hungarian beer.>>>>>>> d237ef28dc3fab5dcccc63f580bfa7780f
OR
SIZE OF DATA ?
STRUCTURE OF DATA ?
SENSITIVE DATA ?
POTENTIAL FOR DATA CONFLICTS ?
BROWSER SUPPORT ?
AMOUNT OF FUNCTIONALITY TO WORK OFFLINE ?
58
CHALLENGE REQUIREMENTS
OFFLINE FIRST & EARLY
61
EXPLORE THE POSSIBILITIES
THANKS
@SGREWENIG
@JTHOENES
IE 10YESYES YEShttp://caniuse.com/#search=appcache
IE 107.1YES YEShttp://caniuse.com/#search=indexeddb
