Mobile- & Offline-First: Mehr als nur Buzzword-Bingo
•
0 gefällt mir•164 views
Eine moderne Web Anwendung ohne Unterstützung der Paradigmen „Mobile-First“ und „Offline-First“ scheint heute kaum noch denkbar. Was aber genau verbirgt sich hinter diesen Begriffen und wie lässt sich das ganze realisieren? Reicht es aus, einfach nur das richtige Framework zu verwenden? Oder geht es evtl. nicht doch um deutlich mehr als nur Buzzword-Bingo? Fragen über Fragen, die auf eine Antwort warten.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (10)
Ähnlich wie Mobile- & Offline-First: Mehr als nur Buzzword-Bingo
Ähnlich wie Mobile- & Offline-First: Mehr als nur Buzzword-Bingo (20)
Mehr von OPEN KNOWLEDGE GmbH
Mehr von OPEN KNOWLEDGE GmbH (20)
Mobile- & Offline-First: Mehr als nur Buzzword-Bingo
- 1. Lars Röwekamp | CIO New Technologies | open knowledge GmbH Mehr als nur Buzzword-Bingo Mobile & Offline First #WISSENTEILEN @_openKnowledge | @mobileLarson
- 2. ÜBER OPEN KNOWLEDGE Branchenneutrale Softwareentwicklung und IT-Beratung #WISSENTEILEN
- 3. ÜBER MICH Wer bin ich - und wenn ja, wie viele? • CIO New Technologies • Enterprise & Mobile • Autor, Speaker, Coach & Mentor • Snowboard & MTB Enthusiast • Mehrfacher Vater, einfacher Ehemann Lars Röwekamp (a.k.a. @mobileLarson) LR #WISSENTEILEN
- 7. „The expectation that I can get what i want in my immediate context and moments of need.“
- 8. #WISSENTEILEN *Where do you use the following devices during a typical week? Your „immediate context“?*
- 9. Mobile ist Pflicht ... #WISSENTEILEN
- 10. ... und nicht Kür! #WISSENTEILEN
- 11. #WISSENTEILEN And your „moments of need“?
- 12. Offline ist Pflicht ... #WISSENTEILEN
- 13. ... und nicht Kür! #WISSENTEILEN
- 14. #WISSENTEILEN Mobile ist Pflicht und nicht Kür
- 15. #WISSENTEILEN Mobile ist Pflicht und nicht Kür
- 16. #WISSENTEILEN Mobile via Responsive Design ...
- 17. #WISSENTEILEN ... und Graceful Degradation?
- 18. #WISSENTEILEN ... oder Progressive Enhancement?
- 19. #WISSENTEILEN
- 20. #WISSENTEILEN
- 21. Responsive Design im Reality Check #WISSENTEILEN „Bros, not Twins!“
- 23. Omni Channel via Customer First • Kontext • Verhalten • Bedürfnisse • ... #WISSENTEILEN
- 24. Omni Channel via Customer First • Multi-Devices • Sharing • Syncing • ... #WISSENTEILEN
- 26. #WISSENTEILEN Warum? ... wir haben 2018!
- 28. #WISSENTEILEN
- 29. #WISSENTEILEN ... it‘s all about User Expectation* (*a.k.a. User Experience)
- 30. I have a dream ...* *100 von 100 Nutzern wünschen sich ...
- 31. #WISSENTEILEN „Ich erwarte ununterbrochenen Zugang zu meinem wichtigsten Content.“
- 32. #WISSENTEILEN „Was ich einmal angefangen habe, möchte ich auch beenden können.“
- 33. #WISSENTEILEN „Content ist änderbar. Daran sollte auch der offline/online Status nichts ändern.“
- 35. #WISSENTEILEN
- 36. Offline-first: Offline ist kein Fehler sondern einer von mehreren gültigen Zuständen der Anwendung. * *Wi-Fi, LTE, 4G, 3G, Edge, GPS, Bluetooth, RFID #WISSENTEILEN
- 37. Offline-first: Offline ist der Default-Status der Anwendung. Online ist lediglich ein “nettes“ Enhancement.* *für ausgewählte Szenarien #WISSENTEILEN
- 38. #WISSENTEILEN This ain‘t gonna work in the Web World!
- 39. #WISSENTEILEN
- 40. #WISSENTEILEN
- 41. Wie starten? Step 1: Offline-Mode Step 2: Online-Features Step 3: On/Off UX Pattern ** *Caching & **Synchronisation * #WISSENTEILEN
- 42. it‘s all about caching & sync
- 43. #WISSENTEILEN ... let‘s start with Caching
- 45. Static Assets: Browser Cache Application Cache Service Worker * *“never ever trust the Browser-Cache“ #WISSENTEILEN
- 51. App Cache GOTCHAS #01: einmal Cache, immer Cache #02: Manifest File als Cache-Indikator #03: Inner non-cached Ressourcen #04: ergänzend zum Browser-Cache ... #99: App Cache ist DEPRECATED #WISSENTEILEN
- 52. #WISSENTEILEN Service Worker „Ein Service Worker ist ein Skript, das vom Browser im Hintergrund asynchron ausgeführt wird.“
- 53. #WISSENTEILEN Service Worker „Ein Service Worker ist ein Skript, das zwischen deiner Web Seite und dem Netzwerk steht.“ * *programmierbarer Network-Proxy
- 59. 2nd run Service Worker fetch(...)-Stratgies • Cache only (static content) • Network only (analytic pings) • Cache 1st, Network fallback (default) • Cache-Network race (for slow disk) • Network first, Cache fallback (dynamic) • Cache 1st plus Network 2nd (do both) • Generic fallback (!in Cache, !Network) (see also https://serviceworke.rs) #WISSENTEILEN
- 63. 3rd run Service Worker additional Features • Background Tasks • Push Notifications • Periodical Background Sync (future) • Geofancing (future #WISSENTEILEN
- 64. Service Worker GOTCHAS #01: DIY Caching Pattern #02: Installation Error Management #03: Picture-Tag / srcset-Attribute ... #99: Browser Support #WISSENTEILEN
- 66. Dynamic Data: WebSQL Web Storages Indexed DB #WISSENTEILEN
- 67. Dynamic Data: WebSQL Web Storages Indexed DB * *kaum noch Browser Support #WISSENTEILEN
- 68. Web Storages einfache Key/Value Storages Session oder Local Storage auch offline verfügbar get / set / remove clear / length #WISSENTEILEN
- 69. Web Storages GOTCHAS #01: synchrone API #02: nur Strings als Values #03: kein Index, keine QL #04: 2-10Mb Speicherlimit #05: Security Issues bei Local Storage * * https://github.com/bebraw/jswiki/wiki/Storage-libraries/ #WISSENTEILEN
- 70. Indexed DB NoSQL Datenbank für Web Apps speichert beliebige Objekte Object Stores als Basis Key / Object Records TX & Cursor #WISSENTEILEN
- 71. Indexed DB GOTCHAS #01: komplex #02: Pending TX bei Browser Shutdown ... #99: Synchronization * *localForage (https://github.com/mozilla/localforage) #WISSENTEILEN
- 72. #WISSENTEILEN ... let‘s continue with Synchronization
- 73. Synchronisation User Input / Data User Interfaces #WISSENTEILEN
- 74. Data Sync: Do-it youself PouchDB * *nein, nein, nein! #WISSENTEILEN
- 75. PouchDB Open-Source JavaScript In-Browser DB Sync via Couch Replication Protocol nutzt Indexed DB (o. Web SQL) funktioniert online und offline extrem klein (46KB) #WISSENTEILEN
- 83. #WISSENTEILEN ... did i mention it‘s all about User Expectation a.k.a. Offline-first UX Pattern Catalogue
- 84. #WISSENTEILEN Mehr ist mehr a.k.a. Aggressive Caching
- 85. #WISSENTEILEN Mehr ist mehr v.2 a.k.a. Breadth over Depth
- 86. #WISSENTEILEN Ich will spielen a.k.a. Content Interaction. Allways!
- 87. #WISSENTEILEN Bin gleich fertig a.k.a. From Start to Finish
- 88. #WISSENTEILEN Sei ehrlich a.k.a. Informative (Error) Messages
- 89. #WISSENTEILEN Sei ehrlich v.2 a.k.a. No Contradictions, pleeease
- 90. #WISSENTEILEN Ich weiß was a.k.a. Remember last User Action(s)
- 91. #WISSENTEILEN Langweilig a.k.a. Empty State Design
- 92. #WISSENTEILEN Error Code 4711 a.k.a. Error Message Design
- 93. #WISSENTEILEN Alles weg? WTF! a.k.a. Never purge Cache while offline
- 94. #WISSENTEILEN Customer-first: „The expectation that I can get what i want in my immediate context and moments of need.“
- 95. #WISSENTEILEN Customer-first: a.k.a. „Best of both Worlds“ Anwendung ist jederzeit nutzbar. Keine Datenverluste falls offline. Dank Caches & Co extrem schnell! Sinnvolle Use-Cases evaluieren. Omni-Channel statt Multi-Channel!
- 96. #WISSENTEILEN ... and once again User Expectation
- 97. #WISSENTEILEN
- 98. #WISSENTEILEN
- 99. #WISSENTEILEN
- 101. Kontakt LARS RÖWEKAMP CIO NEW TECHNOLOGIES lars.roewekamp@openknowledge.de +49 (0)441 4082 – 101 @mobileLarson @_openknowledge OFFENKUNDIGGUT #WISSENTEILEN
- 102. Bildnachweise #1: © CatLane – istockphoto.com #9 : © oneinchpunch – fotolia.com #31: © RichVintage – istockphoto.com #35: © vasakna – fotolia.com #39: © vadymvdrobot – fotolia.com #95: © tomer_turjeman – fotolia.com All other pictures inside this presentation orginate from pixabay.com or were created by myself. #WISSENTEILEN