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

4.106 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
  • Dating for everyone is here: ❶❶❶ http://bit.ly/2F4cEJi ❶❶❶
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • Sex in your area is here: ❶❶❶ http://bit.ly/2F4cEJi ❶❶❶
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/qURD } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/qURD } ......................................................................................................................... Download doc Ebook here { https://soo.gd/qURD } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Antworten 
    Sind Sie sicher, dass Sie …  Ja  Nein
    Ihre Nachricht erscheint hier

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

×