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