Christian Liebel
Progressive Web Apps
Das Praxisbuch. Plattformübergreifende App-Entwicklung mit Angular und Workbox. Für Browser, Windows, macOS, iOS und Android
Christian Liebel
Progressive Web Apps
Das Praxisbuch. Plattformübergreifende App-Entwicklung mit Angular und Workbox. Für Browser, Windows, macOS, iOS und Android
- Gebundenes Buch
- Merkliste
- Auf die Merkliste
- Bewerten Bewerten
- Teilen
- Produkt teilen
- Produkterinnerung
- Produkterinnerung
Progressive Web Apps (PWAs) sind eine moderne und zeitgemäße Form der Webapp. Ausgestattet mit allen Möglichkeiten wie Offlinefähigkeit, Push-Benachrichtigungen und Datensynchronisation können Sie mit modernen Webtechnologien (HTML5, CSS3, JavaScript) plattformübergreifend beeindruckende Anwendungen entwickeln, die sich wie native Apps verhalten. Lernen Sie, wie Sie das volle Potenzial des Web App Manifest ausschöpfen und erfahren Sie, wie Sie Server Worker sowie die APIs von Push, Cache und Payment Request richtig einsetzen. Erste eigene Progressive Web Apps entwickeln und debbuggen Sie mit…mehr
Andere Kunden interessierten sich auch für
![Penetration Testing mit Metasploit]( "Penetration Testing mit Metasploit")
Sebastian BrabetzPenetration Testing mit Metasploit9,99 €![Social Engineering enttarnt]( "Social Engineering enttarnt")
Christopher HadnagySocial Engineering enttarnt16,99 €![Moving to Responsive Web Design]( "Moving to Responsive Web Design")
Inayaili de LeónMoving to Responsive Web Design27,99 €![HTML5 and CSS3 All-in-One For Dummies]( "HTML5 and CSS3 All-in-One For Dummies")
Andy HarrisHTML5 and CSS3 All-in-One For Dummies32,99 €![Leben im Schatten]( "Leben im Schatten")
Belal GhazouanLeben im Schatten31,99 €![Hacking mit Post Exploitation Frameworks]( "Hacking mit Post Exploitation Frameworks")
Frank NeugebauerHacking mit Post Exploitation Frameworks49,99 €![Webseiten hacken]( "Webseiten hacken")
Mark B.Webseiten hacken24,90 €-
-
-
-
-
-
-
-
-
-
-
-
-
Progressive Web Apps (PWAs) sind eine moderne und zeitgemäße Form der Webapp. Ausgestattet mit allen Möglichkeiten wie Offlinefähigkeit, Push-Benachrichtigungen und Datensynchronisation können Sie mit modernen Webtechnologien (HTML5, CSS3, JavaScript) plattformübergreifend beeindruckende Anwendungen entwickeln, die sich wie native Apps verhalten.
Lernen Sie, wie Sie das volle Potenzial des Web App Manifest ausschöpfen und erfahren Sie, wie Sie Server Worker sowie die APIs von Push, Cache und Payment Request richtig einsetzen. Erste eigene Progressive Web Apps entwickeln und debbuggen Sie mit dem Single-Page-Application-Framework Angular oder Workbox. Migrationsszenarien hin zu Progressive Web Apps auf Basis der beiden Technologien Apache Cordova und GitHub Electron helfen Ihnen zudem beim Verpacken Ihrer Weblösung als natives Anwendungspaket für Mobil- und Desktopplattformen.
Aus dem Inhalt:
Moderne Webtechnologien in der AnwendungZehn Eigenschaften, die PWA einzigartig machenWeb App Manifest: Aussehen der App definierenUmgang mit dem Service WorkerCache APIPush APIPWA und AngularSo läuft's auf Desktop und MobileValidierung mit Lighthouse und Co.Migrationsstrategien mit Cordova und ElectronPayment Request API
Hinweis: Dieser Artikel kann nur an eine deutsche Lieferadresse ausgeliefert werden.
Lernen Sie, wie Sie das volle Potenzial des Web App Manifest ausschöpfen und erfahren Sie, wie Sie Server Worker sowie die APIs von Push, Cache und Payment Request richtig einsetzen. Erste eigene Progressive Web Apps entwickeln und debbuggen Sie mit dem Single-Page-Application-Framework Angular oder Workbox. Migrationsszenarien hin zu Progressive Web Apps auf Basis der beiden Technologien Apache Cordova und GitHub Electron helfen Ihnen zudem beim Verpacken Ihrer Weblösung als natives Anwendungspaket für Mobil- und Desktopplattformen.
Aus dem Inhalt:
Moderne Webtechnologien in der AnwendungZehn Eigenschaften, die PWA einzigartig machenWeb App Manifest: Aussehen der App definierenUmgang mit dem Service WorkerCache APIPush APIPWA und AngularSo läuft's auf Desktop und MobileValidierung mit Lighthouse und Co.Migrationsstrategien mit Cordova und ElectronPayment Request API
Hinweis: Dieser Artikel kann nur an eine deutsche Lieferadresse ausgeliefert werden.
Produktdetails
- Produktdetails
- Rheinwerk Computing
- Verlag: Rheinwerk Verlag
- Artikelnr. des Verlages: 459/06494
- Seitenzahl: 518
- Erscheinungstermin: 28. Dezember 2018
- Deutsch
- Abmessung: 248mm x 177mm x 35mm
- Gewicht: 1069g
- ISBN-13: 9783836264945
- ISBN-10: 3836264943
- Artikelnr.: 53413047
- Herstellerkennzeichnung
- Rheinwerk Verlag GmbH
- Rheinwerkallee 4
- 53227 Bonn
- Info@rheinwerk-verlag.de
- +49228421500
- Rheinwerk Computing
- Verlag: Rheinwerk Verlag
- Artikelnr. des Verlages: 459/06494
- Seitenzahl: 518
- Erscheinungstermin: 28. Dezember 2018
- Deutsch
- Abmessung: 248mm x 177mm x 35mm
- Gewicht: 1069g
- ISBN-13: 9783836264945
- ISBN-10: 3836264943
- Artikelnr.: 53413047
- Herstellerkennzeichnung
- Rheinwerk Verlag GmbH
- Rheinwerkallee 4
- 53227 Bonn
- Info@rheinwerk-verlag.de
- +49228421500
Materialien zum Buch ... 17
Geleitwort ... 19
Vorwort ... 21
1. Im Web, als App: Geschichte und Einstieg ... 25
1.1 ... Wie Apps auf unser Handy kamen - eine kleine Zeitreise ... 27
1.2 ... Progressive Web Apps: wohin die Reise der Anwendungsentwicklung geht ... 35
1.3 ... Voraussetzungen und Basics: welches Wissen Sie schon mitbringen sollten ... 42
1.4 ... Tools installieren: das Handwerkszeug zur PWA-Entwicklung ... 48
1.5 ... Setup: Das erste PWA-Projekt ... 54
1.6 ... Zusammenfassung ... 65
2. Mächtiges modernes Web ... 67
2.1 ... Audio-/Videoelement: Multimediainhalte ohne Plug-in wiedergeben ... 70
2.2 ... Canvas-Element: ansprechende 2D- und 3D-Visualisierungen ... 72
2.3 ... Gamepad API: App mit dem Game-Controller steuern ... 78
2.4 ... WebAssembly: Binärcode für das Web mit nahezu nativer Performance ... 82
2.5 ... Web Share API: Teilen von Inhalten aus dem Browser heraus ... 84
2.6 ... Web Speech API: Text-to-Speech im Browser ... 87
2.7 ... Media Capture and Streams: auf Kamera und Mikrofon zugreifen ... 88
2.8 ... Generic Sensor API: Zugriff auf die Gerätesensoren ... 91
2.9 ... Pointer Events und Pressure.js: Force Touch im Web ... 93
2.10 ... Geolocation: Implementierung standortbezogener Dienste ... 94
2.11 ... Zusammenfassung ... 98
3. Zehn Eigenschaften, die PWA einzigartig machen ... 99
3.1 ... Voranschreiten mit Progressive Enhancement ... 100
3.2 ... App-ähnlich: Sieht aus wie eine App, fühlt sich an wie eine App ... 103
3.3 ... Verbindungsunabhängigkeit: Kein Funkloch hält Sie auf ... 106
3.4 ... Immer schön frisch bleiben: der Service-Worker-Updateprozess ... 109
3.5 ... Sicher: Mit großer Macht kommt große Verantwortung ... 110
3.6 ... Einer für alle: Responsive Webdesign ... 115
3.7 ... Auffindbarkeit: Websites und Apps unterscheiden ... 118
3.8 ... Installierbarkeit: So kommt Ihre PWA auf den Homebildschirm ... 120
3.9 ... Nutzer binden: Anwender mit Pushbenachrichtigungen zurückholen ... 123
3.10 ... Verlinkbar: auf Anwendungen und Zustände verweisen ... 126
3.11 ... Zusammenfassung ... 129
4. Web App Manifest: Aussehen der App definieren ... 131
4.1 ... App-Aussehen auf dem Homebildschirm anpassen ... 135
4.2 ... App-Verhalten anpassen ... 146
4.3 ... Web App Manifest referenzieren ... 156
4.4 ... Zur Installation auffordern ... 157
4.5 ... Zukunftsmusik: Badging API ... 166
4.6 ... Microsoft Store Ingestion: Wie die App den Weg in den Microsoft Store findet ... 168
4.7 ... PWA Builder ... 170
4.8 ... Zusammenfassung ... 170
5. Service Worker: Einer muss ja arbeiten ... 171
5.1 ... Vom Web Worker zum Service Worker ... 171
5.2 ... Kontrollzwang mit Vorteilen: Service Worker als zentraler Proxy ... 176
5.3 ... Lebenszyklus ... 188
5.4 ... Schnittstellen ... 199
5.5 ... Wir alle machen Fehler: Service Worker debuggen ... 207
5.6 ... Background Sync API ... 217
5.7 ... Navigation Preload ... 221
5.8 ... Zusammenfassung ... 223
6. Cache API: So lädt die App auch ohne Netzverbindung ... 225
6.1 ... HTTP-Crashkurs: So war das noch mal mit Anfragen und Antworten ... 226
6.2 ... Auslaufmodell Application Cache ... 235
6.3 ... Caches verwalten ... 236
6.4 ... Antworten zur Seite legen: Man weiß nie, wann man sie wieder gebrauchen kann ... 238
6.5 ... It's a match! - Passende Antworten aus dem Cache holen ... 246
6.6 ... Cacheeinträge löschen ... 250
6.7 ... Caches debuggen ... 251
6.8 ... Caching-Strategien ... 252
6.9 ... Weitere Service-Worker-Use-Cases ... 259
6.10 ... Zusammenfassung ... 260
7. Workbox ... 261
7.1 ... Befehle der Workbox CLI ... 262
7.2 ... Workbox-Projekt aufsetzen ... 263
7.3 ... Precaching ... 265
7.4 ... Runtime Caching ... 270
7.5 ... Service Worker erweitern ... 276
7.6 ... Workbox in den Buildprozess integrieren ... 279
7.7 ... Navigation Preload aktivieren ... 282
7.8 ... Offlineanalysedaten erfassen ... 282
7.9 ... Zusammenfassung ... 283
8. Push API: Rufen Sie nicht uns an - wir rufen Sie an! ... 285
8.1 ... Das Push-Prinzip ... 286
8.2 ... Nur eine Chance: Pushregistrierung beantragen ... 287
8.3 ... Informationsaustausch ... 293
8.4 ... Den Server Pushnachrichten verschicken lassen ... 297
8.5 ... Pushereignisse behandeln ... 302
8.6 ... Sonderfall Apple ... 310
8.7 ... Drittanbieterdienste: OneSignal & Co. ... 314
8.8 ... Pushnachrichten zur Laufzeit ... 316
8.9 ... Zusammenfassung ... 319
9. PWA und Angular: Single-Page-Application-Framework einsetzen ... 321
9.1 ... Projekt-Setup ... 323
9.2 ... Responsive und App-like: Navigationsgrundgerüst mit Angular Material ... 325
9.3 ... Linkable: Routing implementieren ... 329
9.4 ... App-Like, die zweite: Moderne Web-APIs einsetzen ... 333
9.5 ... PWA-Unterstützung installieren ... 335
9.6 ... Discoverable: Web App Manifest anpassen ... 336
9.7 ... Connectivity Independent, die erste: Quelldateien der Anwendung offlinefähig machen ... 338
9.8 ... Connectivity Independent, die zweite: strukturierte Daten zwischenspeichern ... 348
9.9 ... Reengageable: Pushereignisse mit SwPush ... 359
9.10 ... Fresh: Updateprozess mit SwUpdate ... 364
9.11 ... Installable: Installation anbieten ... 366
9.12 ... Angular Universal: mit Server-Side-Rendering zur App Shell ... 368
9.13 ... PRPL-Entwurfsmuster ... 369
9.14 ... Zusammenfassung ... 370
10. App-like aussehen ... 373
10.1 ... Native Schriftarten einsetzen ... 373
10.2 ... Textauswahl und Link-Highlighting verhindern ... 375
10.3 ... App-like Anwendungsframeworks ... 379
10.4 ... Notches unterstützen ... 381
10.5 ... Zusammenfassung ... 386
11. Plattformverhalten ... 387
11.1 ... macOS ... 387
11.2 ... iOS ... 389
11.3 ... Android ... 391
11.4 ... Windows ... 395
11.5 ... Linux ... 397
11.6 ... Zusammenfassung ... 399
12. Alles richtig gemacht? - PWAs validieren mit Lighthouse & Co. ... 401
12.1 ... Barrierefreiheit testen mit aXe ... 402
12.2 ... Lighthouse: der Leuchtturm der Websitevalidierung ... 405
12.3 ... webhint: ein Linter für das Web ... 411
12.4 ... Zusammenfassung ... 416
13. Migrationsstrategien mit Apache Cordova und GitHub Electron ... 417
13.1 ... Apache Cordova ... 419
13.2 ... GitHub Electron ... 440
13.3 ... Plattformunterschiede elegant verbergen ... 455
13.4 ... Chromium Embedded Framework: Desktopanwendungen schrittweise entkernen ... 459
13.5 ... Zusammenfassung und Fazit ... 460
14. Payment Request API: Wie Sie trotz fehlendem App Store an Ihr Geld kommen ... 463
14.1 ... Warum Check-out-Formulare nicht die Lösung sind ... 464
14.2 ... Einfaches Check-out mit der Payment Request API ... 466
14.3 ... Ablauf einer Zahlungsanforderung ... 470
14.4 ... Payment Method: Basic Card ... 474
14.5 ... Google Pay ... 478
14.6 ... Apple Pay ... 482
14.7 ... Fazit: Viele Wege führen zum Fallback ... 489
14.8 ... Ausblick: Payment Handler API ... 491
14.9 ... Zusammenfassung ... 492
15. Brandheiße Progressive Web Apps ... 495
15.1 ... Twitter Lite ... 496
15.2 ... Financial Times ... 497
15.3 ... Telegram ... 498
15.4 ... Pokédex ... 499
15.5 ... QR Scanner ... 500
15.6 ... Zusammenfassung ... 502
16. Fazit: Eine Codebasis, alle Plattformen ... 503
16.1 ... Ideales technologisches Umfeld ... 503
16.2 ... Interessen der Plattformhersteller ... 504
16.3 ... Wer heute schon PWAs baut ... 506
16.4 ... Limitationen ... 506
16.5 ... Chancen ... 507
16.6 ... Ausblick ... 508
Über den Autor ... 511
Index ... 513
Geleitwort ... 19
Vorwort ... 21
1. Im Web, als App: Geschichte und Einstieg ... 25
1.1 ... Wie Apps auf unser Handy kamen - eine kleine Zeitreise ... 27
1.2 ... Progressive Web Apps: wohin die Reise der Anwendungsentwicklung geht ... 35
1.3 ... Voraussetzungen und Basics: welches Wissen Sie schon mitbringen sollten ... 42
1.4 ... Tools installieren: das Handwerkszeug zur PWA-Entwicklung ... 48
1.5 ... Setup: Das erste PWA-Projekt ... 54
1.6 ... Zusammenfassung ... 65
2. Mächtiges modernes Web ... 67
2.1 ... Audio-/Videoelement: Multimediainhalte ohne Plug-in wiedergeben ... 70
2.2 ... Canvas-Element: ansprechende 2D- und 3D-Visualisierungen ... 72
2.3 ... Gamepad API: App mit dem Game-Controller steuern ... 78
2.4 ... WebAssembly: Binärcode für das Web mit nahezu nativer Performance ... 82
2.5 ... Web Share API: Teilen von Inhalten aus dem Browser heraus ... 84
2.6 ... Web Speech API: Text-to-Speech im Browser ... 87
2.7 ... Media Capture and Streams: auf Kamera und Mikrofon zugreifen ... 88
2.8 ... Generic Sensor API: Zugriff auf die Gerätesensoren ... 91
2.9 ... Pointer Events und Pressure.js: Force Touch im Web ... 93
2.10 ... Geolocation: Implementierung standortbezogener Dienste ... 94
2.11 ... Zusammenfassung ... 98
3. Zehn Eigenschaften, die PWA einzigartig machen ... 99
3.1 ... Voranschreiten mit Progressive Enhancement ... 100
3.2 ... App-ähnlich: Sieht aus wie eine App, fühlt sich an wie eine App ... 103
3.3 ... Verbindungsunabhängigkeit: Kein Funkloch hält Sie auf ... 106
3.4 ... Immer schön frisch bleiben: der Service-Worker-Updateprozess ... 109
3.5 ... Sicher: Mit großer Macht kommt große Verantwortung ... 110
3.6 ... Einer für alle: Responsive Webdesign ... 115
3.7 ... Auffindbarkeit: Websites und Apps unterscheiden ... 118
3.8 ... Installierbarkeit: So kommt Ihre PWA auf den Homebildschirm ... 120
3.9 ... Nutzer binden: Anwender mit Pushbenachrichtigungen zurückholen ... 123
3.10 ... Verlinkbar: auf Anwendungen und Zustände verweisen ... 126
3.11 ... Zusammenfassung ... 129
4. Web App Manifest: Aussehen der App definieren ... 131
4.1 ... App-Aussehen auf dem Homebildschirm anpassen ... 135
4.2 ... App-Verhalten anpassen ... 146
4.3 ... Web App Manifest referenzieren ... 156
4.4 ... Zur Installation auffordern ... 157
4.5 ... Zukunftsmusik: Badging API ... 166
4.6 ... Microsoft Store Ingestion: Wie die App den Weg in den Microsoft Store findet ... 168
4.7 ... PWA Builder ... 170
4.8 ... Zusammenfassung ... 170
5. Service Worker: Einer muss ja arbeiten ... 171
5.1 ... Vom Web Worker zum Service Worker ... 171
5.2 ... Kontrollzwang mit Vorteilen: Service Worker als zentraler Proxy ... 176
5.3 ... Lebenszyklus ... 188
5.4 ... Schnittstellen ... 199
5.5 ... Wir alle machen Fehler: Service Worker debuggen ... 207
5.6 ... Background Sync API ... 217
5.7 ... Navigation Preload ... 221
5.8 ... Zusammenfassung ... 223
6. Cache API: So lädt die App auch ohne Netzverbindung ... 225
6.1 ... HTTP-Crashkurs: So war das noch mal mit Anfragen und Antworten ... 226
6.2 ... Auslaufmodell Application Cache ... 235
6.3 ... Caches verwalten ... 236
6.4 ... Antworten zur Seite legen: Man weiß nie, wann man sie wieder gebrauchen kann ... 238
6.5 ... It's a match! - Passende Antworten aus dem Cache holen ... 246
6.6 ... Cacheeinträge löschen ... 250
6.7 ... Caches debuggen ... 251
6.8 ... Caching-Strategien ... 252
6.9 ... Weitere Service-Worker-Use-Cases ... 259
6.10 ... Zusammenfassung ... 260
7. Workbox ... 261
7.1 ... Befehle der Workbox CLI ... 262
7.2 ... Workbox-Projekt aufsetzen ... 263
7.3 ... Precaching ... 265
7.4 ... Runtime Caching ... 270
7.5 ... Service Worker erweitern ... 276
7.6 ... Workbox in den Buildprozess integrieren ... 279
7.7 ... Navigation Preload aktivieren ... 282
7.8 ... Offlineanalysedaten erfassen ... 282
7.9 ... Zusammenfassung ... 283
8. Push API: Rufen Sie nicht uns an - wir rufen Sie an! ... 285
8.1 ... Das Push-Prinzip ... 286
8.2 ... Nur eine Chance: Pushregistrierung beantragen ... 287
8.3 ... Informationsaustausch ... 293
8.4 ... Den Server Pushnachrichten verschicken lassen ... 297
8.5 ... Pushereignisse behandeln ... 302
8.6 ... Sonderfall Apple ... 310
8.7 ... Drittanbieterdienste: OneSignal & Co. ... 314
8.8 ... Pushnachrichten zur Laufzeit ... 316
8.9 ... Zusammenfassung ... 319
9. PWA und Angular: Single-Page-Application-Framework einsetzen ... 321
9.1 ... Projekt-Setup ... 323
9.2 ... Responsive und App-like: Navigationsgrundgerüst mit Angular Material ... 325
9.3 ... Linkable: Routing implementieren ... 329
9.4 ... App-Like, die zweite: Moderne Web-APIs einsetzen ... 333
9.5 ... PWA-Unterstützung installieren ... 335
9.6 ... Discoverable: Web App Manifest anpassen ... 336
9.7 ... Connectivity Independent, die erste: Quelldateien der Anwendung offlinefähig machen ... 338
9.8 ... Connectivity Independent, die zweite: strukturierte Daten zwischenspeichern ... 348
9.9 ... Reengageable: Pushereignisse mit SwPush ... 359
9.10 ... Fresh: Updateprozess mit SwUpdate ... 364
9.11 ... Installable: Installation anbieten ... 366
9.12 ... Angular Universal: mit Server-Side-Rendering zur App Shell ... 368
9.13 ... PRPL-Entwurfsmuster ... 369
9.14 ... Zusammenfassung ... 370
10. App-like aussehen ... 373
10.1 ... Native Schriftarten einsetzen ... 373
10.2 ... Textauswahl und Link-Highlighting verhindern ... 375
10.3 ... App-like Anwendungsframeworks ... 379
10.4 ... Notches unterstützen ... 381
10.5 ... Zusammenfassung ... 386
11. Plattformverhalten ... 387
11.1 ... macOS ... 387
11.2 ... iOS ... 389
11.3 ... Android ... 391
11.4 ... Windows ... 395
11.5 ... Linux ... 397
11.6 ... Zusammenfassung ... 399
12. Alles richtig gemacht? - PWAs validieren mit Lighthouse & Co. ... 401
12.1 ... Barrierefreiheit testen mit aXe ... 402
12.2 ... Lighthouse: der Leuchtturm der Websitevalidierung ... 405
12.3 ... webhint: ein Linter für das Web ... 411
12.4 ... Zusammenfassung ... 416
13. Migrationsstrategien mit Apache Cordova und GitHub Electron ... 417
13.1 ... Apache Cordova ... 419
13.2 ... GitHub Electron ... 440
13.3 ... Plattformunterschiede elegant verbergen ... 455
13.4 ... Chromium Embedded Framework: Desktopanwendungen schrittweise entkernen ... 459
13.5 ... Zusammenfassung und Fazit ... 460
14. Payment Request API: Wie Sie trotz fehlendem App Store an Ihr Geld kommen ... 463
14.1 ... Warum Check-out-Formulare nicht die Lösung sind ... 464
14.2 ... Einfaches Check-out mit der Payment Request API ... 466
14.3 ... Ablauf einer Zahlungsanforderung ... 470
14.4 ... Payment Method: Basic Card ... 474
14.5 ... Google Pay ... 478
14.6 ... Apple Pay ... 482
14.7 ... Fazit: Viele Wege führen zum Fallback ... 489
14.8 ... Ausblick: Payment Handler API ... 491
14.9 ... Zusammenfassung ... 492
15. Brandheiße Progressive Web Apps ... 495
15.1 ... Twitter Lite ... 496
15.2 ... Financial Times ... 497
15.3 ... Telegram ... 498
15.4 ... Pokédex ... 499
15.5 ... QR Scanner ... 500
15.6 ... Zusammenfassung ... 502
16. Fazit: Eine Codebasis, alle Plattformen ... 503
16.1 ... Ideales technologisches Umfeld ... 503
16.2 ... Interessen der Plattformhersteller ... 504
16.3 ... Wer heute schon PWAs baut ... 506
16.4 ... Limitationen ... 506
16.5 ... Chancen ... 507
16.6 ... Ausblick ... 508
Über den Autor ... 511
Index ... 513
Materialien zum Buch ... 17
Geleitwort ... 19
Vorwort ... 21
1. Im Web, als App: Geschichte und Einstieg ... 25
1.1 ... Wie Apps auf unser Handy kamen - eine kleine Zeitreise ... 27
1.2 ... Progressive Web Apps: wohin die Reise der Anwendungsentwicklung geht ... 35
1.3 ... Voraussetzungen und Basics: welches Wissen Sie schon mitbringen sollten ... 42
1.4 ... Tools installieren: das Handwerkszeug zur PWA-Entwicklung ... 48
1.5 ... Setup: Das erste PWA-Projekt ... 54
1.6 ... Zusammenfassung ... 65
2. Mächtiges modernes Web ... 67
2.1 ... Audio-/Videoelement: Multimediainhalte ohne Plug-in wiedergeben ... 70
2.2 ... Canvas-Element: ansprechende 2D- und 3D-Visualisierungen ... 72
2.3 ... Gamepad API: App mit dem Game-Controller steuern ... 78
2.4 ... WebAssembly: Binärcode für das Web mit nahezu nativer Performance ... 82
2.5 ... Web Share API: Teilen von Inhalten aus dem Browser heraus ... 84
2.6 ... Web Speech API: Text-to-Speech im Browser ... 87
2.7 ... Media Capture and Streams: auf Kamera und Mikrofon zugreifen ... 88
2.8 ... Generic Sensor API: Zugriff auf die Gerätesensoren ... 91
2.9 ... Pointer Events und Pressure.js: Force Touch im Web ... 93
2.10 ... Geolocation: Implementierung standortbezogener Dienste ... 94
2.11 ... Zusammenfassung ... 98
3. Zehn Eigenschaften, die PWA einzigartig machen ... 99
3.1 ... Voranschreiten mit Progressive Enhancement ... 100
3.2 ... App-ähnlich: Sieht aus wie eine App, fühlt sich an wie eine App ... 103
3.3 ... Verbindungsunabhängigkeit: Kein Funkloch hält Sie auf ... 106
3.4 ... Immer schön frisch bleiben: der Service-Worker-Updateprozess ... 109
3.5 ... Sicher: Mit großer Macht kommt große Verantwortung ... 110
3.6 ... Einer für alle: Responsive Webdesign ... 115
3.7 ... Auffindbarkeit: Websites und Apps unterscheiden ... 118
3.8 ... Installierbarkeit: So kommt Ihre PWA auf den Homebildschirm ... 120
3.9 ... Nutzer binden: Anwender mit Pushbenachrichtigungen zurückholen ... 123
3.10 ... Verlinkbar: auf Anwendungen und Zustände verweisen ... 126
3.11 ... Zusammenfassung ... 129
4. Web App Manifest: Aussehen der App definieren ... 131
4.1 ... App-Aussehen auf dem Homebildschirm anpassen ... 135
4.2 ... App-Verhalten anpassen ... 146
4.3 ... Web App Manifest referenzieren ... 156
4.4 ... Zur Installation auffordern ... 157
4.5 ... Zukunftsmusik: Badging API ... 166
4.6 ... Microsoft Store Ingestion: Wie die App den Weg in den Microsoft Store findet ... 168
4.7 ... PWA Builder ... 170
4.8 ... Zusammenfassung ... 170
5. Service Worker: Einer muss ja arbeiten ... 171
5.1 ... Vom Web Worker zum Service Worker ... 171
5.2 ... Kontrollzwang mit Vorteilen: Service Worker als zentraler Proxy ... 176
5.3 ... Lebenszyklus ... 188
5.4 ... Schnittstellen ... 199
5.5 ... Wir alle machen Fehler: Service Worker debuggen ... 207
5.6 ... Background Sync API ... 217
5.7 ... Navigation Preload ... 221
5.8 ... Zusammenfassung ... 223
6. Cache API: So lädt die App auch ohne Netzverbindung ... 225
6.1 ... HTTP-Crashkurs: So war das noch mal mit Anfragen und Antworten ... 226
6.2 ... Auslaufmodell Application Cache ... 235
6.3 ... Caches verwalten ... 236
6.4 ... Antworten zur Seite legen: Man weiß nie, wann man sie wieder gebrauchen kann ... 238
6.5 ... It's a match! - Passende Antworten aus dem Cache holen ... 246
6.6 ... Cacheeinträge löschen ... 250
6.7 ... Caches debuggen ... 251
6.8 ... Caching-Strategien ... 252
6.9 ... Weitere Service-Worker-Use-Cases ... 259
6.10 ... Zusammenfassung ... 260
7. Workbox ... 261
7.1 ... Befehle der Workbox CLI ... 262
7.2 ... Workbox-Projekt aufsetzen ... 263
7.3 ... Precaching ... 265
7.4 ... Runtime Caching ... 270
7.5 ... Service Worker erweitern ... 276
7.6 ... Workbox in den Buildprozess integrieren ... 279
7.7 ... Navigation Preload aktivieren ... 282
7.8 ... Offlineanalysedaten erfassen ... 282
7.9 ... Zusammenfassung ... 283
8. Push API: Rufen Sie nicht uns an - wir rufen Sie an! ... 285
8.1 ... Das Push-Prinzip ... 286
8.2 ... Nur eine Chance: Pushregistrierung beantragen ... 287
8.3 ... Informationsaustausch ... 293
8.4 ... Den Server Pushnachrichten verschicken lassen ... 297
8.5 ... Pushereignisse behandeln ... 302
8.6 ... Sonderfall Apple ... 310
8.7 ... Drittanbieterdienste: OneSignal & Co. ... 314
8.8 ... Pushnachrichten zur Laufzeit ... 316
8.9 ... Zusammenfassung ... 319
9. PWA und Angular: Single-Page-Application-Framework einsetzen ... 321
9.1 ... Projekt-Setup ... 323
9.2 ... Responsive und App-like: Navigationsgrundgerüst mit Angular Material ... 325
9.3 ... Linkable: Routing implementieren ... 329
9.4 ... App-Like, die zweite: Moderne Web-APIs einsetzen ... 333
9.5 ... PWA-Unterstützung installieren ... 335
9.6 ... Discoverable: Web App Manifest anpassen ... 336
9.7 ... Connectivity Independent, die erste: Quelldateien der Anwendung offlinefähig machen ... 338
9.8 ... Connectivity Independent, die zweite: strukturierte Daten zwischenspeichern ... 348
9.9 ... Reengageable: Pushereignisse mit SwPush ... 359
9.10 ... Fresh: Updateprozess mit SwUpdate ... 364
9.11 ... Installable: Installation anbieten ... 366
9.12 ... Angular Universal: mit Server-Side-Rendering zur App Shell ... 368
9.13 ... PRPL-Entwurfsmuster ... 369
9.14 ... Zusammenfassung ... 370
10. App-like aussehen ... 373
10.1 ... Native Schriftarten einsetzen ... 373
10.2 ... Textauswahl und Link-Highlighting verhindern ... 375
10.3 ... App-like Anwendungsframeworks ... 379
10.4 ... Notches unterstützen ... 381
10.5 ... Zusammenfassung ... 386
11. Plattformverhalten ... 387
11.1 ... macOS ... 387
11.2 ... iOS ... 389
11.3 ... Android ... 391
11.4 ... Windows ... 395
11.5 ... Linux ... 397
11.6 ... Zusammenfassung ... 399
12. Alles richtig gemacht? - PWAs validieren mit Lighthouse & Co. ... 401
12.1 ... Barrierefreiheit testen mit aXe ... 402
12.2 ... Lighthouse: der Leuchtturm der Websitevalidierung ... 405
12.3 ... webhint: ein Linter für das Web ... 411
12.4 ... Zusammenfassung ... 416
13. Migrationsstrategien mit Apache Cordova und GitHub Electron ... 417
13.1 ... Apache Cordova ... 419
13.2 ... GitHub Electron ... 440
13.3 ... Plattformunterschiede elegant verbergen ... 455
13.4 ... Chromium Embedded Framework: Desktopanwendungen schrittweise entkernen ... 459
13.5 ... Zusammenfassung und Fazit ... 460
14. Payment Request API: Wie Sie trotz fehlendem App Store an Ihr Geld kommen ... 463
14.1 ... Warum Check-out-Formulare nicht die Lösung sind ... 464
14.2 ... Einfaches Check-out mit der Payment Request API ... 466
14.3 ... Ablauf einer Zahlungsanforderung ... 470
14.4 ... Payment Method: Basic Card ... 474
14.5 ... Google Pay ... 478
14.6 ... Apple Pay ... 482
14.7 ... Fazit: Viele Wege führen zum Fallback ... 489
14.8 ... Ausblick: Payment Handler API ... 491
14.9 ... Zusammenfassung ... 492
15. Brandheiße Progressive Web Apps ... 495
15.1 ... Twitter Lite ... 496
15.2 ... Financial Times ... 497
15.3 ... Telegram ... 498
15.4 ... Pokédex ... 499
15.5 ... QR Scanner ... 500
15.6 ... Zusammenfassung ... 502
16. Fazit: Eine Codebasis, alle Plattformen ... 503
16.1 ... Ideales technologisches Umfeld ... 503
16.2 ... Interessen der Plattformhersteller ... 504
16.3 ... Wer heute schon PWAs baut ... 506
16.4 ... Limitationen ... 506
16.5 ... Chancen ... 507
16.6 ... Ausblick ... 508
Über den Autor ... 511
Index ... 513
Geleitwort ... 19
Vorwort ... 21
1. Im Web, als App: Geschichte und Einstieg ... 25
1.1 ... Wie Apps auf unser Handy kamen - eine kleine Zeitreise ... 27
1.2 ... Progressive Web Apps: wohin die Reise der Anwendungsentwicklung geht ... 35
1.3 ... Voraussetzungen und Basics: welches Wissen Sie schon mitbringen sollten ... 42
1.4 ... Tools installieren: das Handwerkszeug zur PWA-Entwicklung ... 48
1.5 ... Setup: Das erste PWA-Projekt ... 54
1.6 ... Zusammenfassung ... 65
2. Mächtiges modernes Web ... 67
2.1 ... Audio-/Videoelement: Multimediainhalte ohne Plug-in wiedergeben ... 70
2.2 ... Canvas-Element: ansprechende 2D- und 3D-Visualisierungen ... 72
2.3 ... Gamepad API: App mit dem Game-Controller steuern ... 78
2.4 ... WebAssembly: Binärcode für das Web mit nahezu nativer Performance ... 82
2.5 ... Web Share API: Teilen von Inhalten aus dem Browser heraus ... 84
2.6 ... Web Speech API: Text-to-Speech im Browser ... 87
2.7 ... Media Capture and Streams: auf Kamera und Mikrofon zugreifen ... 88
2.8 ... Generic Sensor API: Zugriff auf die Gerätesensoren ... 91
2.9 ... Pointer Events und Pressure.js: Force Touch im Web ... 93
2.10 ... Geolocation: Implementierung standortbezogener Dienste ... 94
2.11 ... Zusammenfassung ... 98
3. Zehn Eigenschaften, die PWA einzigartig machen ... 99
3.1 ... Voranschreiten mit Progressive Enhancement ... 100
3.2 ... App-ähnlich: Sieht aus wie eine App, fühlt sich an wie eine App ... 103
3.3 ... Verbindungsunabhängigkeit: Kein Funkloch hält Sie auf ... 106
3.4 ... Immer schön frisch bleiben: der Service-Worker-Updateprozess ... 109
3.5 ... Sicher: Mit großer Macht kommt große Verantwortung ... 110
3.6 ... Einer für alle: Responsive Webdesign ... 115
3.7 ... Auffindbarkeit: Websites und Apps unterscheiden ... 118
3.8 ... Installierbarkeit: So kommt Ihre PWA auf den Homebildschirm ... 120
3.9 ... Nutzer binden: Anwender mit Pushbenachrichtigungen zurückholen ... 123
3.10 ... Verlinkbar: auf Anwendungen und Zustände verweisen ... 126
3.11 ... Zusammenfassung ... 129
4. Web App Manifest: Aussehen der App definieren ... 131
4.1 ... App-Aussehen auf dem Homebildschirm anpassen ... 135
4.2 ... App-Verhalten anpassen ... 146
4.3 ... Web App Manifest referenzieren ... 156
4.4 ... Zur Installation auffordern ... 157
4.5 ... Zukunftsmusik: Badging API ... 166
4.6 ... Microsoft Store Ingestion: Wie die App den Weg in den Microsoft Store findet ... 168
4.7 ... PWA Builder ... 170
4.8 ... Zusammenfassung ... 170
5. Service Worker: Einer muss ja arbeiten ... 171
5.1 ... Vom Web Worker zum Service Worker ... 171
5.2 ... Kontrollzwang mit Vorteilen: Service Worker als zentraler Proxy ... 176
5.3 ... Lebenszyklus ... 188
5.4 ... Schnittstellen ... 199
5.5 ... Wir alle machen Fehler: Service Worker debuggen ... 207
5.6 ... Background Sync API ... 217
5.7 ... Navigation Preload ... 221
5.8 ... Zusammenfassung ... 223
6. Cache API: So lädt die App auch ohne Netzverbindung ... 225
6.1 ... HTTP-Crashkurs: So war das noch mal mit Anfragen und Antworten ... 226
6.2 ... Auslaufmodell Application Cache ... 235
6.3 ... Caches verwalten ... 236
6.4 ... Antworten zur Seite legen: Man weiß nie, wann man sie wieder gebrauchen kann ... 238
6.5 ... It's a match! - Passende Antworten aus dem Cache holen ... 246
6.6 ... Cacheeinträge löschen ... 250
6.7 ... Caches debuggen ... 251
6.8 ... Caching-Strategien ... 252
6.9 ... Weitere Service-Worker-Use-Cases ... 259
6.10 ... Zusammenfassung ... 260
7. Workbox ... 261
7.1 ... Befehle der Workbox CLI ... 262
7.2 ... Workbox-Projekt aufsetzen ... 263
7.3 ... Precaching ... 265
7.4 ... Runtime Caching ... 270
7.5 ... Service Worker erweitern ... 276
7.6 ... Workbox in den Buildprozess integrieren ... 279
7.7 ... Navigation Preload aktivieren ... 282
7.8 ... Offlineanalysedaten erfassen ... 282
7.9 ... Zusammenfassung ... 283
8. Push API: Rufen Sie nicht uns an - wir rufen Sie an! ... 285
8.1 ... Das Push-Prinzip ... 286
8.2 ... Nur eine Chance: Pushregistrierung beantragen ... 287
8.3 ... Informationsaustausch ... 293
8.4 ... Den Server Pushnachrichten verschicken lassen ... 297
8.5 ... Pushereignisse behandeln ... 302
8.6 ... Sonderfall Apple ... 310
8.7 ... Drittanbieterdienste: OneSignal & Co. ... 314
8.8 ... Pushnachrichten zur Laufzeit ... 316
8.9 ... Zusammenfassung ... 319
9. PWA und Angular: Single-Page-Application-Framework einsetzen ... 321
9.1 ... Projekt-Setup ... 323
9.2 ... Responsive und App-like: Navigationsgrundgerüst mit Angular Material ... 325
9.3 ... Linkable: Routing implementieren ... 329
9.4 ... App-Like, die zweite: Moderne Web-APIs einsetzen ... 333
9.5 ... PWA-Unterstützung installieren ... 335
9.6 ... Discoverable: Web App Manifest anpassen ... 336
9.7 ... Connectivity Independent, die erste: Quelldateien der Anwendung offlinefähig machen ... 338
9.8 ... Connectivity Independent, die zweite: strukturierte Daten zwischenspeichern ... 348
9.9 ... Reengageable: Pushereignisse mit SwPush ... 359
9.10 ... Fresh: Updateprozess mit SwUpdate ... 364
9.11 ... Installable: Installation anbieten ... 366
9.12 ... Angular Universal: mit Server-Side-Rendering zur App Shell ... 368
9.13 ... PRPL-Entwurfsmuster ... 369
9.14 ... Zusammenfassung ... 370
10. App-like aussehen ... 373
10.1 ... Native Schriftarten einsetzen ... 373
10.2 ... Textauswahl und Link-Highlighting verhindern ... 375
10.3 ... App-like Anwendungsframeworks ... 379
10.4 ... Notches unterstützen ... 381
10.5 ... Zusammenfassung ... 386
11. Plattformverhalten ... 387
11.1 ... macOS ... 387
11.2 ... iOS ... 389
11.3 ... Android ... 391
11.4 ... Windows ... 395
11.5 ... Linux ... 397
11.6 ... Zusammenfassung ... 399
12. Alles richtig gemacht? - PWAs validieren mit Lighthouse & Co. ... 401
12.1 ... Barrierefreiheit testen mit aXe ... 402
12.2 ... Lighthouse: der Leuchtturm der Websitevalidierung ... 405
12.3 ... webhint: ein Linter für das Web ... 411
12.4 ... Zusammenfassung ... 416
13. Migrationsstrategien mit Apache Cordova und GitHub Electron ... 417
13.1 ... Apache Cordova ... 419
13.2 ... GitHub Electron ... 440
13.3 ... Plattformunterschiede elegant verbergen ... 455
13.4 ... Chromium Embedded Framework: Desktopanwendungen schrittweise entkernen ... 459
13.5 ... Zusammenfassung und Fazit ... 460
14. Payment Request API: Wie Sie trotz fehlendem App Store an Ihr Geld kommen ... 463
14.1 ... Warum Check-out-Formulare nicht die Lösung sind ... 464
14.2 ... Einfaches Check-out mit der Payment Request API ... 466
14.3 ... Ablauf einer Zahlungsanforderung ... 470
14.4 ... Payment Method: Basic Card ... 474
14.5 ... Google Pay ... 478
14.6 ... Apple Pay ... 482
14.7 ... Fazit: Viele Wege führen zum Fallback ... 489
14.8 ... Ausblick: Payment Handler API ... 491
14.9 ... Zusammenfassung ... 492
15. Brandheiße Progressive Web Apps ... 495
15.1 ... Twitter Lite ... 496
15.2 ... Financial Times ... 497
15.3 ... Telegram ... 498
15.4 ... Pokédex ... 499
15.5 ... QR Scanner ... 500
15.6 ... Zusammenfassung ... 502
16. Fazit: Eine Codebasis, alle Plattformen ... 503
16.1 ... Ideales technologisches Umfeld ... 503
16.2 ... Interessen der Plattformhersteller ... 504
16.3 ... Wer heute schon PWAs baut ... 506
16.4 ... Limitationen ... 506
16.5 ... Chancen ... 507
16.6 ... Ausblick ... 508
Über den Autor ... 511
Index ... 513