Progressive Web Apps: Das Web wird nativ(er)

Ein heißes Thema in der Webentwicklung stellen die sogenannten Progressive Web Apps (PWA) dar. Google plant dabei nichts geringeres als das App-Modell der Zukunft. Auch Mozilla und Microsoft sind an Bord. Hinter den PWA 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 zum Beispiel 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.

Transcript

1. Christian Liebel @chris_liebel christian.liebel@thinktecture.com Progressive Web Apps: Das Web wird nativ(er) #NOSSUED
2. Christian Liebel Thinktecture AG Microsoft MVP Visual Studio and Development Technologies Twitter: @chris_liebel E-Mail: christian.liebel@thinktecture.com https://thinktecture.com https://christianliebel.com Gestatten? Das Web wird nativ(er) Progressive Web Apps
3. Windows Mobile 5 Apps in 2005… http://pocketpccentral.net/images/help/install_cab_file/ppc2.jpg Das Web wird nativ(er) Progressive Web Apps
4. Apps in 2007… https://www.youtube.com/watch?v=vN4U5FqrOdQ Das Web wird nativ(er) Progressive Web Apps
5. 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 Das Web wird nativ(er) Progressive Web Apps
6. Das Web wird nativ(er) Progressive Web Apps
7. 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 Das Web wird nativ(er) Progressive Web Apps
8. App Stores Apps Today… Das Web wird nativ(er) Progressive Web Apps
9. The Web is Becoming (More) Native • Idea: No App-Store required any longer • Web App = App App • Feature Parity: Native Experience with Push Notifications, Offline Availability, … • Powered by Google, ready to use on Android today • Downwards compatible (Progressive Enhancement) • PWA are no technology, but a collection of features Apps Tomorrow… Das Web wird nativ(er) Progressive Web Apps
10. Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable Progressive Web Apps are… https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/ Das Web wird nativ(er) Progressive Web Apps
11. Progressive Web Apps HTML5, JavaScript, CSS3 Service Worker API Fetch API Web Notifications Web Workers Push API Web App Manifest HTTPS Technologien aus dem PWA-Umfeld Das Web wird nativ(er) Progressive Web Apps
12. https://mobile.angular.io All the tools and techniques to build high-performance mobile apps Currently alpha Documentation massively outdated Didn’t keep up with recent Angular changes Progressive Web Apps Das Web wird nativ(er) Angular Mobile Toolkit
13. Status Quo CLI Setup: Outdated Web App Manifest: Okay, but doesn’t depend on Angular Mobile Toolkit anyway App Shell: Outdated, based on old version of Angular Universal (Angular 4 ships with a redesigned one) Service Worker: Rather outdated Progressive Web Apps Das Web wird nativ(er) Angular Mobile Toolkit
14. Angular CLI Integration Angular CLI used to support the Mobile Toolkit with the --mobile flag But: “for the moment we are not looking at adding it again” https://github.com/angular/angular-cli/issues/2228#issuecomment-263066492 Progressive Web Apps Das Web wird nativ(er) Angular Mobile Toolkit
15. Web Worker Shared Worker Service Worker Das Web wird nativ(er) Progressive Web Apps
16. JavaScript & Threading JavaScript & Threading http://techdows.com/wp-content/uploads/2016/01/Firefox-unresponsive-JavaScritp-edit-bookmarkOverlay.png Das Web wird nativ(er) Progressive Web Apps
17. 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 Web Worker Das Web wird nativ(er) Progressive Web Apps
18. 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 Shared Worker Das Web wird nativ(er) Progressive Web Apps
19. 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 Service Worker Das Web wird nativ(er) Progressive Web Apps CODE
20. Service Worker als Proxy/Interceptor Service Worker Internet Website HTML/JS Cache fetch Das Web wird nativ(er) Progressive Web Apps
21. Service Worker Lifecycle Installing Parsed Error Activated Idle Terminated fetch/ message Das Web wird nativ(er) Progressive Web Apps
22. 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 Das Web wird nativ(er) Progressive Web Apps
23. Overview Implements a “one size fits all” service worker Instrumented by ngsw-manifest.json Initial static content caching Route redirection to index.html (default paths, routing with PathLocationStrategy) Push notifications Integrations for Gulp and Webpack build pipelines Open-source: https://github.com/angular/mobile Progressive Web Apps Das Web wird nativ(er) @angular/service-worker
24. CLI Integration Angular CLI supports service worker generation starting from 1.0.0-rc.2 Opt-in, requires @angular/service-worker (currently 1.0.0-beta.7) Simply run ng set apps.0.serviceWorker true Once enabled, it attaches to ng build/serve commands Supports extending the ngsw-manifest.json Progressive Web Apps Das Web wird nativ(er) @angular/service-worker EX #1
25. Live Demo https://pwa.liebel.io Das Web wird nativ(er) Progressive Web Apps
26. Progressive Web Apps sind… Das Web wird nativ(er) Progressive Web Apps Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable
27. 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 Das Web wird nativ(er) Progressive Web Apps
28. Wiederkehrende Kosten Kostenfrei Manuelle Erneuerung erforderlich Comodo GeoTrust Verisign … StartSSL Erneuerung automatisch ? Third-Party (Azure, GitHub, CloudFlare) PWA gibt’s nur mit HTTPS Safe Das Web wird nativ(er) Progressive Web Apps
29. 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 Das Web wird nativ(er) Progressive Web Apps
30. Progressive Web Apps sind… Das Web wird nativ(er) Progressive Web Apps Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable
31. 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 Das Web wird nativ(er) Progressive Web Apps
32. Progressive Web Apps Das Web wird nativ(er) Unten Mitte: M 93, https://commons.wikimedia.org/wiki/File:BMW_320d_Luxury_Line_(F30)_%E2%80%93_Frontansicht,_24._Juni_2012,_D%C3%BCsseldorf.jpg
33. Service Worker Compatibility https://jakearchibald.github.io/isserviceworkerready/ Das Web wird nativ(er) Progressive Web Apps
34. (= not an official five year plan) WebKit Five Year Plan Fall 2015 https://trac.webkit.org/wiki/FiveYearPlanFall2015 Das Web wird nativ(er) Progressive Web Apps
35. https://steffenjahr.de/2017/05/12/microsoft-edge-and-you-pwa-service-worker-ahead/ Progressive Web Apps Das Web wird nativ(er) Edge Status Quo
36. 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 In JavaScript: Vorhandensein einer Schnittstelle/eines Funktionsmerkmals prüfen Bei Vorhandensein nutzen Progressive if ('serviceWorker' in navigator) { navigator.serviceWorker.register(…) .then(function () { … }); } Das Web wird nativ(er) Progressive Web Apps
37. Progressive Web Apps sind… Das Web wird nativ(er) Progressive Web Apps Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable
38. Responsive Das Web wird nativ(er) Progressive Web Apps
39. 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 Das Web wird nativ(er) Progressive Web Apps
40. Progressive Web Apps sind… Das Web wird nativ(er) Progressive Web Apps Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable
41. 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 Das Web wird nativ(er) Progressive Web Apps
42. { "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" } manifest.json Web App Manifest Titel Icons Einspungspunkt Anzeigeart Splash-Screen weitere Konfiguration Beschreibung Zugehörige Apps Das Web wird nativ(er) Progressive Web Apps
43. Add a Web App Manifest Link it in your index.html Test it using Lighthouse Progressive Web Apps Das Web wird nativ(er) Web App Manifest EX #2
44. Progressive Web Apps Das Web wird nativ(er) Build 2017 Announcement https://www.slideshare.net/AaronGustafson/progressive-web-apps-and-the-windows-ecosystem-build-2017
45. https://www.slideshare.net/AaronGustafson/progressive-web-apps-and-the-windows-ecosystem-build-2017 Progressive Web Apps Das Web wird nativ(er) Build 2017 Announcement
46. Progressive Web Apps sind… Das Web wird nativ(er) Progressive Web Apps Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable
47. 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 Das Web wird nativ(er) Progressive Web Apps
48. 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 Das Web wird nativ(er) Progressive Web Apps
49. SPA-Architektur 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 App-like Das Web wird nativ(er) Progressive Web Apps
50. App Shell 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, AngularJS, React, jQuery, plain JavaScript, …) App-like Das Web wird nativ(er) Progressive Web Apps
51. App Shell Combines client and server side generation *shellRender structural directive only to be rendered by server-side part (*shellNoRender inversely) @angular/app-shell (do not use for now, last release 6 months ago!) <md-toolbar> {{title}} </md-toolbar> <md-spinner *shellRender></md-spinner> <h1>App is Fully Rendered</h1> Progressive Web Apps Das Web wird nativ(er) Angular Mobile Toolkit
52. Progressive Web Apps sind… Das Web wird nativ(er) Progressive Web Apps Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable
53. 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 Das Web wird nativ(er) Progressive Web Apps
54. Push Ziel: Daten ständig aktuell halten Lösung: Server pusht Änderungen auf Plattformebene zur App (selbst, wenn geschlossen) 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 Fresh Das Web wird nativ(er) Progressive Web Apps
55. Progressive Web Apps sind… Das Web wird nativ(er) Progressive Web Apps Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable
56. 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 Das Web wird nativ(er) Progressive Web Apps
57. Konzept Offlinefähigkeit System Website HTML/JS Lokaler Speicher Zentraler Adapter Entfernter Speicher Server Internet Das Web wird nativ(er) Progressive Web Apps
58. Umsetzung mit Service Worker Offlinefähigkeit System Website HTML/JS Cache Storage Entfernter Speicher Server Internet fetch HTTP Service Worker Das Web wird nativ(er) Progressive Web Apps CODE
59. Connectivity Independent Caching-Strategien https://jakearchibald.com/2014/offline-cookbook/ Das Web wird nativ(er) Progressive Web Apps
60. Service Worker Cache First Then Network System Website HTML/JS Cache Storage Entfernter Speicher Server Internet 2. fetch HTTP Service Worker 1. lookup Das Web wird nativ(er) Progressive Web Apps
61. @angular/service-worker allows static caching Cache information (file names and hashes) is added to ngsw- manifest.json Writing this cache information manually is a rather hard job, build integrations are preferred The Webpack build integration (included in Angular CLI) adds the artifacts from the build output out of the box The service worker already works for productive builds! Progressive Web Apps Das Web wird nativ(er) Static Caching EX #3
62. "routing": { "index": "/index.html", "routes": { "/": { "prefix": false }, "/route": { "prefix": true } } }, Progressive Web Apps Das Web wird nativ(er) Route Redirection Default Document Match full route? Route to match
63. @angular/service-worker allows redirecting routes Servers usually deliver a default document (e.g. index.html), a service worker won’t per default PathLocationStrategy defining other routes that have to be redirected to index.html Progressive Web Apps Das Web wird nativ(er) Route Redirection EX #4
64. Progressive Web Apps sind… Das Web wird nativ(er) Progressive Web Apps Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable
65. Benutzer mit Notifications zurückholen Idee: Benutzer zum (Wieder-)Verwenden der App bewegen Bekannt aus sozialen Netzwerken, Spielen, … Realisiert über den PushManager Auch hier: Jeweiliger Endpoint wird durch Plattformanbieter bereitgestellt Und: Anbieter und Push-Dienste müssen Serverkomponente bekannt sein Re-Engageable Das Web wird nativ(er) Progressive Web Apps
66. Push Notifications @angular/service-worker allows push notifications They first have to be enabled via ngsw-manifest.json "push": { "showNotifications": true, "backgroundOnly": false }, Progressive Web Apps Das Web wird nativ(er) Re-Engagable
67. Push Notifications // … import { ServiceWorkerModule, NgServiceWorker } from '@angular/service-worker'; @NgModule({ imports: [ // … ServiceWorkerModule ], // … }) export class AppModule { constructor(serviceWorker: NgServiceWorker) { serviceWorker.registerForPush() .subscribe(registration => console.log(JSON.stringify(registration))); } } Progressive Web Apps Das Web wird nativ(er) Re-Engagable
68. Push Notifications registerForPush returns a PushSubscription Required steps for push notifications differ from runtime platform to runtime platform Google Chrome: Google Cloud Messaging API keys required Usually the information from the PushSubscription would be sent to the backend or a third-party service Progressive Web Apps Das Web wird nativ(er) Re-Engagable EX #5
69. Web Notifications Compatibility http://caniuse.com/#feat=notifications Das Web wird nativ(er) Progressive Web Apps CODE
70. Progressive Web Apps sind… Das Web wird nativ(er) Progressive Web Apps Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable
71. 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 Das Web wird nativ(er) Progressive Web Apps
72. 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 Das Web wird nativ(er) Progressive Web Apps
73. 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 Das Web wird nativ(er) Progressive Web Apps
74. Progressive Web Apps sind… Das Web wird nativ(er) Progressive Web Apps Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable
75. Reference Apps and Internal App States 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 Das Web wird nativ(er) Progressive Web Apps
76. Reference Apps and Internal App States https://myapp.com/profile.php?id=peter.mueller Classic (Query String) https://myapp.com/#/profile/peter.mueller Hash Anchor (e.g. SPA) https://myapp.com/profile/peter.mueller HTML5 History (SPA)/Server Rendered Linkable Das Web wird nativ(er) Progressive Web Apps
77. Minimum Requirements Originate from a Secure Origin Load while offline Reference a Web App Manifest https://infrequently.org/2016/09/what-exactly-makes-something-a- progressive-web-app/ Progressive Web Apps Das Web wird nativ(er) Progressive Web Apps
78. Service Worker Synchronization Push Geofencing Related Specifications Das Web wird nativ(er) Progressive Web Apps
79. https://developers.google.com/web/progressive-web-apps/ Progressive Web Apps Das Web wird nativ(er) Where to start?
80. Don’t Re-Invent the Wheel Libraries Das Web wird nativ(er) Progressive Web Apps
81. npm install @angular/service-worker ng set apps.0.serviceWorker true Progressive Web Apps Das Web wird nativ(er) Now what about Angular?
82. Lighthouse Progressive Web Apps Das Web wird nativ(er) Tools
83. References https://pwa.rocks Das Web wird nativ(er) Progressive Web Apps
84. mobile.twitter.com References https://pwa.rocks Das Web wird nativ(er) Progressive Web Apps
85. Evaluation No support of iOS, old (but common) Android versions and Windows Phone/10 Mobile (yet) Monetarization/In-App Purchases/Quality Assurance? Moving Target: In some parts very experimental technology/Android only/not standardized Write once, run anywhere (Real Cross Platform) Web App = App App (full flexibility) Free Lunch Progressive Web Apps Germany Mobile Platform Market Share (Smartphones Sold, 4/2017) Android iOS Windows Blackberry Other Das Web wird nativ(er) Progressive Web Apps
86. Monetarization Payment Request API Supported by Microsoft Edge Upcoming payment technology for the web https://blogs.windows.com/msedgedev/2016/12 /15/payment-request-api-edge/ Progressive Web Apps Das Web wird nativ(er) Progressive Web Apps
87. Alternatives (Extract) Native App Packaging Offline Availability Real Cross Platform – Get it Today LOCALFORAGE Das Web wird nativ(er) Progressive Web Apps
88. Vielen Dank für Ihre Aufmerksamkeit Christian Liebel @chris_liebel christian.liebel@thinktecture.com