Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Offline first, the painless way

3.513 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Internet

Offline first, the painless way

  1. 1. Offline-First The painless way
  2. 2. Who is this guy? MarcelKalveram IWorkatHanno Iamfromgermany ILiveinValencia/Spain javaScript’ingsincearound2008 RemoteUXTeam weworkwithstartups socialbusiness hanno.co @wearehanno @marcelkalveram
  3. 3. Do we really need offline-first? Traveling Commuting Roaming Internetoutage saturatednetwork
  4. 4. What does offline-first mean? Tomanagedatainanappinsuchaway thatwedon'tneedserveraccessinorderto doanykindofoperation some well-considered s
  5. 5. What is this talk about? Native apps Web sites Web apps Look stuff upDo stuff
  6. 6. When does it make sense? content-heavysites(Nativeapps) singlepagewebapps staticsites real-timeapps self-containedapps not our business
  7. 7. What are the benefits? Nodata-lossfortheuser Offline-firstappsarefaster… appsareusableallthetime
  8. 8. HOW to do offline-first…?
  9. 9. Offline challenges cachingdynamicassets Cachingstaticassets PrepareUIforofflinestate
  10. 10. 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
  11. 11. browsercache serviceworkers appcache Caching mechanisms can’t trust him- lack of browser support- staticdata page assets .html, .css, .jpg, .js, .ttf page assets
  12. 12. 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
  13. 13. Challenge #1 Caching static assets
  14. 14. App cache appcache intercepts http request manifestfile <html manifest="my.appcache"> cache,networkandfallback user browser returns cached data server
  15. 15. server App cache cache,networkandfallback resources can be used offline. online whitelist substitute non- cached resources appcache user browser
  16. 16. app.js image.png font.ttf Manifestr js * cache network fallback -
  17. 17. App cache gotchas 1.filesalwayscomefromthecache server side generated websites single page applications 2.onlyupdatesifmanifestfilechange 3.needtoswapthecachemanually serverappcache user browser applicationCache.swapCache();
  18. 18. Browser support for…appcache 10+ 4+ 3.5+4+ 2.1+ 3.2+
  19. 19. Browser support for…service workers n/a n/a n/a40+ n/a n/a
  20. 20. Challenge #2 caching dynamic assets
  21. 21. 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 -
  22. 22. Using web storage no online connection required sessionstorage or localstorage key/value store appcachestorage user browser
  23. 23. Using web storage APIs currentHighscore lastMove levelsCompleted 1890 D4E5 12 keys values
  24. 24. Using web storage APIs localStorage.setItem("lastMove", "D4E5"); localStorage.getItem("levelsCompleted"); currentHighscore lastMove levelsCompleted 1890 D4E5 12
  25. 25. Browser support for…localstorage 8+ 3.5+ 4+4+ 2.1+ 3.2+
  26. 26. 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
  27. 27. Browser support for…indexedDB? *Subfeatures not supported **buggy behavior in iOS8 10+ 10+ 7.1+23+ 4.4+ 8+* **
  28. 28. Browser support for… webSQL? *is no longer being maintained * n/a n/a 3.1+4+ 2.1+ 3.2+
  29. 29. browser APIs… localStorage webSql indexedDB limited storage options lack of browser support overly complex api
  30. 30. localForage… …limitationsoflocalStorage helps us overcome …browserdifferences supports all js objects asynchronous indexedDB, webSQL and localstorage loads best driver for us
  31. 31. 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
  32. 32. https://github.com/mozilla/localForage
  33. 33. What about syncing? localstorage indexedDB localforage our responsibility
  34. 34. What about syncing? localstorage indexedDB localforage pouchDB our responsibility
  35. 35. object pouchDB API pdb.put(o, cb) pdb.get(id, cb) currentHighscore lastMove levelsCompleted 1890 12 _id: "lastMove", lastPos: "D4" newPos: "E5" "lastMove"
  36. 36. pouchDB sync pdb.sync(remoteDB); new PouchDB("http://localhost:5984/myremotedb")
  37. 37. https://github.com/pouchdb/pouchdb
  38. 38. Challenge #3 preparing our ui
  39. 39. yes no no yes ami online… doihave updates… syncwith server offline app store locally
  40. 40. How to detect online status 1 navigator events 2 appcache events 3 xhr events
  41. 41. Navigator events window.addEventListener("online", function(e) {alert("online");}) online/offline navigator.onLine true/false
  42. 42. Navigator events is always onlineworks only in offline-modeshows online even if connection is unreliable
  43. 43. Appcache events applicationCache.addEventListener("error", function(e) { … }); checking progress cached error
  44. 44. XHR events var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(e) { } if (xhr.status != 200) { } thereisprobablyaconnectionissue
  45. 45. https://github.com/HubSpot/offline
  46. 46. 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
  47. 47. with your users some good in the world empathize Do
  48. 48. Thanks! hanno.co

×