SlideShare ist ein Scribd-Unternehmen logo
1 von 81
Downloaden Sie, um offline zu lesen
#WISSENTEILEN
Wer braucht schon Internet
Offline-First Architekturen
Lars Röwekamp | CIO New Technologies | open knowledge GmbH
@_openKnowledge | @mobileLarson
ÜBER OPEN KNOWLEDGE
Branchenneutrale Softwareentwicklung und IT-Beratung
#WISSENTEILEN
Ü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
#WISSENTEILEN
#WISSENTEILEN
Offline-first Agenda:
Warum?
Wie?
#WISSENTEILEN
Warum?
... wir haben 2018!
Pendeln
Reisen
Überlastung
Abdeckung
Era of Mindshift
No Connection? Now way!
#WISSENTEILEN
... it‘s all about
User Expectation
I have a
dream ...*
*100 von 100 Nutzern wünschen sich ...
#WISSENTEILEN
„Ich erwarte ununterbrochenen
Zugang zu meinem wichtigsten
Content.“
#WISSENTEILEN
„Was ich einmal angefangen
habe, möchte ich auch beenden
können.“
#WISSENTEILEN
„Content ist änderbar. Daran
sollte auch der offline/online
Status nichts ändern.“
#WISSENTEILEN
WTH#!?
#WISSENTEILEN
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
Offline-first:
Offline ist der Default-Status der
Anwendung. Online ist lediglich
ein “nettes“ Enhancement.*
*für ausgewählte Szenarien
#WISSENTEILEN
#WISSENTEILEN
This ain‘t gonna work
in the Web World!
#WISSENTEILEN
#WISSENTEILEN
Wie starten?
Step 1: Offline-Mode
Step 2: Online-Features
Step 3: On/Off UX Pattern
**
*Caching & **Synchronisation
*
#WISSENTEILEN
it‘s all about
caching & sync
#WISSENTEILEN
#WISSENTEILEN
... let‘s start with
Caching
Caching
statische Assets
dynamische Daten
#WISSENTEILEN
Static Assets:
Browser Cache
Application Cache
Service Worker
*
*“never ever trust the Browser-Cache“
#WISSENTEILEN
App Cache
1st run
#WISSENTEILEN
App Cache
1st run
#WISSENTEILEN
App Cache
1st run
#WISSENTEILEN
App Cache
2nd run
#WISSENTEILEN
App Cache
2nd run
#WISSENTEILEN
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
Service Worker
„Ein Service Worker ist ein Skript,
das vom Browser im Hintergrund
asynchron ausgeführt wird.“
#WISSENTEILEN
Service Worker
„Ein Service Worker ist ein Skript,
das zwischen deiner Web Seite und
dem Netzwerk steht.“
*
*programmierbarer Network-Proxy
#WISSENTEILEN
Service Worker
#WISSENTEILEN
1st run
Service Worker
#WISSENTEILEN
1st run
Service Worker
#WISSENTEILEN
1st run
Service Worker
#WISSENTEILEN
1st run
Service Worker
#WISSENTEILEN
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
2nd run
Service Worker
#WISSENTEILEN
3rd run
Service Worker
#WISSENTEILEN
3rd run
Service Worker
#WISSENTEILEN
3rd run
Service Worker
additional Features
• Background Tasks
• Push Notifications
• Periodical Background Sync (future)
• Geofancing (future
#WISSENTEILEN
Service Worker GOTCHAS
#01: DIY Caching Pattern
#02: Installation Error Management
#03: Picture-Tag mit srcset
...
#99: Browser Support
#WISSENTEILEN
Service Worker
#WISSENTEILEN
Dynamic Data:
WebSQL
Web Storages
Indexed DB
#WISSENTEILEN
Dynamic Data:
WebSQL
Web Storages
Indexed DB
*
*kaum noch Browser Support
#WISSENTEILEN
Web Storages
einfache Key/Value Storages
Session oder Local Storage
auch offline verfügbar
get / set / remove
clear / length
#WISSENTEILEN
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
Indexed DB
NoSQL Datenbank für Web Apps
speichert beliebige Objekte
Object Stores als Basis
Key / Object Records
TX & Cursor
#WISSENTEILEN
Indexed DB GOTCHAS
#01: komplex
#02: Pending TX bei Browser Shutdown
...
#99: Synchronization
*
*localForage (https://github.com/mozilla/localforage)
#WISSENTEILEN
#WISSENTEILEN
... let‘s continue with
Synchronization
Synchronisation
User Input / Data
User Interfaces
#WISSENTEILEN
Data Sync:
Do-it youself
PouchDB
*
*nein, nein, nein!
#WISSENTEILEN
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
PouchDB
#WISSENTEILEN
PouchDB
#WISSENTEILEN
PouchDB
#WISSENTEILEN
PouchDB
#WISSENTEILEN
PouchDB
#WISSENTEILEN
PouchDB
#WISSENTEILEN
PouchDB
#WISSENTEILEN
#WISSENTEILEN
... did i mention it‘s all about
User Expectation
a.k.a. Offline-first UX Pattern Catalogue
#WISSENTEILEN
Mehr ist mehr
a.k.a. Aggressive Caching
#WISSENTEILEN
Mehr ist mehr v.2
a.k.a. Breadth over Depth
#WISSENTEILEN
Ich will spielen
a.k.a. Content Interaction. Allways!
#WISSENTEILEN
Bin gleich fertig
a.k.a. From Start to Finish
#WISSENTEILEN
Sei ehrlich
a.k.a. Informative (Error) Messages
#WISSENTEILEN
Sei ehrlich v.2
a.k.a. No Contradictions, pleeease
#WISSENTEILEN
Ich weiß was
a.k.a. Remember last User Action(s)
#WISSENTEILEN
Langweilig
a.k.a. Empty State Design
#WISSENTEILEN
Error Code 4711
a.k.a. Error Message Design
#WISSENTEILEN
Alles weg? WTF!
a.k.a. Never purge Cache while offline
#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.
#WISSENTEILEN
... and once again
User Expectation
#WISSENTEILEN
#WISSENTEILEN
#WISSENTEILEN
? ? ?
FRAGEN
#WISSENTEILEN
Kontakt
LARS RÖWEKAMP
CIO NEW TECHNOLOGIES
lars.roewekamp@openknowledge.de
+49 (0)441 4082 – 101
@mobileLarson
@_openknowledge
OFFENKUNDIGGUT
#WISSENTEILEN
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

Weitere ähnliche Inhalte

Ähnlich wie Offline-first Architekturen: Wer bitte braucht schon Internet

Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Peter Rozek
 

Ähnlich wie Offline-first Architekturen: Wer bitte braucht schon Internet (20)

Microservices Architecture: Architektur und Patterns
Microservices Architecture: Architektur und PatternsMicroservices Architecture: Architektur und Patterns
Microservices Architecture: Architektur und Patterns
 
Cloud Architekturen - von "less Server" zu Serverless
Cloud Architekturen - von "less Server" zu ServerlessCloud Architekturen - von "less Server" zu Serverless
Cloud Architekturen - von "less Server" zu Serverless
 
Herausforderung „Multi-Channel Architecture”
Herausforderung „Multi-Channel Architecture”Herausforderung „Multi-Channel Architecture”
Herausforderung „Multi-Channel Architecture”
 
Microservices Migration: Vom Monolithen zu Microservices
Microservices Migration: Vom Monolithen zu MicroservicesMicroservices Migration: Vom Monolithen zu Microservices
Microservices Migration: Vom Monolithen zu Microservices
 
Das passende Backend für meine Apps
Das passende Backend für meine AppsDas passende Backend für meine Apps
Das passende Backend für meine Apps
 
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX GrundlageDevice Agnostic: Geräteunabhängiges Design als UX Grundlage
Device Agnostic: Geräteunabhängiges Design als UX Grundlage
 
Webstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen BereichWebstandards auf dem Weg zu Standards im Mobilen Bereich
Webstandards auf dem Weg zu Standards im Mobilen Bereich
 
Java EE meets Microservices
Java EE meets MicroservicesJava EE meets Microservices
Java EE meets Microservices
 
Herausforderung „Multi-Channel“-Architektur
Herausforderung „Multi-Channel“-ArchitekturHerausforderung „Multi-Channel“-Architektur
Herausforderung „Multi-Channel“-Architektur
 
4×4: Big Data in der Cloud
4×4: Big Data in der Cloud4×4: Big Data in der Cloud
4×4: Big Data in der Cloud
 
Frontend Development für Backend Developer
Frontend Development für Backend DeveloperFrontend Development für Backend Developer
Frontend Development für Backend Developer
 
CQRS, der etwas andere Architekturansatz
CQRS, der etwas andere ArchitekturansatzCQRS, der etwas andere Architekturansatz
CQRS, der etwas andere Architekturansatz
 
Bernhard Wick - appserver.io - code.talks 2015
 Bernhard Wick - appserver.io - code.talks 2015 Bernhard Wick - appserver.io - code.talks 2015
Bernhard Wick - appserver.io - code.talks 2015
 
Development in der Cloud-Ära
Development in der Cloud-ÄraDevelopment in der Cloud-Ära
Development in der Cloud-Ära
 
Development in der Cloud-Ära
Development in der Cloud-ÄraDevelopment in der Cloud-Ära
Development in der Cloud-Ära
 
Serverless: The Missing Manual
Serverless: The Missing ManualServerless: The Missing Manual
Serverless: The Missing Manual
 
Where are all transactions gone? Was in_der_cloud_alles_verboten_ist
Where are all transactions gone? Was in_der_cloud_alles_verboten_istWhere are all transactions gone? Was in_der_cloud_alles_verboten_ist
Where are all transactions gone? Was in_der_cloud_alles_verboten_ist
 
Hilfe, ich will meinen Monolithen zurück!
Hilfe, ich will meinen Monolithen zurück!Hilfe, ich will meinen Monolithen zurück!
Hilfe, ich will meinen Monolithen zurück!
 
Setting-up Elasticsearch, Logstash, Kibana für agile Datenanalyse
Setting-up Elasticsearch, Logstash, Kibana für agile DatenanalyseSetting-up Elasticsearch, Logstash, Kibana für agile Datenanalyse
Setting-up Elasticsearch, Logstash, Kibana für agile Datenanalyse
 
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
Auf geht‘s in die Cloud: „Das kann doch nicht so schwer sein!“
 

Mehr von OPEN KNOWLEDGE GmbH

Mehr von OPEN KNOWLEDGE GmbH (20)

Warum der Computer "Nein" sagt - Mehr Nachvollziehbarkeit dank Explainable AI
Warum der Computer "Nein" sagt - Mehr Nachvollziehbarkeit dank Explainable AIWarum der Computer "Nein" sagt - Mehr Nachvollziehbarkeit dank Explainable AI
Warum der Computer "Nein" sagt - Mehr Nachvollziehbarkeit dank Explainable AI
 
Machine Learning? Ja gerne! Aber was und wie? Eine Kurzanleitung für den erfo...
Machine Learning? Ja gerne! Aber was und wie? Eine Kurzanleitung für den erfo...Machine Learning? Ja gerne! Aber was und wie? Eine Kurzanleitung für den erfo...
Machine Learning? Ja gerne! Aber was und wie? Eine Kurzanleitung für den erfo...
 
From Zero to still Zero: Die schönsten Fehler auf dem Weg in die Cloud
From Zero to still Zero: Die schönsten Fehler auf dem Weg in die CloudFrom Zero to still Zero: Die schönsten Fehler auf dem Weg in die Cloud
From Zero to still Zero: Die schönsten Fehler auf dem Weg in die Cloud
 
Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)Der Spagat zwischen BIAS und FAIRNESS (2024)
Der Spagat zwischen BIAS und FAIRNESS (2024)
 
FEHLENDE DATEN? (K)EIN PROBLEM!: Die Kunst der Data Imputation
FEHLENDE DATEN? (K)EIN PROBLEM!: Die Kunst der Data ImputationFEHLENDE DATEN? (K)EIN PROBLEM!: Die Kunst der Data Imputation
FEHLENDE DATEN? (K)EIN PROBLEM!: Die Kunst der Data Imputation
 
Nie wieder Log-Files!
Nie wieder Log-Files!Nie wieder Log-Files!
Nie wieder Log-Files!
 
Cloud-native and Enterprise Java? Hold my beer!
Cloud-native and Enterprise Java? Hold my beer!Cloud-native and Enterprise Java? Hold my beer!
Cloud-native and Enterprise Java? Hold my beer!
 
From Zero to still Zero: The most beautiful mistakes going into the cloud.
From Zero to still Zero: The most beautiful mistakes going into the cloud. From Zero to still Zero: The most beautiful mistakes going into the cloud.
From Zero to still Zero: The most beautiful mistakes going into the cloud.
 
API Expand Contract
API Expand ContractAPI Expand Contract
API Expand Contract
 
Ready for the Future: Jakarta EE in Zeiten von Cloud Native & Co
Ready for the Future: Jakarta EE in Zeiten von Cloud Native & CoReady for the Future: Jakarta EE in Zeiten von Cloud Native & Co
Ready for the Future: Jakarta EE in Zeiten von Cloud Native & Co
 
Shared Data in verteilten Architekturen
Shared Data in verteilten ArchitekturenShared Data in verteilten Architekturen
Shared Data in verteilten Architekturen
 
Machine Learning mit TensorFlow.js
Machine Learning mit TensorFlow.jsMachine Learning mit TensorFlow.js
Machine Learning mit TensorFlow.js
 
It's not Rocket Science: Neuronale Netze
It's not Rocket Science: Neuronale NetzeIt's not Rocket Science: Neuronale Netze
It's not Rocket Science: Neuronale Netze
 
Shared Data in verteilten Systemen
Shared Data in verteilten SystemenShared Data in verteilten Systemen
Shared Data in verteilten Systemen
 
Mehr Sicherheit durch Automatisierung
Mehr Sicherheit durch AutomatisierungMehr Sicherheit durch Automatisierung
Mehr Sicherheit durch Automatisierung
 
API-Design, Microarchitecture und Testing
API-Design, Microarchitecture und TestingAPI-Design, Microarchitecture und Testing
API-Design, Microarchitecture und Testing
 
Supersonic Java für die Cloud: Quarkus
Supersonic Java für die Cloud: QuarkusSupersonic Java für die Cloud: Quarkus
Supersonic Java für die Cloud: Quarkus
 
Das ist doch alles nur Frontend - Wer braucht da schon Architektur?
Das ist doch alles nur Frontend - Wer braucht da schon Architektur?Das ist doch alles nur Frontend - Wer braucht da schon Architektur?
Das ist doch alles nur Frontend - Wer braucht da schon Architektur?
 
Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...
Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...
Das Product Goal oder "Ohne Ziele laufen eben alle in die Richtung, die ihnen...
 
Serverless Survival Guide
Serverless Survival GuideServerless Survival Guide
Serverless Survival Guide
 

Offline-first Architekturen: Wer bitte braucht schon Internet