Progressive Web Apps – das Web wird nativ(er)

Ein heißes und topaktuelles Thema in der Webentwicklung stellen die sogenannten Progressive Web Apps (PWA) dar. Dahinter stecken eine ganze Reihe von Webtechnologien und Vorgehensweisen, um dem Anwender einer Website die User Experience zu bieten, die er von nativen Anwendungen kennt: Dazu zählen aktuell Offlinefähigkeit oder Pushbenachrichtigungen. Und wenn dem Benutzer die Website gefällt, wird diese mit einem Fingertipp zur App – inklusive Icon auf dem Home-Screen. Christian Liebel von Thinktecture zeigt Ihnen die verschiedenen PWA-Features und gibt eine Einschätzung, ob sich Investitionen in diesem Bereich lohnen.

Transcript

1. Christian Liebel @chris_liebel christian.liebel@thinktecture.com Progressive Web Apps: das Web wird nativ(er) .NET User Group Karlsruhe
2. Progressive Web Apps das Web wird nativer .NET User Group Karlsruhe, 13. Oktober 2016 Christian Liebel christian.liebel@thinktecture.com @chris_liebel http://thinktecture.com https://christianliebel.com 18:15 Uhr Teil I 19:30 Uhr Essenspause 20:00 Uhr Teil II Agenda
3. Progressive Web Apps das Web wird nativer Windows Mobile 5 Apps früher… http://pocketpccentral.net/images/help/install_cab_file/ppc2.jpg
4. Progressive Web Apps das Web wird nativer https://www.youtube.com/watch?v=vN4U5FqrOdQ
5. Progressive Web Apps das Web wird nativer And guess what? There’s no SDK that you need! You’ve got everything you need if you know how to write apps using the most modern web standards to write amazing apps for the iPhone today. — Steve Jobs, 11.06.2007
6. Progressive Web Apps das Web wird nativer
7. Progressive Web Apps das Web wird nativer Let me just say it: We want native third party applications on the iPhone, and we plan to have an SDK in developers’ hands in February. — Steve Jobs, 17.10.2007
8. Progressive Web Apps das Web wird nativer App Stores Apps heute…
9. Progressive Web Apps das Web wird nativer Progressive Web Apps (PWA) • Idee: Kein App-Store erforderlich • Web-App = App-App • Feature Parity: Native Experience mit Push-Benachrichtigungen, Offlinefähigkeit, … • Angetrieben von Google, schon heute verfügbar unter Android • Abwärtskompatibel (Progressive Enhancement) • PWA sind keine Technologie, sondern eine Sammlung von Eigenschaften Apps morgen…
10. Safe Progressive Responsive Connectivity Independent App-like Fresh Discoverable Re- engageable Installable Linkable Progressive Web Apps das Web wird nativer Progressive Web Apps sind… https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
11. Grundlagen 10 Eigenschaften von PWA Bewertung/Fazit Integrierte Demo: Karlsruhe City Guide Progressive Web Apps das Web wird nativer Um was geht es heute?
12. Progressive Web Apps HTML5, JavaScript, CSS3 Service Worker API Fetch API Web Notifications Web Workers Push API Web App Manifest HTTPS Progressive Web Apps das Web wird nativer Technologien aus dem PWA-Umfeld
13. Web Worker Shared Worker Service Worker Progressive Web Apps das Web wird nativer
14. Progressive Web Apps das Web wird nativer JavaScript & Threading http://techdows.com/wp-content/uploads/2016/01/Firefox-unresponsive-JavaScritp-edit-bookmarkOverlay.png
15. var worker = new Worker('script.js'); Als Worker ausgeführtes Snippet läuft in eigenem Thread Keine Manipulation des DOM des Elterndokuments Kommunikation über dünne Schnittstelle (postMessage) Bezug: Aktuelles Tab/Fenster Lebensdauer: Solange Tab/Fenster geöffnet Progressive Web Apps das Web wird nativer Web Worker
16. var worker = new SharedWorker('script.js'); Als Worker ausgeführtes Snippet läuft in eigenem Thread Keine Manipulation des DOM des Elterndokuments Kommunikation über dünne Schnittstelle (postMessage) Bezug: Origin (Protokoll + Host + Port) Lebensdauer: Solange ein Tab/Fenster einer Origin offen Progressive Web Apps das Web wird nativer Shared Worker
17. Als Worker ausgeführtes Snippet läuft in eigenem Thread Keine Manipulation des DOM des Elterndokuments Kommunikation über dünne Schnittstelle (postMessage) + agiert als Controller/Proxy/Interceptor + führt Hintergrundaufgaben aus muss vor Verwendung installiert werden Bezug: Scope (Origin + Pfad) Lebensdauer: unabhängig von Tab/Fenster Progressive Web Apps das Web wird nativer Service Worker
18. Progressive Web Apps das Web wird nativer Service Worker als Proxy/Interceptor Service Worker Internet Website HTML/JS Cache fetch
19. Progressive Web Apps das Web wird nativer Service Worker Lifecycle Installing Parsed Error Activated Idle Terminated fetch/ message
20. Progressive Web Apps das Web wird nativer var xmlHttp = new XMLHttpRequest(); xmlHttp.open('GET', 'sample.json', true); xmlHttp.onreadystatechange = function () { if (xmlHttp.readyState == 4) { alert(xmlHttp.responseText); } }; xmlHttp.send(null); fetch('sample.json') .then(function(response) { if (response.status === 200) { response.text() .then(function (data) { alert(data); }); } }); XHR vs. fetch
21. Safe Progressive Responsive Connectivity Independent App-like Fresh Discoverable Re- engageable Installable Linkable Progressive Web Apps das Web wird nativer Progressive Web Apps sind…
22. Progressive Web Apps das Web wird nativer PWA gibt’s nur mit HTTPS Service Worker ist sehr mächtig • Kann stellvertretend für die eigentliche Website antworten • Läuft außerhalb des Lebenszyklus der eigentlichen Website Daher: Installation eines Service Workers nur über gesicherte Verbindung zulässig (HTTPS) Ausnahme: localhost (zu Entwicklungszwecken) Das heißt auch: Progressive Web Apps können ausschließlich über HTTPS ausgeliefert werden Problem: Erforderliche TLS-Zertifikate (Erneuerung, Kosten) Safe
23. Progressive Web Apps das Web wird nativer PWA gibt’s nur mit HTTPS Wiederkehrende Kosten Kostenfrei Manuelle Erneuerung erforderlich Comodo GeoTrust Verisign … StartSSL Erneuerung automatisch ? StartAPI Third-Party (Azure, GitHub, CloudFlare) Safe
24. Progressive Web Apps das Web wird nativer Kostenfrei und mit automatischer Erneuerung Initiative der Linux Foundation Automatische Domänenvalidierung (Class 1) Website/Webservice muss öffentlich erreichbar sein Gültigkeitsdauer: Vergleichsweise kurz (90 Tage) Interceptor: Verwendung von SSL so einfach wie möglich • Verwaltet privaten Schlüssel • Verschlüsselung transparent für Entwickler • Automatische Erneuerung bei Ablauf Plugins für IIS, Apache, Microsoft Azure, Plesk, … sind kostenfrei verfügbar Let’s Encrypt
25. Safe Progressive Responsive Connectivity Independent App-like Fresh Discoverable Re- engageable Installable Linkable Progressive Web Apps das Web wird nativer Progressive Web Apps sind…
26. Progressive Web Apps das Web wird nativer Progressive \prə-ˈgre-siv\ • moving forward • happening or developing gradually over a period of time • using or interested in new or modern ideas especially in politics and education Source: Merriam-Webster's Learner's Dictionary
27. Progressive Web Apps das Web wird nativer Service Worker Compatibility https://jakearchibald.github.io/isserviceworkerready/
28. Progressive Web Apps das Web wird nativer (= not an official five year plan) WebKit Five Year Plan Fall 2015 https://trac.webkit.org/wiki/FiveYearPlanFall2015
29. In JavaScript: Vorhandensein einer Schnittstelle/eines Funktionsmerkmals prüfen Bei Vorhandensein nutzen Progressive Web Apps das Web wird nativer Voranschreiten mit Progressive Enhancement Idee: Die Schnittstellen und Funktionsmerkmale eines Systems nutzen, die vorhanden sind. Nutzer mit stärkeren Webbrowsern erhalten bessere Experience Apps funktionieren auf schwächeren Webbrowsern trotzdem, aber mit reduziertem Funktionsumfang Prinzip: Browserunterstützung sollte über die Zeit zunehmen, damit kommen zunehmend mehr Anwender in den Genuss weiterer Features if ('serviceWorker' in navigator) { navigator.serviceWorker.register(…) .then(function () { … }); } Progressive
30. Safe Progressive Responsive Connectivity Independent App-like Fresh Discoverable Re- engageable Installable Linkable Progressive Web Apps das Web wird nativer Progressive Web Apps sind…
31. Progressive Web Apps das Web wird nativer Responsive
32. Progressive Web Apps das Web wird nativer Alle für einen Idee: Ein Website-Layout für alle Bildschirmabmessungen (meist ausgerichtet an Breite) Definition von Triggerpunkten, an denen das Layout verändert wird (Mobile First) Umsetzung: CSS3 Media Queries Frameworks: • Bootstrap • Foundation • AdminLTE • … Responsive
33. Safe Progressive Responsive Connectivity Independent App-like Fresh Discoverable Re- engageable Installable Linkable Progressive Web Apps das Web wird nativer Progressive Web Apps sind…
34. Progressive Web Apps das Web wird nativer Offlinefähigkeit Problem: Qualität von Internetverbindungen schwankt stark (vor allem unterwegs) Lie-Fi: Verbindungsstärke eines öffentlichen WLAN-Netzes ist schwach oder komplett offline Wunsch: Anwendung funktioniert auch offline oder bei schwacher Verbindung …zumindest im Rahmen der Möglichkeiten (z.B. OneNote) Somit: Lokale Datenhaltung erforderlich Bidirektional: Synchronisation/Konfliktauflösung (Web Background Synchronization) Connectivity Independent
35. Progressive Web Apps das Web wird nativer Offlinefähigkeit Konzept System Website HTML/JS Lokaler Speicher Zentraler Adapter Entfernter Speicher Server Internet
36. Progressive Web Apps das Web wird nativer Offlinefähigkeit Umsetzung mit Service Worker System Website HTML/JS Cache Storage Entfernter Speicher Server Internet fetch HTTP Service Worker
37. Progressive Web Apps das Web wird nativer Caching-Strategien Connectivity Independent https://jakearchibald.com/2014/offline-cookbook/
38. Progressive Web Apps das Web wird nativer Cache First Then Network Service Worker System Website HTML/JS Cache Storage Entfernter Speicher Server Internet 2. fetch HTTP Service Worker 1. lookup
39. Safe Progressive Responsive Connectivity Independent App-like Fresh Discoverable Re- engageable Installable Linkable Progressive Web Apps das Web wird nativer Progressive Web Apps sind…
40. Progressive Web Apps das Web wird nativer Web-Apps, die sich nativ anfühlen Native Funktionen mit HTML5-Technologien • Audio-/Videowiedergabe • Hardwarebeschleunigte 2D/3D-Grafik • Gamepad • Fingereingabe • Lokaler Datenspeicher • Location-Based Services • Kamerazugriff • … App-like
41. Progressive Web Apps das Web wird nativer Single-Page Web Applications Modell zur Entwicklung von Apps im nativen Stil: Single-Page Web Applications (SPA) Sichten, Logik, Assets lokal vorhanden (z.B. in Browser-Cache) Navigation innerhalb der App löst keine tatsächliche Websitenavigation aus (Server-Roundtrip) SPA nimmt nur zum Bezug oder zur Modifikation von Daten Kontakt zum entfernten Server auf Vorgehensweise: Mobile First Beim Design von Use Cases und Benutzeroberfläche zuerst für Mobilgeräte beginnen Später erweitern für Geräte mit größeren Bildschirmen und präziseren Eingabemethoden App-like
42. Server- Logik Web API Push Service Web API DBs HTML, JS, CSS, Assets Webserver Webbrowser SPA Client- Logik View HTML/CSS View HTML/CSS View HTML/CSS HTTPS WebSockets HTTPS HTTPS Progressive Web Apps das Web wird nativer SPA-Architektur
43. Progressive Web Apps das Web wird nativer App Shell App-like Bestimmte Teile der UI werden häufig/immer angezeigt Andere Teile sind Dynamic Content Idee: Statische Teile (App Shell) werden im Cache vorgehalten Grundgerüst funktioniert somit auch bei schlechter/keiner Verbindung Beispiel: Anzeige von Fehlermeldungen, falls keine Verbindung Womit die App Shell realisiert wird, ist unerheblich (Angular 2, AngularJS, React, jQuery, plain JavaScript, …)
44. Safe Progressive Responsive Connectivity Independent App-like Fresh Discoverable Re- engageable Installable Linkable Progressive Web Apps das Web wird nativer Progressive Web Apps sind…
45. Progressive Web Apps das Web wird nativer Service-Worker-Updateprozess Wunsch: Über Service Worker ausgelieferte App ist trotz lokaler Installation immer aktuell Berücksichtigung von max-age Service-Worker-Skript wird spätestens einmal alle 24 Stunden neu geladen Browser lädt das Skript bei Navigation innerhalb des Scope im Hintergrund neu Bei Abweichung des Service-Worker-Skripts wird dieses heruntergeladen und installiert Wurden alle Tabs/Fenster mit dem alten Worker geschlossen, wird der neue aktiviert Somit: Immer nur eine Version des Workers zeitgleich aktiv Fresh
46. Safe Progressive Responsive Connectivity Independent App-like Fresh Discoverable Re- engageable Installable Linkable Progressive Web Apps das Web wird nativer Progressive Web Apps sind…
47. Progressive Web Apps das Web wird nativer Web-Apps und Websites unterscheiden Wie unterscheidet man eine Website von einer App? Idee: Datei mit Metadaten für App hinterlegen Zusätzlicher Vorteil: Apps können durch Suchmaschinen identifiziert werden Web App Manifest <link rel="manifest" href="manifest.json"> Discoverable
48. { "short_name": "PWA Demo App", "name": "PWA Demo Application", "icons": [ { "src": "assets/launcher-icon-3x.png", "sizes": "144x144", "type": "image/png" } ], "start_url": "index.html", "display": "standalone" } Progressive Web Apps das Web wird nativer Web App Manifest manifest.json Titel Icons Einspungspunkt Anzeigeart Splash-Screen weitere Konfiguration Beschreibung Zugehörige Apps
49. Safe Progressive Responsive Connectivity Independent App-like Fresh Discoverable Re- engageable Installable Linkable Progressive Web Apps das Web wird nativer Progressive Web Apps sind…
50. Progressive Web Apps das Web wird nativer Benutzer mit Notifications zurückholen Idee: Benutzer zum (Wieder-)Verwenden der App bewegen Bekannt aus sozialen Netzwerken, Spielen, … Prinzip: Push-Subscription auf Gerät pro Service Worker Bereitgestellt durch PushManager auf Registrierung des Service Workers Problem: Jeweiliger Endpoint wird durch Plattformanbieter bereitgestellt Also: Anbieter und Push-Dienste müssen Serverkomponente bekannt sein Für Chrome/Android: gcm_sender_id muss in manifest.json hinterlegt werden Re-Engageable
51. Progressive Web Apps das Web wird nativer Web Notifications Compatibility http://caniuse.com/#feat=notifications
52. Safe Progressive Responsive Connectivity Independent App-like Fresh Discoverable Re- engageable Installable Linkable Progressive Web Apps das Web wird nativer Progressive Web Apps sind…
53. Progressive Web Apps das Web wird nativer App Install Banners Idee: Aufruf einer Website schlägt Installation zugehöriger App vor z.B. bekannt aus iOS (Verknüpfung zu zugehöriger App im Store) Bei PWA: Web-App = App-App Anzeige eines Banners zum Anpinnen der Website auf Home-Screen Alte Idee: iOS Add to homescreen, IE9 Pinned Websites, Windows 8 Live Tiles, … Installable
54. Progressive Web Apps das Web wird nativer App Install Banners Für das Web als Teil der Web App Install Enhancement Proposals Anzeige der jeweiligen Metadaten aus dem Web App Manifest Browser steuert Banner-Anzeige anhand bestimmter Kriterien Event: beforeInstallPrompt Anzeige des Banners kann unterbunden werden Anwendung erfährt, ob Aufforderung bestätigt/abgelehnt wurde Installable
55. Progressive Web Apps das Web wird nativer App Install Banners – Kriterien* Web App Manifest muss vorhanden sein short_name und name müssen darin hinterlegt sein Gültige start_url muss darin hinterlegt sein Wenigstens ein Icon in den Abmaßen 144x144 Pixeln muss hinterlegt sein (sollte PNG sein) Ein beliebiger Service Worker muss für jeweilige Seite registriert sein Seite muss über HTTPS ausgeliefert worden sein Heuristik: Seite muss zweimal besucht worden sein, mit fünf Minuten Pause dazwischen * Kriterien können sich ändern https://developers.google.com/web/updates/2015/03/increasing-engagement-with-app-install-banners-in-chrome-for-android Installable
56. Safe Progressive Responsive Connectivity Independent App-like Fresh Discoverable Re- engageable Installable Linkable Progressive Web Apps das Web wird nativer Progressive Web Apps sind…
57. Progressive Web Apps das Web wird nativer Auf Anwendungen und -zustände verweisen Idee: Auf Anwendungen oder Anwendungszustände (Deep Link) direkt verlinken Technisches Mittel für selbstauflösende Verweise im World Wide Web: Hyperlink Schema für Hyperlinks: Uniform Resource Locator (URL) Annäherung in (mobilen) Betriebssystemen: URI-Schemes (fb://profile) Im Web für Anwendungen for free Gegebenenfalls auch für Anwendungszustände (z.B. bei SPA-Anwendungen) In klassischen Desktop-Anwendungen schwierig zu realisieren (Öffnen des Erweiterungs-Dialogs in Visual Studio via Deep Link?) Linkable
58. Progressive Web Apps das Web wird nativer Auf Anwendungen und -zustände verweisen https://myapp.com/profile.php?id=peter.mueller Klassisch (Query-Parameter) https://myapp.com/#/profile/peter.mueller Hash Anchor (z.B. SPA) https://myapp.com/profile/peter.mueller HTML5 History (SPA)/Server Rendered Linkable
59. https://pwa.liebel.io Progressive Web Apps das Web wird nativer Demo
60. Progressive Web Apps das Web wird nativer Shared Worker Synchronisation Push Geofencing Weitere verwandte Spezifikationen
61. Progressive Web Apps das Web wird nativer Das Rad nicht neu erfinden Bibliotheken
62. Progressive Web Apps das Web wird nativer Referenzen https://pwa.rocks
63. Progressive Web Apps das Web wird nativer Progressive Web Apps Kein Support von iOS und Windows Phone/10 Mobile Monetarisierung/In-App- Käufe/Qualitätskontrolle? Moving Target: Teilweise sehr rohe Technologien/Android only/nicht standardisiert Write once, run anywhere (Real Cross Platform) Web-App = App-App (volle Flexibilität) Free Lunch Bewertung Germany Mobile Platform Market Share (Smartphones Sold, Q2 2016) Android iOS Windows Blackberry Other
64. Progressive Web Apps das Web wird nativer Real Cross Platform schon heute Native App Packaging Offlinefähigkeit Alternativen (Auswahl) LOCALFORAGE
65. Danke! Demo-Repository: https://github.com/chliebel/pwa-demo Christian Liebel @chris_liebel christian.liebel@thinktecture.com