Progressive Web-Apps mit Angular: hands-on

Slide 1

Slide 1 text

Christian Liebel @chris_liebel [email protected] Progressive Web Apps mit Angular Hands-on! Angular Days 2017

Slide 2

Slide 2 text

Christian Liebel Thinktecture AG Microsoft MVP Visual Studio and Development Technologies Twitter: @chris_liebel E-Mail: [email protected] https://thinktecture.com https://christianliebel.com Gestatten? Hands-on! Progressive Web Apps mit Angular

Slide 3

Slide 3 text

Was Sie nicht erwartet 1:1-Anleitung zur Implementierung von Progressive Web Apps Zukunftssicheres Tutorial zur Implementierung von PWA mit Angular (da Work in Progress) „Echtes“ Hands-on Was Sie erwartet Grundlegender Überblick und Rundumschlag zum Thema Progressive Web Apps Status Quo der Angular- Unterstützung (Cutting Edge) Eine Progressive Web App, die Sie ausprobieren können Hands-on! Progressive Web Apps mit Angular

Slide 4

Slide 4 text

Angular CLI 1.4.5 wurde zwischenzeitlich veröffentlicht. Bitte verwenden Sie nach Möglichkeit die im README oder der Datei package.json angegebenen Versionen. Important Note Hands-on! Progressive Web Apps mit Angular

Slide 5

Slide 5 text

13:30–15:00 Teil I 15:00–15:30 Kaffeepause 15:30–17:00 Teil II Zeitplan Hands-on! Progressive Web Apps mit Angular

Slide 6

Slide 6 text

Neueste Software! Beispiel mit Angular 4 Installierbar auf dem Homebildschirm Offlinefähigkeit für Apps Pushbenachrichtigungen auch dann, wenn die App geschlossen ist liebel.io/pwa-ws Progressive Web Apps mit Angular Hands-on! Intro EX #0

Slide 7

Slide 7 text

git pull git reset --hard Progressive Web Apps mit Angular Hands-on! Hilfreiche Git-Kommandos

Slide 8

Slide 8 text

Windows Mobile 5 Apps anno 2005… http://pocketpccentral.net/images/help/install_cab_file/ppc2.jpg Hands-on! Progressive Web Apps mit Angular

Slide 9

Slide 9 text

Apps anno 2007… https://www.youtube.com/watch?v=vN4U5FqrOdQ Hands-on! Progressive Web Apps mit Angular

Slide 10

Slide 10 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 11

Slide 11 text

Hands-on! Progressive Web Apps mit Angular

Slide 12

Slide 12 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 13

Slide 13 text

App Stores Apps heute… Hands-on! Progressive Web Apps mit Angular

Slide 14

Slide 14 text

Das Web wird nativ(er) • Gedanke: App-Stores gehen in Rente • Web App = App App • Featureparität: Beide Ansätze können auf Pushbenachrichtigungen, Offlineverfügbarkeit, … zurückgreifen • Angetrieben von Google, auf vielen Android- Versionen schon heute lauffähig • Abwärtskompatibel (Progressive Enhancement) • PWA sind keine Technologie, sondern eine Sammlung von Eigenschaften, die eine Anwendung unterstützen muss/kann Apps morgen… Hands-on! Progressive Web Apps mit Angular

Slide 15

Slide 15 text

Demo Rich Native Web Experience Hands-on! Progressive Web Apps mit Angular

Slide 16

Slide 16 text

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/ Hands-on! Progressive Web Apps mit Angular

Slide 17

Slide 17 text

https://developers.google.com/web/progressive-web-apps/ Progressive Web Apps mit Angular Hands-on! Wo loslegen?

Slide 18

Slide 18 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 19

Slide 19 text

Progressive Web Apps mit Angular Hands-on! Wie sieht’s mit Angular aus?

Slide 20

Slide 20 text

All the tools and techniques to build high-performance mobile apps Dokumentation komplett veraltet Hielt nicht Schritt mit späteren Angular-Updates Stellte ursprünglich Flag „--mobile“ bereit, aber: Dieses Flag gibt es nicht mehr und es wird nicht wieder zurückkehren. Progressive Web Apps mit Angular Hands-on! Angular Mobile Toolkit

Slide 21

Slide 21 text

Surprise, surprise! ;-) Angular: v4.3.0 @angular/service-worker: v1.0.0-beta.16 Progressive Web Apps mit Angular Hands-on! @angular/service-worker

Slide 22

Slide 22 text

Lighthouse Progressive Web Apps mit Angular Hands-on! Tools

Slide 23

Slide 23 text

Web Worker Shared Worker Service Worker Hands-on! Progressive Web Apps mit Angular

Slide 24

Slide 24 text

JavaScript & Threading JavaScript & Threading http://techdows.com/wp-content/uploads/2016/01/Firefox-unresponsive-JavaScritp-edit-bookmarkOverlay.png Hands-on! Progressive Web Apps mit Angular

