Connection lost... F%CK!
54
CONNECTION LOST… F%CK! Tech & UX – Local Rock Stars Jakob Dam Jensen, Frontend Developer
Transcript of Connection lost... F%CK!
CONNECTION LOST… F%CK!Tech & UX – Local Rock Stars
Jakob Dam Jensen, Frontend Developer
DEMO
App = Shell + Content Store dataCache files Sync
App = Shell + Content
Download content as data and render on client
NOT FRAMEWORK SPECIFIC
App = Shell + Content Store dataCache files Sync
Store dataCache files Sync
Cache files
Appcache
Intended to let your web app run offline
Application Cache
examples from http://www.html5rocks.com/en/tutorials/appcache/beginner/
How to update?
User clears their browser data
Manifest changes on server
Application Cache
examples from http://www.html5rocks.com/en/tutorials/appcache/beginner/
JS API to get events on updates and more
Checking for updates
examples from http://www.html5rocks.com/en/tutorials/appcache/beginner/
Store dataCache files Sync
Store data Sync
Store data
Client side storage
& IndexedDB
FileReader
LocalStorage
Synchronous
Simple
Only stores strings
LocalStorage
Asynchronous
Transactional
Key-value object store
IndexedDB
source https://dev.opera.com/articles/introduction-to-indexeddb/
Asynchronous
FileReader
Read file content in different formats
Files can come from file Input or drag & drop
FileReader
Store data Sync
Sync
Sync
Sync is hard
Conflict resolution
Domain specific solutions
How important are writes when offline?
Read only is much easier
Sync
Is this it?
Limitations
Service workers
Service workers
Google & Mozilla
A proxy for the web browser
A progressive enhancement for app cache
Will enable geofencing, background sync and more
Service workers
source http://www.html5rocks.com/en/tutorials/service-worker/introduction/
Benefits
Challenges
@jdj_dk
Jakob Dam Jensen
You’re awesome
