Progressive Web Apps: das Web wird nativ(er) - und Microsoft ist mittendrin

Mobilen Web Apps wird ja immer nachgesagt, dass sie zu viel Web und zu wenig App sind – sich also zu wenig nativ anfühlen. Mit Progressive Web Apps (PWA) lassen sich solche Anwendungen mit einigen zentralen und relevanten nativen Features ausstatten: Offline-Fähigkeit, Push Notifications, schnelles Startverhalten und installierbar mit samt Home Screen Icon. Christian Weyer zeigt Ihnen, wie man mit Angular 2 solche PWAs erstellt und wie sie sanft und sacht die Schlucht zwischen reinen Web-Sites, Web Apps und hybriden/nativen Apps schließen können. Und all das idealerweise ohne native App-Rahmen sondern basierend auf Web- und Browser-Standards für Edge, Chrome, Firefox & Co. Lassen Sie uns gemeinsam das Beste aus der nativen und der Web-Welt zusammenführen!

Transcript

2. Microsoft MVP for ASP.NET Google GDE for Web Technologies Focus on cross-platform solutions – end-to-end Thinktecture AG - http://thinktecture.com christian.weyer@thinktecture.com @christianweyer Christian Weyer 2
3. Apps, Apps, Apps Nativ? Web? 3
4. “Wir müssen in den App Store!” App Store Fatigue macht sich breit App Store, FTW! http://dazeend.org/2015/01/the-shape-of-the-app-store/ 4
5. Mobile, Mobile, Mobile ? https://medium.com/ben-and-dion/ode-to-the-desktop-232c6c6f14a7#.hg8xq4bu4 5
6. Web Apps Wie wir sie kennen 6
7. Progressive Web Apps „The next big thing!?“ 7
8. Initiative von Google Erste Wurzeln im Frühjahr 2015 Andere schließen sich an Mozilla Microsoft Apple… ? Eines der Ziele: Verbessern der “Conversion Rate” Progressive Web Apps 8
9. Hosted Web Apps in Windows 10 Edge Team investiert sehr viel in die Zukunft von Web-basierten Anwendungen ChakraCore läuft Cross-Plattform Implementierung diverser Spezifikationen rund um Progressive Web Apps Progressive Web Apps & der Desktop 9
10. Nahe an nativen Apps Single Page Applications (SPAs) Offline-fähig Home Screen Ohne URL-Zeile Push Hintergrund-Sync Sichere Kommunikation Werden initial über Browser gestartet Progressive Web Apps (PWA) erklärt 10
11. Apps sollen einfach überall funktionieren Auch wenn nicht überall der volle Funktionsumfang verfügbar ist Feature Detection hilft bei der Umsetzung von “progressive” Benutzern mitteilen was nicht geht User Experience & “Expectation Management” Einsatz von Fallbacks und Polyfills von vorne herein bedenken Aufwand einkalkulieren Was bedeutet “Progressive”? navigator.getMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia ); if (!navigator.getMedia) { displayErrorMessage( "Sorry - won’t get the cool stuff."); } else { // Use Camera API… } 11
12. User Experience Gutes Gefühl 12
13. User Experience (UX) ist ein zentrales Thema PWA sollen sich anfühlen und verhalten wie „echte” Apps UX nicht wie in Web Sites, sondern „App-like“ Kein Browser-Rahmen App ist sofort da / schnelles Laden Kann auch installiert werden / Home Screen Icon, Splash Screen User Experience 13
14. Anwendungsrahmen Auffindbarkeit Installierbarkeit Offline-First-Fähigkeit Handling von Offline-Content Handling von Offline-Kommunikation Push-Kommunikation “App-Like” 14
15. Nicht einfach eine weiße Seite anzeigen wenn App/JS nicht vollständig geladen ist Progressive Rendering Progressive Enhancement Anwendungsrahmen, der schnell geladen werden kann Lokales Ablegen aller notwendigen Assets Cachen des HTML, CSS, JS & Co. Application Shell 15
16. https://developers.google.com/web/updates/2015/11/app-shell Application Shell 16
17. Standardisierte Bereitstellung von Metadaten einer Anwendung Verankern in der Startseite Web App Manifest <link rel="manifest" href="/manifest.json"> { "short_name": "PWA Books", "name": "PWA Books", "icons": [ { "src": "resources/launcher-icon.png", "sizes": "48x48", "type": "image/png" }, … { "src": "resources/launcher-icon-256.png", "sizes": "256x256", "type": "image/png" } ], "start_url": "/", "display": "fullscreen", "orientation": "portrait" } 17
18. Online? Offline! Erstens kommt es anders, zweitens als man denkt 18
19. Wir sind immer online! 19
20. Auch im Browser… 20
21. Service Worker Arbeitstier im Hintergrund 21
22. Service Worker (SW) relativ junger Standard Spezielle Implementierung von Web Workern Laufen in eigenem Thread Gehören initial zu einem Dokument Jedoch nicht an Fenster oder Tab gebunden Zuständig für einen URL Scope Wird beim Erzeugen des SW festgelegt Kann alle Requests im Scope intercepten und manipulieren Kann im Hintergrund auf Push- Nachrichten lauschen und Background Sync durchführen Muss über SSL geladen werden Ausnahme ist localhost zum Testen Service Worker 22
23. Service Worker - Typischer Einsatz 23
24. Feature Detection ob Browser SW unterstützt Schlankes API, voll asynchron via Promises Lifecycle Netzwerkkommunikation Caching Push Messaging Background Sync Service Worker - API if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/my-app/sw.js') .then(function(reg) { console.log(‘Yes :-)’, reg); }).catch(function(err) { console.log(‘No :-(’, err); }); } 24
25. Service Worker - Lifecycle self.addEventListener('install', function(event) { event.waitUntil( fetchStuffAndInitDatabases() ); }); self.addEventListener('activate', function(event) { // You're good to go }); 25
26. Requests für Dokument, CSS, JS, Bilder, XHRs etc. können abgefangen werden Ausser iframes & <object>s, Requests aus SW heraus Erstellen eigener Responses je nach Use Case SW nutzt Cache API für Caching von Assets und API Requests Service Worker - Netzwerk self.addEventListener( 'fetch', function(event) { console.log(event.request); }); self.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request) ); }); 26
27. Dokumente und Daten lokal vorhalten Eigene versionierte Caches Service Worker - Caching self.addEventListener('install', function(event) { event.waitUntil( caches.open('static-v1').then(function(cache) { return cache.addAll([ '/my-blog/', '/my-blog/fallback.html', new Request('//mycdn.com/style.css', {mode: 'no-cors'}), new Request('//mycdn.com/script.js', {mode: 'no-cors'}) ]); }) ); }); 27
28. sw-toolbox Library für einfacheres Handling & Caching von Requests zur Laufzeit https://github.com/GoogleChrome/sw-toolbox sw-precache Automatisches Generieren von SW Code für einfache Offline-Funktionalität Kann kombiniert werden mit sw-toolbox für komplexere Use Cases https://github.com/GoogleChrome/sw-precache Service Worker - Tools 28
29. Service Worker - Verbreitung http://caniuse.com/#search=Service%20Worker 29
30. Push Notifications Immer aktiv 30
31. Push Notifications sind für native Apps unverzichtbar Push Notifications auch für PWAs – via Web Notifications Benötigt ebenso einen Cloud-Dienst zum Handeln und Versenden von Nachrichten Eigener Code bspw. in Web API, um tatsächlichen Push mit geheimem Key auszuführen Chrome nutzt Firebase Cloud Messaging (FCM, aka Google Cloud Messaging) Andere Browser dürfen gerne andere Services nutzen ;-) Push Notifications 31
32. Registrierung beim lokalen PushManager API in der App Web Notifications if ('serviceWorker' in navigator) { navigator.serviceWorker.register('sw.js').then(function() { return navigator.serviceWorker.ready; }).then(function(reg) { reg.pushManager.subscribe({userVisibleOnly: true}).then(function(sub) { console.log('endpoint:', sub.endpoint); }); }).catch(function(error) { console.log('Service Worker error :^(', error); }); } 32
33. SW stellt API für Push Handling zur Verfügung Anzeigen von eigenen Nachrichten im UI Web Notifications self.addEventListener('push', function(event) { console.log('Push message received', event); // TODO }); self.addEventListener('push', function(event) { var title = 'Push message'; event.waitUntil( self.registration.showNotification(title, { body: 'The Message', icon: 'images/icon.png', tag: 'my-tag' })); }); 33
34. In der Realität... Mobile-First Offline-First PWA-First Wichtig: Anwendungsarchitektur- und -design 34
35. Zukunftsmusik? Was heute schon geht – mit einer Codebasis! 35
36. Toolkit & Framework zum Erstellen mobiler nativer Anwendungsrahmen für Web Apps “App Apps” aus “Web Apps” erzeugen J Nutzt native Web Views der jeweiligen Plattform Stellt Framework & APIs zur Interaktion mit der nativen Plattform bereit CLI Tools zum Automatisieren der Projekterzeugung & Kompilierung Benötigt immer die darunterliegenden nativen SDKs (bspw. für iOS, Android, Windows) Zugriff auf native Plattformen via Plugins Mobile Apps – mit Cordova JS HTML CSS Native Wrapper Auf Devices deployen 36
37. Desktop-Anwendungen aus Web Apps erstellen Ähnlich wie Cordova Ziel sind Windows Desktop, macOS und Linux Bündelt Chromium und node.js Unabhängig von den installierten Browsern / Web Views Benötigt keine nativen SDKs Zugriff auf native Plattformen Electron API Node Modules Ökosystem Auto Updating & Plattform-Deployment möglich Desktop-Anwendungen – mit Electron 37
38. Resümee Zum nativen Web, über Web + nativ 38
39. Progressive Web Apps: möglicher Pfad für die Zukunft des “App Modells” Google schreitet voran, andere ziehen nach – v.a. Microsoft Momentan noch großer Fokus auf Mobile, obwohl der Desktop ebenso wichtig ist Microsoft pusht PWA-Technologien in Edge Service Worker & Co. sind spannende Technologien… … aber es ist noch sehr früh Cross-Plattform-Gedanke aktuell nur mit großem Aufwand weitreichend umsetzbar Alternativen für den Übergang: Cordova & Electron Volle Integration in die nativen Plattformen möglich Resümee 39