Progressive Web Apps mit APEX. Till Albert

Transkript

1 Progressive Web Apps mit APEX Till Albert

2 Facts & Figures IT-Beratungsunternehmen Branchen übergreifend Hersteller neutral Hauptsitz Ratingen Niederlassung Frankfurt am Main 250 Beschäftigte Inhabergeführt 28 Mio. Euro Umsatz Gründung 1994 Zertifizierter Partner von Oracle und Microsoft Ausbildungsbetrieb Partner im dualen Studium

3 Über mich Till Albert Seit November 2014 bei der MT AG Berater Oracle APEX und JavaScript Studium Bachelor 3

4 Inhalt Was ist eine Progressive Web App? Möglichkeiten mit APEX Die Zukunft der PWA 4

5 Apps mit APEX? Bisher meist mit Cordova Vorteile Zugriff auf APIs vom OS ( Android / IOS ) Nachteile Distribution über diverse APP-Stores (Apple!!!) Zusätzlicher Entwicklungsaufwand Keine echte Offline-Fähigkeit 5

6 Desktop Anwendungen mit APEX? Bisher nur mit Electron Vorteile Direkten Zugriff auf Betriebssystem Notifications Läuft durch eine fixe Laufzeitumgebung garantiert stabil Nachteile Zusätzlicher Entwicklungsaufwand nötig Laufzeitumgebung wird immer mitgeliefert (Chromium und Node.js in JEDER Anwendung) 6

7 Was ist eine Progressive Web APP? 7

8 Defintion PWA Progressive Enhancement Grundlegende Websitefunktionen auf jedem Endgerät Mit schwacher / keiner Internetverbindung 8

9 Eigenschaften einer PWA Funktioniert in allen Browsern / Plattformen Responsive und App-like Funktioniert bei jeder Internetverbindung Push-Notifications 9

10 Eigenschaften einer PWA Schnelle Ladezeit durch App-Shell 10

11 Eigenschaften einer PWA Keine Installation über App-Stores notwendig (Add to Homescreen Feature) Automatische Updates (da sie Websites sind) Integration in App-Stores teilw. möglich 11

12 PWA sind schon oft im Einsatz und die Unternehmen binden ihre Kunden Die Progressive Web App von Alibaba verzeichnet unter ios 14 % mehr Nutzer und konnte die ios Conversion um 76 % steigern. Unter Android werden sogar mehr als das Doppelte so viele Nutzer (30 %) vermerkt. 12

13 PWA Browser-Support 13

14 PWA Browser-Support Durch Progressive Enhancement Auch wenn nicht alle Features in allen Browsern funktionieren Die Grundfunktionalitäten funktionieren in allen Browsern 14

15 Aufbau einer PWA 15

16 Service Worker 16

17 Service Worker Überblick JavaScript unabhängig vom Main-Thread Als Proxy zwischen Client und Server Nur über HTTPS in seiner Domain Eingeschränkter DOM-Zugriff 17

18 Service Worker Überblick 18

19 Service Worker Überblick Offline-Fähigkeit Lesen aus dem Cache Proxy entscheidet ob Cache oder Online Ressource Push-Notifications Den Nutzer auch außerhalb der Website benachrichtigen 19

20 Web App Manifest 20

21 21

22 Implementierung in APEX 22

23 Implementierung APEX hat bereits PWA Eigenschaften Responsive Web Anwendung App-ähnliches Interface HTTPS 23

24 Implementierung aber noch nicht alles Einfache Installation der Anwendung als App Offline Verfügbarkeit ( Service-Worker) App-Shell 24

25 Implementierung HTTPS ist Pflicht! 25

26 Implementierung Zugriff zum Root des Webservers

27 Implementierung 27

28 Manifest erstellen 28

29 29

30 30

31 31

32 32

33 Demo Desktop PWA 33

34 Offline APEX-Apps 34

35 APEX offline verfügbar machen Service Worker 35

36 Caching Strategien Network first, then cache 36

37 Caching Strategien Network first, then cache 37

38 Caching Strategien Cache first, falling back to network (Offline-First) 38

39 Caching Strategien Während der Installation statische Daten laden 39

40 Caching Strategien Während der Installation statische Daten laden 40

41 Caching Strategien Verschiedene Konzepte verbinden Statische Dateien/Seiten bei der Installation in den Cache laden Diese immer aus dem Cache laden Aktuelle Daten aus dem Internet und als Fallback: Cache 41

42 Demo APEX Offline 42

43 43

44 Anpassungen für Offline-Modus Falls die App offline ist: Alle Buttons / Links deaktivieren, die dynamisch Daten nachladen Refresh, Filter, Pagination Classic Report, Interactive Report, Interactive Grid Clientseitige Validierungen ggf. bevorzugen während Eingabe der Daten 44

45 Fazit APEX Offline Probleme durch die Architektur von APEX Keine strikte Trennung von Daten und UI in den Requests Z.B Classic Report IG könnte das in Zukunft am ehesten unterstützen (Model Struktur) 45

46 Fazit APEX Offline Probleme durch die Architektur von APEX 46

47 Fazit APEX als PWA APEX kann von PWA profitieren Manifest schnell und einfach integriert Desktop-APEX von vielen Anwendern gewünscht Offline schwierig 47

48 Ausblick PWA und APEX 48

49 Die Zukunft der PWA Weitere API von Google in Arbeit Web Share Target Informationen können mit der PWA geteilt werden WebHID Zugriff auf lokale Geräte (z.b. USB / Bluetooth) Writable File API (!) Zugriff auf das lokale Filesystem 49

50 50

51 apex.debug.log('fragen?'); 51

52 apex.debug.info('vielen Dank!'); 52