Slide 25

Slide 25 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 26

Slide 26 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 27

Slide 27 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 28

Slide 28 text

Service Worker als Proxy/Interceptor Service Worker Internet Website HTML/JS Cache fetch Hands-on! Progressive Web Apps mit Angular

Slide 29

Slide 29 text

Service Worker Lifecycle Installing Parsed Error Activated Idle Terminated fetch/ message Hands-on! Progressive Web Apps mit Angular

Slide 30

Slide 30 text

Slide 31

Slide 31 text

Übersicht Implementiert einen „one size fits all“ Service Worker Instrumentiert via ngsw-manifest.json • Initiales Cachen statischer Inhalte • Routenweiterleitung • Pushbenachrichtigungen • Cachen externer Inhalte • Dynamisches Caching Progressive Web Apps mit Angular Hands-on! @angular/service-worker

Slide 32

Slide 32 text

CLI Integration Integration für Gulp- und Webpack-Pipelines Angular CLI unterstützt die Service-Worker-Generierung ab 1.0.0-rc.2 Opt-in, erfordert @angular/service-worker (derzeit 1.0.0-beta.16) Konfiguration: ng set apps.0.serviceWorker true Sobald aktiviert, automatische Integration in die Befehle ng build/serve (für Produktionsbuild) Erweiterung der ngsw-manifest.json ist möglich Progressive Web Apps mit Angular Hands-on! @angular/service-worker EX #1

Slide 33

Slide 33 text

Ausblick Angular 5.0.0-rc.0 enthält einen neuen Angular Service Worker (NGSW). Die Verwendung weicht in Teilen von der hier dargestellten ab. Progressive Web Apps mit Angular Hands-on! @angular/service-worker

Slide 34

Slide 34 text

Progressive Web Apps sind… Hands-on! Progressive Web Apps mit Angular Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable

Slide 35

Slide 35 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 36

Slide 36 text

Wiederkehrende Kosten Kostenfrei Manuelle Erneuerung erforderlich Comodo GeoTrust Verisign … StartSSL Erneuerung automatisch ? Third-Party (Azure, GitHub, CloudFlare) PWA gibt’s nur mit HTTPS Safe Hands-on! Progressive Web Apps mit Angular

Slide 37

Slide 37 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 38

Slide 38 text

Progressive Web Apps sind… Hands-on! Progressive Web Apps mit Angular Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable

Slide 39

Slide 39 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 40

Slide 40 text

Service Worker Compatibility https://jakearchibald.github.io/isserviceworkerready/ Hands-on! Progressive Web Apps mit Angular

Slide 41

Slide 41 text

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 () { … }); } Hands-on! Progressive Web Apps mit Angular

Slide 42

Slide 42 text

Progressive Web Apps sind… Hands-on! Progressive Web Apps mit Angular Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable

Slide 43

Slide 43 text

Responsive Hands-on! Progressive Web Apps mit Angular

Slide 44

Slide 44 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 45

Slide 45 text

Progressive Web Apps sind… Hands-on! Progressive Web Apps mit Angular Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable

Slide 46

Slide 46 text

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 Discoverable Hands-on! Progressive Web Apps mit Angular

Slide 47

Slide 47 text

