Offline first, the painless way
•
13 likes•4,668 views
This is a talk I gave about Offline First development at jsDay Verona on May 14th, 2015 and TopConf Tallinn on November 18th, 2015 . It covers why and when we should prepare our web apps for the offline state, which browser capabilities help us to accomplish the job and how we can detect the offline state for a better UI.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Offline first, the painless way
Similar to Offline first, the painless way (20)
Recently uploaded
Recently uploaded (16)
Offline first, the painless way
- 2. Who is this guy? MarcelKalveram IWorkatHanno Iamfromgermany ILiveinValencia/Spain javaScript’ingsincearound2008 RemoteUXTeam weworkwithstartups socialbusiness hanno.co @wearehanno @marcelkalveram
- 3. Do we really need offline-first? Traveling Commuting Roaming Internetoutage saturatednetwork
- 5. What does offline-first mean? Tomanagedatainanappinsuchaway thatwedon'tneedserveraccessinorderto doanykindofoperation some well-considered s
- 6. What is this talk about? Native apps Web sites Web apps Look stuff upDo stuff
- 7. When does it make sense? content-heavysites(Nativeapps) singlepagewebapps staticsites real-timeapps self-containedapps not our business
- 8. What are the benefits? Nodata-lossfortheuser Offline-firstappsarefaster… appsareusableallthetime
- 11. xhr, remote api calls .json, .xml, .csv xhr, remote api calls Caching mechanisms staticdata dynamicdata page assets .html, .css, .jpg, .js, .ttf page assets browsercache serviceworkers appcache vs. indexedDB webSql webstorage
- 12. browsercache serviceworkers appcache Caching mechanisms can’t trust him- lack of browser support- staticdata page assets .html, .css, .jpg, .js, .ttf page assets
- 13. indexedDB webSql webstorage Caching mechanisms localforage pouchDB }lack of browser support - api is overly complex - dynamicdata xhr, remote api calls .json, .xml, .csv xhr, remote api calls
- 14. Challenge #1 Caching static assets
- 15. App cache appcache intercepts http request manifestfile <html manifest="my.appcache"> cache,networkandfallback user browser returns cached data server
- 16. server App cache cache,networkandfallback resources can be used offline. online whitelist substitute non- cached resources appcache user browser
- 18. App cache gotchas 1.filesalwayscomefromthecache server side generated websites single page applications 2.onlyupdatesifmanifestfilechange 3.needtoswapthecachemanually serverappcache user browser applicationCache.swapCache();
- 19. Browser support for…appcache 10+ 4+ 3.5+4+ 2.1+ 3.2+
- 20. Browser support for…service workers n/a n/a n/a40+ n/a n/a
- 21. Challenge #2 caching dynamic assets
- 22. Caching mechanisms dynamicdata xhr, remote api calls .json, .xml, .csv xhr, remote api calls indexedDB webSql webstorage localforage pouchDB }lack of browser support - api is overly complex -
- 23. Using web storage no online connection required sessionstorage or localstorage key/value store appcachestorage user browser
- 24. Using web storage APIs currentHighscore lastMove levelsCompleted 1890 D4E5 12 keys values
- 25. Using web storage APIs localStorage.setItem("lastMove", "D4E5"); localStorage.getItem("levelsCompleted"); currentHighscore lastMove levelsCompleted 1890 D4E5 12
- 26. Browser support for…localstorage 8+ 3.5+ 4+4+ 2.1+ 3.2+
- 27. asynchronous Why don’t we just use…indexedDB? webstorage indexedDB synchronous limited to strings supports large data sets no indexes indexes 10mb storage 50mb storage
- 28. Browser support for…indexedDB? *Subfeatures not supported **buggy behavior in iOS8 10+ 10+ 7.1+23+ 4.4+ 8+* **
- 29. Browser support for… webSQL? *is no longer being maintained * n/a n/a 3.1+4+ 2.1+ 3.2+
- 30. browser APIs… localStorage webSql indexedDB limited storage options lack of browser support overly complex api
- 31. localForage… …limitationsoflocalStorage helps us overcome …browserdifferences supports all js objects asynchronous indexedDB, webSQL and localstorage loads best driver for us
- 32. json currentHighscore lastMove levelsCompleted 1890 12 localForage localForage.setItem("lastMove", incrediblyComplexJsonObject) localForage.getItem("levelsCompleted", function(err, val) {…}); takes care of (de-)serialization .then(…) supports promises
- 34. What about syncing? localstorage indexedDB localforage our responsibility
- 35. What about syncing? localstorage indexedDB localforage pouchDB our responsibility
- 36. object pouchDB API pdb.put(o, cb) pdb.get(id, cb) currentHighscore lastMove levelsCompleted 1890 12 _id: "lastMove", lastPos: "D4" newPos: "E5" "lastMove"
- 39. Challenge #3 preparing our ui
- 41. How to detect online status 1 navigator events 2 appcache events 3 xhr events
- 42. Navigator events window.addEventListener("online", function(e) {alert("online");}) online/offline navigator.onLine true/false
- 43. Navigator events is always onlineworks only in offline-modeshows online even if connection is unreliable
- 44. Appcache events applicationCache.addEventListener("error", function(e) { … }); checking progress cached error
- 45. XHR events var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(e) { } if (xhr.status != 200) { } thereisprobablyaconnectionissue
- 47. static and dynamic data with remote server what to take offline if offline-first makes sense useevents prepareui for flawless user experience consider decide to detect offline state cache sync
- 48. with your users some good in the world empathize Do
- 49. Thanks! hanno.co