Progressive Web Apps mit APEX Till Albert 09.05.2019
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
Über mich Till Albert Seit November 2014 bei der MT AG Berater Oracle APEX und JavaScript Studium Bachelor Informatik @till_albert 3
Inhalt Was ist eine Progressive Web App? Möglichkeiten mit APEX Die Zukunft der PWA 4
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
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
Was ist eine Progressive Web APP? 7
Defintion PWA Progressive Enhancement Grundlegende Websitefunktionen auf jedem Endgerät Mit schwacher / keiner Internetverbindung 8
Eigenschaften einer PWA Funktioniert in allen Browsern / Plattformen Responsive und App-like Funktioniert bei jeder Internetverbindung Push-Notifications 9
Eigenschaften einer PWA Schnelle Ladezeit durch App-Shell https://developers.google.com/web/fundamentals/architecture/app-shell 10
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
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. https://pwa.bar/alibaba/ 12
PWA Browser-Support 13
PWA Browser-Support Durch Progressive Enhancement Auch wenn nicht alle Features in allen Browsern funktionieren Die Grundfunktionalitäten funktionieren in allen Browsern 14
Aufbau einer PWA 15
Service Worker 16
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
Service Worker Überblick https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ 18
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
Web App Manifest 20
21
Implementierung in APEX 22
Implementierung APEX hat bereits PWA Eigenschaften Responsive Web Anwendung App-ähnliches Interface HTTPS 23
Implementierung aber noch nicht alles Einfache Installation der Anwendung als App Offline Verfügbarkeit ( Service-Worker) App-Shell 24
Implementierung HTTPS ist Pflicht! 25
Implementierung Zugriff zum Root des Webservers https://host.de/ords/f?p=102:30:9010212652179 https://host.de/manifest.json https://host.de/sw.js 26
Implementierung 27
Manifest erstellen https://www.pwabuilder.com/ 28
29
30
31
32
Demo Desktop PWA 33
Offline APEX-Apps 34
APEX offline verfügbar machen Service Worker 35
Caching Strategien Network first, then cache https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ 36
Caching Strategien Network first, then cache 37
Caching Strategien Cache first, falling back to network (Offline-First) https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ 38
Caching Strategien Während der Installation statische Daten laden https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ 39
Caching Strategien Während der Installation statische Daten laden 40
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
Demo APEX Offline 42
43
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
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
Fazit APEX Offline Probleme durch die Architektur von APEX https://developers.google.com/web/fundamentals/architecture/app-shell 46
Fazit APEX als PWA APEX kann von PWA profitieren Manifest schnell und einfach integriert Desktop-APEX von vielen Anwendern gewünscht Offline schwierig 47
Ausblick PWA und APEX http://hardlikesoftware.com/weblog/2018/12/04/thoughts-on-apexprogressive-web-apps/ 48
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
apex.debug.log('fragen?'); 51
apex.debug.info('vielen Dank!'); 52