Eine Web Anwendung ohne stabile Internetanbindung? Wie bitte soll das funktionieren? Im Gegensatz zum Allways-on Paradigma traditioneller Web Anwendungen, ist beim Offline-first Ansatz eine permanente Netzwerkverbindung nicht Pflicht sondern Kür. Eine optimale User Experience auch bzw. gerade im Falle einer schlechten oder nicht vorhandenen Netzverbindung steht im Fokus des Anwendungsdesigns. „Act locally, sync globally“ statt Request-Response-Modell, heißt die Zauberformel. In seiner Session zeigt Lars Röwekamp, was dies im Detail bedeutet und wie die dazu passenden Architektur- und Kommunikationspattern aussehen. Aha-Effekte garantiert!

1. #WISSENTEILEN
Wer braucht schon Internet
Offline-First Architekturen
Lars Röwekamp | CIO New Technologies | open knowledge GmbH
@_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

4. #WISSENTEILEN

5. #WISSENTEILEN
Offline-first Agenda:
Warum?
Wie?

6. #WISSENTEILEN
Warum?
... wir haben 2018!

7. Pendeln
Reisen
Überlastung
Abdeckung

8. Era of Mindshift
No Connection? Now way!

9. #WISSENTEILEN
... it‘s all about
User Expectation

10. I have a
dream ...*
*100 von 100 Nutzern wünschen sich ...

11. #WISSENTEILEN
„Ich erwarte ununterbrochenen
Zugang zu meinem wichtigsten
Content.“

12. #WISSENTEILEN
„Was ich einmal angefangen
habe, möchte ich auch beenden
können.“

13. #WISSENTEILEN
„Content ist änderbar. Daran
sollte auch der offline/online
Status nichts ändern.“

14. #WISSENTEILEN
WTH#!?

15. #WISSENTEILEN

16. 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

17. Offline-first:
Offline ist der Default-Status der
Anwendung. Online ist lediglich
ein “nettes“ Enhancement.*
*für ausgewählte Szenarien
#WISSENTEILEN

18. #WISSENTEILEN
This ain‘t gonna work
in the Web World!

19. #WISSENTEILEN

20. #WISSENTEILEN

21. Wie starten?
Step 1: Offline-Mode
Step 2: Online-Features
Step 3: On/Off UX Pattern
**
*Caching & **Synchronisation
*
#WISSENTEILEN

22. it‘s all about
caching & sync
#WISSENTEILEN

23. #WISSENTEILEN
... let‘s start with
Caching

24. Caching
statische Assets
dynamische Daten
#WISSENTEILEN

25. Static Assets:
Browser Cache
Application Cache
Service Worker
*
*“never ever trust the Browser-Cache“
#WISSENTEILEN

26. App Cache
1st run
#WISSENTEILEN

27. App Cache
1st run
#WISSENTEILEN

28. App Cache
1st run
#WISSENTEILEN

29. App Cache
2nd run
#WISSENTEILEN

30. App Cache
2nd run
#WISSENTEILEN

31. 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

32. Service Worker
„Ein Service Worker ist ein Skript,
das vom Browser im Hintergrund
asynchron ausgeführt wird.“
#WISSENTEILEN

33. Service Worker
„Ein Service Worker ist ein Skript,
das zwischen deiner Web Seite und
dem Netzwerk steht.“
*
*programmierbarer Network-Proxy
#WISSENTEILEN

34. Service Worker
#WISSENTEILEN

35. 1st run
Service Worker
#WISSENTEILEN

36. 1st run
Service Worker
#WISSENTEILEN

37. 1st run
Service Worker
#WISSENTEILEN

38. 1st run
Service Worker
#WISSENTEILEN

39. 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

40. 2nd run
Service Worker
#WISSENTEILEN

41. 3rd run
Service Worker
#WISSENTEILEN

42. 3rd run
Service Worker
#WISSENTEILEN

