PWA: Portable Webanwendungen statt nativer Apps

Transkript

1 PWA: Portable Webanwendungen statt nativer Apps Version: 1.0 Orientation in Objects GmbH Weinheimer Str Mannheim Ihre Sprecher Falk Sippach, Loris Bachert Trainer, 2 1

2 Zwei OIO Marken Ihr Expertenhaus für Softwareentwicklung mit Java und JavaScript Schulung, Beratung und Programmierung OIO Braintime Ihr Atlassian Platinum Solution Partner Methoden, Werkzeuge und Lösungen 3 Zusammenschluss Trivadis und OIO Im Mai 2018 haben sich Trivadis und Orientation in Objects (OIO) zusammengeschlossen. Gemeinsam stärken und erweitern wir unser Angebot im Bereich Java und agiler Softwareentwicklung. Gemeinsam bieten wir ein zwölfmonatiges Trainee- Programm an, das Experten für Java- und Webtechnologien ausbildet. Neu finden Sie im Trivadis Trainingsangebot auch Kurse, die von der OIO entwickelt und durchgeführt werden. 4 2

3 Abstract Mobile First war gestern, Offline First heißt die neue Devise. Mit diesem Credo kommen Progressive Web Apps (PWA) nicht nur sehr nahe an native Smartphone-Applikationen heran, sie erhöhen vor allem die User Experience bei fehlender oder sehr schlechter Internetverbindung und müssen nicht mehr über App Stores ausgeliefert werden. Anhand einer Beispielapplikation werden wir die Grundkonzepte wie Service Worker, Application Shell, Caching und Push Notifications diskutieren und einen Ausblick auf die mobilen Anwendungen der Zukunft werfen. 5 Dieser Vortrag ist jetzt auf allen Geräten verfügbar nur ein Scherz, aber das ist, was die Benutzer erwarten 6 3

4 Installieren nativer Anwendungen ist aufwendig! AppStore öffnen App im Store finden Installieren klicken Berechtigungen akzeptieren Auf den Download warten App öffnen Bei jedem Schritt springen etwa 20% der Benutzer ab Besucher pro Monat (top 500 Webseiten vs. top 500 Apps) 15,7 vs. 6 Millionen Millionen Web Apps Source: comscore Mobile Metrix, U.S,

5 Funktionalität Zeit pro Monat (top 500 Webseiten vs top 500 Apps) 11 vs 187 Minuten Minuten Web Apps Source: comscore Mobile Metrix, U.S, Verfügbarkeit & Erreichbarkeit 10 5

6 Wo wir gerade von Benutzererwartungen sprechen 11 Benutzer erwarten, dass eine App funktioniert während sie online sind 6

7 Benutzer erwarten, dass eine App beim Pendeln funktioniert Benutzer erwarten, dass eine App beim Reisen funktioniert 7

8 Benutzer erwarten, dass eine App auch in Ausnahmesituationen funktioniert Benutzer erwarten, dass eine App über Neuigkeiten informiert 8

9 Benutzer erwarten, dass eine App neue Inhalte aufzeigt Benutzer erwarten, dass eine App vertraut aussieht 9

10 Benutzer erwarten, dass eine App im Startmenü auftaucht Viele Erwartungen für eine native App! 20 10

11 21 Benutzer müssen über PWAs informiert werden 11

12 Progressive Web Apps 23 Progressive Web Apps sind eine moderne Art von Web Applikationen kombinieren die Vorteile von nativen Apps und dem Internet sind Webseiten, die die Benutzerwartungen nativer Apps erfüllen 24 12

13 Progressive Web Apps are just websites that took all the right vitamins. Alex Russel

14 Installierbarkeit 27 App Install Banner Proaktive Information, dass die App installiert werden kann Ersetzt: 28 14

15 Service Manifest? HTTPS Interesse Worker??? 29 Web App Manifest JSON Datei Enthält Meta-Informationen über die App Definiert Design und Verhalten der installierten App 30 15

16 theme_color icon name background_color 31 Offline Verfügbarkeit 32 16

17 Service Worker Hintergrund Prozess Dient als Proxy für Netzwerkabfragen Hat Zugriff auf Browser Cache und Datenbank 33 Website Webserver Daten abfragen Cache 34 17

