Progressive Web Apps - Warum sie wichtig werden

My Keynote about PWA at BASTA! Spring 2018 in Frankfurt, Germany.

Link to Example:
https://github.com/manfredsteyer/angular-pwa-case-study-basta-spring-keynote-2018

More:
https://www.softwarearchitekt.at

Transcript

1. @BASTAcon & @ManfredSteyer Keynote: Progressive Web-Apps Warum sie wichtig werden Manfred Steyer SOFTWAREarchitekt.at ManfredSteyer
2. @BASTAcon & @ManfredSteyer Über mich … • Manfred Steyer • SOFTWAREarchitekt.at • Trainer & Consultant • Focus: Angular • Google Developer Expert (GDE) • Microsoft MVP Page ▪ 2
3. @BASTAcon & @ManfredSteyer Inhalt ▪Überblick zu PWA ▪Service Worker als Herzstück von PWAs ▪Daten im Browser speichern ▪Installation am Home Screen ▪PWA und Windows ▪Fazit
4. @BASTAcon & @ManfredSteyer Überblick zu PWA
5. @BASTAcon & @ManfredSteyer Web Apps Keine Installation Cross- Plattform Einfaches Deployment Einfaches Update Durchsuchbar Links/ Bookmarks
6. @BASTAcon & @ManfredSteyer Native Apps Einfach zu starten Sofortiger Nutzen Offline Langsame Verbindungen Push Notifications Gerätezugriff
7. @BASTAcon & @ManfredSteyer Progressive Web Apps bieten das Beste aus beiden Welten
8. @BASTAcon & @ManfredSteyer Progressive Enhancements: Offline, Caching, Home Screen etc.
9. @BASTAcon & @ManfredSteyer App muss auch ohne Erweiterungen Nutzen bieten!
10. @BASTAcon & @ManfredSteyer vs.
11. @BASTAcon & @ManfredSteyer
12. @BASTAcon & @ManfredSteyer [http://alistapart.com/article/understandingprogressiveenhancement] Inhalt/ Use Cases Layout Progressive Enh.
13. @BASTAcon & @ManfredSteyer Wie implementiert man Progressive Enhancements und PWA?
14. @BASTAcon & @ManfredSteyer Case Study
15. @BASTAcon & @ManfredSteyer Service Worker Herzstück von PWAs
16. @BASTAcon & @ManfredSteyer Service Worker Browser Web-Anwendung
17. @BASTAcon & @ManfredSteyer Service Worker Browser Web-Anwendung Service-Worker
18. @BASTAcon & @ManfredSteyer Service Worker Browser Service-Worker
19. @BASTAcon & @ManfredSteyer Service Worker Browser Service-Worker
20. @BASTAcon & @ManfredSteyer Service Worker Browser Service-Worker
21. @BASTAcon & @ManfredSteyer Service Worker Browser Service-Worker Auf Push-Nachrichten reagieren Daten synchronisieren Anfragen abfangen
22. @BASTAcon & @ManfredSteyer Service Worker Browser Service-Worker Anfrage Antwort Cache Same Origin Policy Unter Ihrer Kontrolle!
23. @BASTAcon & @ManfredSteyer Cache Strategien Cache only Network only Try Cache, fallback to Network Try Network, fallback to Cache …
24. @BASTAcon & @ManfredSteyer Service Worker registrieren if('serviceWorker' in navigator) { navigator .serviceWorker .register('/sw.js', { scope: '/' }) .then((r) => { console.debug('service worker started!'); }); }
25. @BASTAcon & @ManfredSteyer Service Worker Script self.addEventListener('fetch', function(event) { event.respondWith(cacheFirst(event.request)); }); function cacheFirst(request) { return caches.match(request) .then(response => response || fetch(request)); }
26. @BASTAcon & @ManfredSteyer Zwei mögliche Abstraktionen für Service Worker @angular/service-worker
27. @BASTAcon & @ManfredSteyer @angular/service-worker @NgModule({ imports: [ ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}), […] ], […] }) export class AppModule { } Kommt von Angular / CLI + Config-Datei mit Cache-Strategien etc. + ng build --prod
28. @BASTAcon & @ManfredSteyer Browser Support Chrome Firefox Opera Safari (2018) Edge (2018)
29. @BASTAcon & @ManfredSteyer Daten lokal speichern
30. @BASTAcon & @ManfredSteyer Daten offline speichern • LocalStorage (kein Zugriff über Service Worker) • WebDb (deprecated aber hier) • IndexedDb
31. @BASTAcon & @ManfredSteyer Quotas als Herausforderung [https://developers.google.com/web/fundamentals/instant-and-offline/web-storage/offline-for-pwa]
32. @BASTAcon & @ManfredSteyer Fokus • Kein langfristiger Offlinebetrieb • Überbrücken langsamer oder fehlender Datenverbindungen
33. @BASTAcon & @ManfredSteyer Abstraktionen für Browser-Datenbanken PouchDb Dexie RxDB …
34. @BASTAcon & @ManfredSteyer Installation am Home Screen
35. @BASTAcon & @ManfredSteyer { "name": "Hotel PWA-Demo", "short_name": "Hotel", "icons": [{ "src": "images/touch/icon-128x128.png", "sizes": "128x128", "type": "image/png" }, […] ], "start_url": "/index.html?homescreen=1", "display": "standalone", […] } Web App Manifest
36. @BASTAcon & @ManfredSteyer Manifest referenzieren <!-- Web Application Manifest --> <link rel="manifest" href="manifest.json">
37. @BASTAcon & @ManfredSteyer PWA und Windows
38. @BASTAcon & @ManfredSteyer PWAs und Windows
39. @BASTAcon & @ManfredSteyer PWAs im AppStore Wie? •Automatisch via Bing Crawler •Oder: Registrieren Warum? •Auffindbarkeit •Zugriff auf WinRT APIs
40. @BASTAcon & @ManfredSteyer Ähnliche Ideen für Chrome
41. @BASTAcon & @ManfredSteyer Fazit
42. @BASTAcon & @ManfredSteyer • Rascher Start • Langsame Verbindungen überbrücken Offline mit Service Worker • Asynchrone Geschäftsprozesse • "Benutzer zurückholen" Push Notifactions • Installieren auf Home Screen Web App Manifest • Daten vorhalten • Daten synchronisieren Browser DBs und Background Sync Fazit Quick Wins
43. @BASTAcon & @ManfredSteyer Fazit Jede Web-App sollte eine PWA sein Sehr verlockend (nicht nur) für Business Apps M&Ms können Ihnen den Tag retten
44. @BASTAcon & @ManfredSteyer Kontakt [mail] manfred.steyer@SOFTWAREarchitekt.at [web] SOFTWAREarchitekt.at [twitter] ManfredSteyer