43. 3rd run
Service Worker
additional Features
• Background Tasks
• Push Notifications
• Periodical Background Sync (future)
• Geofancing (future
#WISSENTEILEN

44. Service Worker GOTCHAS
#01: DIY Caching Pattern
#02: Installation Error Management
#03: Picture-Tag mit srcset
...
#99: Browser Support
#WISSENTEILEN

45. Service Worker
#WISSENTEILEN

46. Dynamic Data:
WebSQL
Web Storages
Indexed DB
#WISSENTEILEN

47. Dynamic Data:
WebSQL
Web Storages
Indexed DB
*
*kaum noch Browser Support
#WISSENTEILEN

48. Web Storages
einfache Key/Value Storages
Session oder Local Storage
auch offline verfügbar
get / set / remove
clear / length
#WISSENTEILEN

49. 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

50. Indexed DB
NoSQL Datenbank für Web Apps
speichert beliebige Objekte
Object Stores als Basis
Key / Object Records
TX & Cursor
#WISSENTEILEN

51. Indexed DB GOTCHAS
#01: komplex
#02: Pending TX bei Browser Shutdown
...
#99: Synchronization
*
*localForage (https://github.com/mozilla/localforage)
#WISSENTEILEN

52. #WISSENTEILEN
... let‘s continue with
Synchronization

53. Synchronisation
User Input / Data
User Interfaces
#WISSENTEILEN

54. Data Sync:
Do-it youself
PouchDB
*
*nein, nein, nein!
#WISSENTEILEN

55. 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

56. PouchDB
#WISSENTEILEN

57. PouchDB
#WISSENTEILEN

58. PouchDB
#WISSENTEILEN

59. PouchDB
#WISSENTEILEN

60. PouchDB
#WISSENTEILEN

61. PouchDB
#WISSENTEILEN

62. PouchDB
#WISSENTEILEN

63. #WISSENTEILEN
... did i mention it‘s all about
User Expectation
a.k.a. Offline-first UX Pattern Catalogue

64. #WISSENTEILEN
Mehr ist mehr
a.k.a. Aggressive Caching

65. #WISSENTEILEN
Mehr ist mehr v.2
a.k.a. Breadth over Depth

66. #WISSENTEILEN
Ich will spielen
a.k.a. Content Interaction. Allways!

67. #WISSENTEILEN
Bin gleich fertig
a.k.a. From Start to Finish

68. #WISSENTEILEN
Sei ehrlich
a.k.a. Informative (Error) Messages

69. #WISSENTEILEN
Sei ehrlich v.2
a.k.a. No Contradictions, pleeease

70. #WISSENTEILEN
Ich weiß was
a.k.a. Remember last User Action(s)

71. #WISSENTEILEN
Langweilig
a.k.a. Empty State Design

72. #WISSENTEILEN
Error Code 4711
a.k.a. Error Message Design

73. #WISSENTEILEN
Alles weg? WTF!
a.k.a. Never purge Cache while offline

74. #WISSENTEILEN
Offline-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.

75. #WISSENTEILEN
... and once again
User Expectation

76. #WISSENTEILEN

77. #WISSENTEILEN

78. #WISSENTEILEN

79. ? ? ?
FRAGEN
#WISSENTEILEN

80. Kontakt
LARS RÖWEKAMP
CIO NEW TECHNOLOGIES
lars.roewekamp@openknowledge.de
+49 (0)441 4082 – 101
@mobileLarson
@_openknowledge
OFFENKUNDIGGUT
#WISSENTEILEN

81. Bildnachweise
#1: © sh22 – istockphoto.com
#8 : © oneinchpunch – fotolia.com
#10: © RichVintage – istockphoto.com
#14: © vasakna – fotolia.com
#18: © vadymvdrobot – fotolia.com
#74: © tomer_turjeman – fotolia.com
All other pictures inside this presentation orginate from pixabay.com
or were created by myself.
#WISSENTEILEN