{ "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 Hands-on! Progressive Web Apps mit Angular

Slide 48

Slide 48 text

Fügen Sie ein Web App Manifest hinzu Referenzieren Sie es in Ihrer Datei index.html Testen mit Lighthouse Progressive Web Apps mit Angular Hands-on! Web App Manifest EX #2

Slide 49

Slide 49 text

Progressive Web Apps sind… Hands-on! Progressive Web Apps mit Angular Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable

Slide 50

Slide 50 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 51

Slide 51 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 52

Slide 52 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 53

Slide 53 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 54

Slide 54 text

App Shell Kombiniert server- und clientseitige Generierung *shellRender Strukturdiektive, die nur auf dem Server ausgeführt wird (*shellNoRender entsprechend gegensätzlich) @angular/app-shell (nicht mehr nutzen, letztes Release liegt ein Jahr zuück!) {{title}}

App is Fully Rendered

Progressive Web Apps mit Angular Hands-on! Angular Mobile Toolkit

Slide 55

Slide 55 text

Progressive Web Apps sind… Hands-on! Progressive Web Apps mit Angular Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable

Slide 56

Slide 56 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 57

Slide 57 text

Progressive Web Apps sind… Hands-on! Progressive Web Apps mit Angular Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable

Slide 58

Slide 58 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 59

Slide 59 text

Konzept Offlinefähigkeit System Website HTML/JS Lokaler Speicher Zentraler Adapter Entfernter Speicher Server Internet Hands-on! Progressive Web Apps mit Angular

Slide 60

Slide 60 text

Umsetzung mit Service Worker Offlinefähigkeit System Website HTML/JS Cache Storage Entfernter Speicher Server Internet fetch HTTP Service Worker Hands-on! Progressive Web Apps mit Angular

Slide 61

Slide 61 text

Connectivity Independent Caching-Strategien https://jakearchibald.com/2014/offline-cookbook/ Hands-on! Progressive Web Apps mit Angular

Slide 62

Slide 62 text

Service Worker Cache First Then Network System Website HTML/JS Cache Storage Entfernter Speicher Server Internet 2. fetch HTTP Service Worker 1. lookup Hands-on! Progressive Web Apps mit Angular

Slide 63

Slide 63 text

@angular/service-worker erlaubt statisches Caching Cacheinformationen (Dateinamen und -Hashed) müssen der Datei ngsw- manifest.json hinzugefügt werden Das Schreiben dieser Cacheinformation per Hand wäre ein eher harter Job, weswegen eine Integration ins Buildsystem zu bevorzugen wäre Die Webpack-Buildintegration (enthalten in Angular CLI) fügt die Artefakte des Build-Output dem Manifest vollautomatisch hinzu Der Service-Worker funktioniert bereits für Produktivbuilds! Progressive Web Apps mit Angular Hands-on! Static Caching EX #3

Slide 64

Slide 64 text

"routing": { "index": "/index.html", "routes": { "/": { "prefix": false }, "/route": { "prefix": true } } }, Progressive Web Apps mit Angular Hands-on! Route Redirection Standarddokument Ganze Route matchen? Zu matchende Route

Slide 65

Slide 65 text

@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 mit Angular Hands-on! Route Redirection EX #4

Slide 66

Slide 66 text

Progressive Web Apps sind… Hands-on! Progressive Web Apps mit Angular Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable

Slide 67

Slide 67 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 68

Slide 68 text

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 mit Angular Hands-on! Re-Engagable

Slide 69

Slide 69 text

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 mit Angular Hands-on! Re-Engagable

Slide 70

Slide 70 text

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 mit Angular Hands-on! Re-Engagable EX #5

Slide 71

Slide 71 text

Web Notifications Compatibility http://caniuse.com/#feat=notifications Hands-on! Progressive Web Apps mit Angular

Slide 72

Slide 72 text

Progressive Web Apps sind… Hands-on! Progressive Web Apps mit Angular Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable

Slide 73

Slide 73 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 74

Slide 74 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 75

Slide 75 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 76

Slide 76 text

Progressive Web Apps sind… Hands-on! Progressive Web Apps mit Angular Safe Progressive Responsive Discoverable App-like Fresh Connectivity Independent Re- engageable Installable Linkable

Slide 77

Slide 77 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 78

Slide 78 text

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 Hands-on! Progressive Web Apps mit Angular

Slide 79

Slide 79 text

Minimalanforderungen • Stammen aus einer sicheren Quelle • Können auch offline geladen werden • Referenzieren ein Web App Manifest Progressive Web Apps Hands-on! Progressive Web Apps mit Angular

Slide 80

Slide 80 text

Service Worker • Datensynchronisierung • Push • Geofencing Verwandte Spezifikationen Hands-on! Progressive Web Apps mit Angular

Slide 81

Slide 81 text

Das Rad nicht neu erfinden Bibliotheken Hands-on! Progressive Web Apps mit Angular

Slide 82

Slide 82 text

Referenzen https://pwa.rocks Hands-on! Progressive Web Apps mit Angular

Slide 83

Slide 83 text

mobile.twitter.com Referenzen https://pwa.rocks Hands-on! Progressive Web Apps mit Angular

Slide 84

Slide 84 text

Evaluation Noch keine Unterstützung für iOS, veraltete Android-Versionen und Windows Phone/10 Mobile Monetarisierung/In-App-Käufe/ Qualitätssicherung? Moving Target: Teilweise experimentell/nur in Android umsetzbar/instabil Write once, run anywhere (Real Cross Platform) Web App = App App (volle Flexibilität) Free Lunch Progressive Web Apps Germany Mobile Platform Market Share (Smartphones Sold, Q2 2016) Android iOS Windows Blackberry Other Hands-on! Progressive Web Apps mit Angular

Slide 85

Slide 85 text

Monetarisierung • Payment Request API • Unterstützt von Microsoft Edge und Google Chrome • Aufkommende Zahlungstechnologie des Web (für Onlineshops etc.) • Gegenspieler: Apple Pay JS Progressive Web Apps Hands-on! Progressive Web Apps mit Angular

Slide 86

Slide 86 text

Alternatives (Extract) Native App Packaging Offline Availability Real Cross Platform – Get it Today LOCALFORAGE Hands-on! Progressive Web Apps mit Angular

Slide 87

Slide 87 text

Vielen Dank für Ihre Aufmerksamkeit Christian Liebel @chris_liebel [email protected]