Downloaded 10 times
![JOHANNES
ŁUKASZ
[wukaʃ]
[joˈhanəs]](https://image.slidesharecdn.com/onconnectionlost-141010152122-conversion-gate02/75/On-connection-lost-2-2048.jpg)
![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 = // ...](https://image.slidesharecdn.com/onconnectionlost-141010152122-conversion-gate02/75/On-connection-lost-31-2048.jpg)
![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 = // ...](https://image.slidesharecdn.com/onconnectionlost-141010152122-conversion-gate02/75/On-connection-lost-32-2048.jpg)
More Related Content
![Vibe Coding vs. Spec-Driven Development [Free Meetup]](https://cdn.slidesharecdn.com/ss_thumbnails/vibecodingvsspecdrivendevelopment-251209105622-43f455e7-thumbnail.jpg?width=640&height=640&fit=bounds)
On connection lost
- 1. c o de . t a l k s ON CONNECTION LOST Das Leben einer Offline Web-Applikation
- 2. JOHANNES ŁUKASZ [wukaʃ] [joˈhanəs]
- 3.
- 5.
- 6.
- 7.
- 8.
- 9. By integrating offline capabilities, you will end up with resilient architecture of the system as a whole (both client and server)
- 10.
- 11. CLIENT AVAILABLE 1OFFLINE
- 12. 2 DATA AVAILABLE OFFLINE 1 CLIENT AVAILABLE OFFLINE
- 13. 3 DATA CHANGES OFFLINE 2 DATA AVAILABLE OFFLINE CLIENT AVAILABLE OFFLINE 1
- 14.
- 15.
- 16. INDEX.HTML 1 <!doctypehtml> 2 <html ... manifest="appcache.manifest"> . <!-- (...) --> 54 </html>
- 17. APPCACHE.MANIFEST 1 CACHEMANIFEST 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 CACHEMANIFEST 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 CACHEMANIFEST 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 CACHEMANIFEST 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.
- 27. YES YES YESIE 10 http://caniuse.com/#search=appcache
- 28.
- 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
- 30.
- 31. THE API 169var 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 169var 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.1IE 10 http://caniuse.com/#search=indexeddb
- 34.
- 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 ANDUSE 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.1IE 10 http://caniuse.com/#search=fileapi
- 39.
- 40.
- 41.
- 42.
- 43.
- 44. QUEUE queued insync in conflict https://www.flickr.com/photos/richardsummers/269503769
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 51.
- 52. 3 DATA CHANGES OFFLINE 2 DATA AVAILABLE OFFLINE CLIENT AVAILABLE OFFLINE 1
- 53.
- 55.
- 56.
- 57.
- 58.