18 Website Webserver Service Worker zurückgeben Cache 35 Website Service Worker Webserver Service Worker Installation vorbereiten Cache 36 18

19 Website Service Worker Webserver Daten abfragen Cache 37 Website Service Worker Webserver Daten zurückgeben Cache 38 19

20 Website Service Worker Webserver Daten cachen Cache 39 Website Service Worker Webserver Daten zurückgeben Cache 40 20

21 Website Service Worker Webserver Daten abfragen Cache 41 Website Service Worker Webserver Daten aus Cache abfragen Cache 42 21

22 Website Service Worker Webserver Daten zurückgeben Cache 43 Website Service Worker Webserver Daten zurückgeben Cache 44 22

23 Browser Tabs Service Worker Webserver 45 Demo 46 23

24 Benutzer über offline Verfügbarkeit informieren Benutzer über Netzwerkänderungen informieren 24

25 49 Background Sync 50 25

26 Task Task Task Background Sync Offline Aufgaben in Queue speichern Aufgaben ausführen sobald man wieder online ist Neue API, bisher nur von Chrome unterstützt 51 Benutzer ist offline Benutzer sendet Nachricht Benutzer sendet andere Nachricht Benutzer löscht erste Nachricht Benutzer ist online Queue 52 26

27 Benutzer über Datensynchronisierung informieren Benutzer über Konflikte informieren 27

28 Push Notifications 55 Push Server Website Beim Push Server registrieren Service Worker Web Server 56 28

29 Push Server Website Subscription erstellen und an Web Server senden Service Worker Web Server 57 Push Server Website Subscription und Nachricht an Push Server senden Service Worker Web Server 58 29

30 Push Server Nachricht an Service Worker senden Website Service Worker Web Server 59 Benutzer über Hey Wie geht s dir? Hey Wie geht s dir? Hast Hast du du Lust Lust ins ins Kino Kino zu zu gehen? Ich bringe einen Fruend mit. Ich bringe *Freund einen Fruend mit. *Freund Push Events informieren 30

31 Denn wenn man sie nicht informiert wird man vielleicht ertappt User Interface 62 31

32 einer PWA ist mehr wie einer nativen App als Das Design einer responsiven Website 63 Man sollte existierende Richtlinien nutzen 32

33 65 Man sollte Standardschriftarten nutzen 33

34 67 Man sollte Native App Web App PWA die App so klein wie möglich halten 34

35 56 MB 9,6 MB 150 KB Android ios PWA 69 Man sollte die App Shell Architektur nutzen 35

36 Man sollte die App so schnell wie möglich machen Man sollte springende Inhalte verhindern 36

37 Man sollte existierende APIs verwenden 74 37

38 Man sollte Google Lighthouse verwenden Google Lighthouse Liefert Messwerte für verschiedene Kriterien Komplette Checkliste einer PWA Unterstützt die App klein, schnell und bedienbar zu halten 76 38

39 Verwendet das schon jemand? 77 Success Story: Twitter 75% mehr Tweets Absprungrate um 20% reduziert Nur 3% der Größe der nativen Android App

40 Success Story: AliExpress Konversionsrate um 104% erhöht Benutzer besuchen doppelt so viele Seite wie vorher 79 Success Story: Tinder Startzeit von 11,91 auf 4,69 Sekunden verringert 90% kleiner als die native Android App Benutzer verweilen länger

41 Success Story: Uber Startzeit ist weniger als 3 Sekunden in einem 2G Netzwerk Nur 50 kb groß 81 Aber wie sieht die Zukunft aus? 41

42 By 2020, Progressive Web Apps will have replaced 50% of generalpurpose consumer facing apps. Gartner Research 83 Benutzer werden noch gelangweilter von Apps 42

43 Benutzer werden Entwickler Benutzer Eine gute PWA PWAs lieben lernen Jeder ist an Bord 43

44 ???? Fragen???? Orientation in Objects GmbH Weinheimer Str Vielen Dank für Ihre Aufmerksamkeit! Orientation in Objects GmbH Weinheimer Str Mannheim 44

45 Further reading Image Sources #60 Left: Middle: Right: #62 Left: Middle: Right: #67: #83 - #86: #87: All other pictures inside this presentation originate from and are under CC0 Creative Commons license or were created by myself