6. Native Apps
● Smartphone-App
● Objective C (iOS) | Java (Android) | C# (Windows)
● Schnelle Leistung
● Zuverlässigkeit
● Im App-Store zu finden
● Negativ:
○ Nicht Plattformunabhängig
○ Hoher Preis- und Zeitaufwand
6
7. Cross-Platform Native Apps
● "write code once, run on multiple platforms"
● Xamarin: Microsoft | C#
● React Native: Facebook | JavaScript
● Titanium: JavaScript, eigene APIs
7
8. Hybrid Apps
● Teilweise native Apps, teilweise Web-Apps
● Im App-Store zu finden
● JavaScript, HTML, CSS
● Zugriff auf Hardware
● Laufen in einem Webbrowser
● Frameworks:
○ PhoneGap/Cordova
○ Canvas
8
10. Fragen an Sie!
● Wann hast Du zum letzten Mal die mobile Webseite einer App und nicht das
Pendant ihrer nativen App besucht?
● Hat die Web App länger benötigt zum Laden?
● War es eine angenehme Erfahrung? Was hat Dir daran gefallen? Was hätte
besser sein können?
10
11. Was ist eine Progressive Web App?
“Progressive Web App (PWA) ist eine Webseite, die ähnlich wie eine
native App zu bedienen ist. Sie wird mit HTML, CSS und JavaScript
erstellt, sind aber bezüglich Optik und Bedienung einer native App
ähnlich, z.B. können sie Offline-fähig und können auf dem
Desktop/Homescreen verankert werden.”
Quelle: www.it-visions.de
11
Quelle: Sheppard, Dennis: Beginning Progressive Web App Development
22. Vorteile von Progressive Web Apps
● Plattformübergreifend
● Einfache Veröffentlichung
● Keine Installation nötig
● Schnell
● Sofortige Updates
● Offline verfügbar
● SEO, da es sich um HTML handelt
● Benutzerfreundlich / “angenehme Bedienung”
22
23. Kritische Bewertung
23
● Keine vollständige Unterstützung von allen Browsern
● Einige Hardwarefeatures werden (noch) nicht unterstützt (z.B. Fingerprint)
● Einige Berechtigungen können nicht angefragt werden
○ Telefon, Kalender, Kontakte
● Niedrigere Präsenz durch Fehlen in App-Stores
● Fehlende (externe) Qualitätssicherung (z.B. durch App Store)
24. PWA - Zukunft
● Große Unternehmen entwickeln PWA´s
○ Aber auch native Apps parallel
● Mögliches plattformübergreifendes App-Modell der Zukunft
● Apple folgt langsam dem PWA-Trend (ab iOS11)
● Kein vollständiger Ersatz von nativen Apps
24
26. Werkzeuge
26
● Beliebige WebIDE (Atom, IntelliJ,...) mit JS, HTML und CSS “Kenntnissen”
● Freie Wahl von JS Frameworks und Libraries (React, jQuery, Workbox,...)
● Debugging über Browser (Service Workers, Cache Storage) möglich
27. ebiCAM
● HTML/CSS/JS
● Keine externen Abhängigkeiten
● Caching per serviceWorker
● Zugriff auf Kamera per
getUserMedia()
● Speicherung der Aufnahme
● Auf dem Homescreen “ablegbar”
Run: https://bit.ly/2sltvBm
Src: https://bit.ly/2JlDhx3
27
29. Ihre erste Progressive Web App - “Weather”
Was Sie lernen werden
● Wie man eine PWA designed und konstruiert (“app shell
method”)
● Wie die App offline funktioniert
● Wie man Daten für den späteren Offlinegebrauch speichert
https://goo.gl/ZyX8Yk
29
30. Readings & Viewings
● Google Inc., Web Fundamentals
○ URL: https://developers.google.com/web/fundamentals/codelabs
● Sheppard, Dennis: Beginning Progressive Web App Development
○ ISBN-13: 978-1-4842-3090-9
● Steiner, Thomas: What is in a Web View?
○ DOI: 10.1145/3184558.3188742
● How-to: Progressive Web Apps praktisch erklärt
○ URL: https:/https://jaxenter.de/pwa-how-to-progressive-web-apps-67624
30