Download as PDF, PPTX
Offline first, the painless way
- 1.
- 2. Who is thisguy? MarcelKalveram IWorkatHanno Iamfromgermany ILiveinValencia/Spain javaScript’ingsincearound2008 RemoteUXTeam weworkwithstartups socialbusiness hanno.co @wearehanno @marcelkalveram
- 3. Do we reallyneed offline-first? Traveling Commuting Roaming Internetoutage saturatednetwork
- 5. What does offline-firstmean? Tomanagedatainanappinsuchaway thatwedon'tneedserveraccessinorderto doanykindofoperation some well-considered s
- 6. What is thistalk about? Native apps Web sites Web apps Look stuff upDo stuff
- 7. When does itmake sense? content-heavysites(Nativeapps) singlepagewebapps staticsites real-timeapps self-containedapps not our business
- 8. What are thebenefits? Nodata-lossfortheuser Offline-firstappsarefaster… appsareusableallthetime
- 9.
- 10.
- 11. xhr, remote apicalls .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 trusthim- lack of browser support- staticdata page assets .html, .css, .jpg, .js, .ttf page assets
- 13. indexedDB webSql webstorage Caching mechanisms localforage pouchDB }lack ofbrowser support - api is overly complex - dynamicdata xhr, remote api calls .json, .xml, .csv xhr, remote api calls
- 14.
- 15. App cache appcache intercepts httprequest manifestfile <html manifest="my.appcache"> cache,networkandfallback user browser returns cached data server
- 16. server App cache cache,networkandfallback resources canbe used offline. online whitelist substitute non- cached resources appcache user browser
- 17.
- 18. App cache gotchas 1.filesalwayscomefromthecache serverside 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…serviceworkers n/a n/a n/a40+ n/a n/a
- 21.
- 22. Caching mechanisms dynamicdata xhr, remoteapi 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 noonline connection required sessionstorage or localstorage key/value store appcachestorage user browser
- 24. Using web storageAPIs currentHighscore lastMove levelsCompleted 1890 D4E5 12 keys values
- 25. Using web storageAPIs 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 wejust use…indexedDB? webstorage indexedDB synchronous limited to strings supports large data sets no indexes indexes 10mb storage 50mb storage
- 28. Browser support for…indexedDB? *Subfeaturesnot 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 storageoptions lack of browser support overly complex api
- 31. localForage… …limitationsoflocalStorage helps us overcome …browserdifferences supportsall 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
- 33.
- 34.
- 35.
- 36. object pouchDB API pdb.put(o, cb)pdb.get(id, cb) currentHighscore lastMove levelsCompleted 1890 12 _id: "lastMove", lastPos: "D4" newPos: "E5" "lastMove"
- 37.
- 38.
- 39.
- 40.
- 41. How to detectonline 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 alwaysonlineworks 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
- 46.
- 47. static and dynamicdata 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 somegood in the world empathize Do
- 49.