Presentation for E-Business, Hochschule Mannheim about Progressive Web Apps

1. PWA
Progressive Web Apps
Daud Nasir
Steffen Wagner
Natalina Radosevic
Hochschule Mannheim
E-Business SS18 bei Prof. Dr. Michael Gröschel

2. Agenda
● Anforderungen
● Rückblick
● Einführung in PWA - Grundlagen
● Einführung in PWA - Technische Grundlagen
● Bewertungen und Ausblick
● Hands-On
● Selbstübung
2

3. Anforderungen
3

4. App - Anforderungen (Unternehmenssicht)
● Wettbewerbsvorteil
● Hohe Reichweite durch Multiplattform-Präsenz
● Kundenbindung erhöhen (Bestandskunden)
● Benutzerfreundlichkeit
● Geringe Entwicklungs- und Wartungskosten
● Einfache Wartbarkeit
● Geringe Ausgaben für Fortbildung (z.B. neue Programmiersprachen)
● Nutzung von gerätespezifischen Funktionen (z.B. Kamera)
4

5. Rückblick
5

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

9. Einführung in PWA
Grundlagen
9

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

12. PWA - Beispiele
12

13. PWA - Merkmale
● Progressive - Browserunabhängig (Progressive Enhancement)
● Responsive - Automatische Skalierung
● Offline-Funktion
● Sicher - HTTPS
● Kundenbindung - Push-Benachrichtigungen
● Keine Installation - “Add to Home Screen”
● Auffindbar – Suchmaschine
● Verlinkbar - via URL
● App-ähnlich
13
Progressive
Web
App

14. Workflow App-Distribution
● Native Apps werden über App-Stores ausgeliefert
○ Zentraler Marktplatz auf jeder Plattform
○ Updates müssen manuell eingespielt werden
○ Vorgegebene Qualitätsstandards, eventuell schwieriger
Veröffentlichungsprozess
● Progressive Web Apps: Browserview auf dem Homescreen
○ Manifest definiert u.a. Name, Icons, Start URL, …
○ Manuelles “hinzufügen” einer PWA über die jeweilige Webseite
■ “PWA Store” sind Suchmaschinen
14

15. Einführung in PWA
Technische Grundlagen
15

16. PWA - Technische Bestandteile
16

17. PWA - Service Worker
17
● Typ von Web Worker
● “Vermittler” - HTTPS
● JavaScript-Code
● Offline Funktionalität
● Hintergrundaktualisierung
● Push Notifications
● Caching

18. PWA - Web App Manifest
● “Add to Home Screen”
● Definiert
○ Icons
○ Name
○ StartURL
○ Farben
○ Bildschirmmodus
18

19. App Shell
● Shells laden sofort bei
wiederholten Besuchen
● Dynamischer Inhalt füllt
den View
19
Applikations Shell Inhalt
Quelle: https://developers.google.com

20. Push API
20
Quelle: https://medium.com
● Teil vom Service Worker
● Implementierung über
PushManager
● Anfrage von Berechtigungen
● Läuft im Hintergrund

21. Bewertungen und Ausblick
21

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

25. Hands-On
25

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

28. Selbstübung
28

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

31. Fragen?
31

32. Evaluation
32