![JOHANNES
ŁUKASZ
[wukaʃ]
[joˈhanəs]](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7)
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (11)
Similar to On connection lost
Similar to On connection lost (20)
Recently uploaded
Recently uploaded (20)
On connection lost
- 1. c o d e . t a l k s ON CONNECTION LOST Das Leben einer Offline Web-Applikation
- 2. JOHANNES ŁUKASZ [wukaʃ] [joˈhanəs]
- 3. OFFLINE ??!
- 5. WHAT IS OFFLINE ?
- 9. By integrating offline capabilities, you will end up with resilient architecture of the system as a whole (both client and server)
- 11. CLIENT AVAILABLE 1 OFFLINE
- 12. 2 DATA AVAILABLE OFFLINE 1 CLIENT AVAILABLE OFFLINE
- 13. 3 DATA CHANGES OFFLINE 2 DATA AVAILABLE OFFLINE CLIENT AVAILABLE OFFLINE 1
- 16. INDEX.HTML 1 <!doctype html> 2 <html ... manifest="appcache.manifest"> . <!-- (...) --> 54 </html>
- 17. 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
- 18. INITIAL DOWNLOAD CHECKING DOWNLOADING PROGRESS CACHED
- 19. 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
- 20. NO INTERNET LOADED CHECKING ERROR
- 21. NOTHING CHANGED LOADED CHECKING NO UPDATE
- 22. 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
- 23. NEW VERSION LOADED CHECKING DOWNLOADING PROGRESS UPDATE READY
- 24. 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
- 25. ADDITIONAL CACHE
- 27. YES YES YES IE 10 http://caniuse.com/#search=appcache
- 29. WEB STORAGE LocalStorage SessionStorage IndexedDB Web SQL File Api Easy to use key/value store Synchronous API Limit: 5MB Limit: 2GB Complex asynchronous API Good performance -> indices Asynchronous API Quota Mgmt API / unlimited
- 31. 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 = // ...
- 32. 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 = // ...
- 33. YES YES 7.1 IE 10 http://caniuse.com/#search=indexeddb
- 35. ACCESSING FILE SYSTEM 16 $window.webkitStorageInfo.requestQuota( $window.PERSISTENT, sizeInMb * 1024 * 1024, function () { $window.webkitRequestFileSystem( $window.PERSISTENT, sizeInMb * 1024 * 1024, successFct, errorFct); }, errorFct);
- 36. ! WRITE AND USE 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 });
- 37. WRITE AND USE filesystem:http://yourdomain/persistent/filename
- 38. YES YES 6.1 IE 10 http://caniuse.com/#search=fileapi
- 40. COMMANDS
- 41. COMMANDS
- 42. COMMANDS
- 43. COMMANDS
- 44. QUEUE queued in sync in conflict https://www.flickr.com/photos/richardsummers/269503769
- 45. SYNCING
- 46. SYNCING
- 47. SYNCING
- 48. SYNCING
- 49. SYNCING
- 50. SYNCING
- 51. SYNCING
- 52. 3 DATA CHANGES OFFLINE 2 DATA AVAILABLE OFFLINE CLIENT AVAILABLE OFFLINE 1
- 53. LESSONS LEARNED
- 55. DISTRIBUTED DB
- 58. DANKE