on connection lost
DESCRIPTION
Slides from the code.talks 2014 talk about realising offline web-applications.TRANSCRIPT
c o d e . t a l k s
ON CONNECTION LOSTDas Leben einer Offline Web-Applikation
JOHANNESŁUKASZ
[wukaʃ]
[joˈhanəs]
OFFLINE ??!
WHAT ISOFFLINE ?
STUPIDCLIENT
MORE LOGICCLIENT-SIDE
INDEPENDENTCLIENT
By integrating offline capabilities, you will end up
with resilient architecture of the system as a whole (both
client and server)
DIFFERENT STEPS
https://www.flickr.com/photos/bootbearwdc/611056260
CLIENT AVAILABLE OFFLINE1
CLIENT AVAILABLE OFFLINE
2 DATA AVAILABLE OFFLINE
1
CLIENT AVAILABLE OFFLINE
2 DATA AVAILABLE OFFLINE
3 DATA CHANGES OFFLINE
1
https://www.flickr.com/photos/soeren_nb/3444697357
APPLICATIONCACHE
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
INITIAL DOWNLOAD
CHECKING DOWNLOADING PROGRESS CACHED
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
NO INTERNET
LOADED CHECKING ERROR
NOTHING CHANGED
LOADED CHECKING NO UPDATE
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
NEW VERSION
LOADED CHECKING DOWNLOADING PROGRESS UPDATE READY
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
IE 10YESYES YEShttp://caniuse.com/#search=appcache
DATA
https://www.flickr.com/photos/bootbearwdc/611056260
WEB STORAGE
File Api
LocalStorageSessionStorage
IndexedDBWeb SQL
Limit: 5MB
Easy to use key/value store Synchronous API
Limit: 2GB Complex asynchronous API Good performance -> indices
Quota Mgmt API / unlimitedAsynchronous API
INDEXED DBhttps://www.flickr.com/photos/16712259@N04/4467481701
169 var request = indexedDB.open('db_name', '1'); !
13 var trans = database.transaction(['name'], 'readwrite'); 14 var store = trans.objectStore(collection); 16 var putRequest = store.put(object, key); 18 putRequest.onsuccess = // ... !
31 var trans = database.transaction(['name'], 'readonly'); 34 var getRequest = store.get(key); !
59 var index = store.index(indexName); 60 var cursorRequest = index.openCursor(); 63 cursorRequest.onsuccess = // ...
THE API
169 var request = indexedDB.open('db_name', '1'); !
13 var trans = database.transaction(['name'], 'readwrite'); 14 var store = trans.objectStore(collection); 16 var putRequest = store.put(object, key); 18 putRequest.onsuccess = // ... !
31 var trans = database.transaction(['name'], 'readonly'); 34 var getRequest = store.get(key); !
59 var index = store.index(indexName); 60 var cursorRequest = index.openCursor(); 63 cursorRequest.onsuccess = // ...
THE API
IE 107.1YES YEShttp://caniuse.com/#search=indexeddb
BINARY DATAhttps://www.flickr.com/photos/wales_designer/346469146
16 $window.webkitStorageInfo.requestQuota( $window.PERSISTENT, sizeInMb * 1024 * 1024, function () { $window.webkitRequestFileSystem( $window.PERSISTENT, sizeInMb * 1024 * 1024, successFct, errorFct); }, errorFct);
ACCESSING FILE SYSTEM
!
35 fileSystem.root.getFile(fileName, {create: true}, function (fileEntry) { 37 fileEntry.createWriter(function (fileWriter) { 39 fileWriter.onwriteend = // ... 43 fileWriter.onerror = // ... 45 fileWriter.write(blob); 47 }, errorFct); 49 }, errorFct); 50 });
WRITE AND USE
WRITE AND USE
filesystem:http://yourdomain/persistent/filename
IE 106.1YES YEShttp://caniuse.com/#search=fileapi
SYNChttps://www.flickr.com/photos/trainor/1229138273
COMMANDS
COMMANDS
COMMANDS
COMMANDS
QUEUE
queued
in sync
in conflict
https://www.flickr.com/photos/richardsummers/269503769
SYNCING
SYNCING
SYNCING
SYNCING
SYNCING
SYNCING
SYNCING
CLIENT AVAILABLE OFFLINE
2 DATA AVAILABLE OFFLINE
3 DATA CHANGES OFFLINE
1
LESSONS LEARNED
DISTRIBUTED DB
RACE CONDITIONS
https://www.flickr.com/photos/botheredbybees/1849920478
CHALLENGE REQUIREMENTS
DANKE