1. CONNECTION LOST… F%CK!
Tech & UX – Local Rock Stars
Jakob Dam Jensen, Frontend Developer

3. DEMO

4. App=Shell+Content StoredataCachefiles Sync

5. App=Shell+Content

6. Downloadcontentasdataand
renderonclient

8. NOT
FRAMEWORK
SPECIFIC

9. App=Shell+Content StoredataCachefiles Sync

10. StoredataCachefiles Sync

11. Cachefiles

12. Appcache

13. Intendedtoletyourwebapp
runoffline

14. ApplicationCache
examples from http://www.html5rocks.com/en/tutorials/appcache/beginner/

15. Howtoupdate?

16. Userclearstheirbrowser
data

17. Manifestchangesonserver

18. ApplicationCache
examples from http://www.html5rocks.com/en/tutorials/appcache/beginner/

19. JSAPItogeteventson
updatesandmore

20. Checkingforupdates
examples from http://www.html5rocks.com/en/tutorials/appcache/beginner/

21. StoredataCachefiles Sync

22. Storedata Sync

23. Storedata

24. Clientsidestorage
&IndexedDB
FileReader
LocalStorage

25. Synchronous
Simple
Onlystoresstrings
LocalStorage

26. Asynchronous
Transactional
Key-valueobjectstore
IndexedDB

27. source https://dev.opera.com/articles/introduction-to-indexeddb/

32. source http://caniuse.com/#feat=indexeddb

33. source http://caniuse.com/#feat=sql-storage

34. Asynchronous
FileReader
Readfilecontentindifferentformats
FilescancomefromfileInputordrag&drop

35. FileReader

36. source http://caniuse.com/#feat=filereader

37. Storedata Sync

38. Sync

39. Sync

40. Syncishard

41. Conflict
resolution

42. Domainspecific
solutions

43. Howimportantarewriteswhenoffline?
Readonlyismucheasier

44. Sync

46. Isthisit?

47. Limitations

48. Serviceworkers

49. Serviceworkers
Google&Mozilla
Aproxyforthewebbrowser
Aprogressiveenhancementforappcache
Willenablegeofencing,backgroundsyncandmore

50. Serviceworkers
source http://www.html5rocks.com/en/tutorials/service-worker/introduction/

51. Benefits

52. Challenges

53. @jdj_dk
JakobDamJensen

54. You’reawesome