Am Ende des Seminars sind die Teilnehmenden in der Lage, eigene Progressive Web Apps mit Angular zu erstellen, die offlinefähig sind und eine hohe Performance aufweisen.
Definition und Vorteile: Erklärung, was PWAs sind, ihre Vorteile wie Offlinefähigkeit, verbesserte Performance und App-ähnliches Benutzererlebnis.
PWA-Kernprinzipien: Diskussion der Kernprinzipien von PWAs, einschließlich Progressive Enhancement, Responsiveness und Offlinefähigkeit.
Einrichtung der Entwicklungsumgebung
Installation der erforderlichen Tools: Schritt-für-Schritt-Anleitung zur Installation von Node.js, npm, Angular CLI und anderen notwendigen Tools.
Erstellung eines neuen Angular-Projekts: Einrichtung eines neuen Angular-Projekts und Erklärung der grundlegenden Projektstruktur.
Grundlagen der PWA-Integration in Angular
Angular Service Worker: Einführung in den Angular Service Worker und seine Rolle bei der Erstellung von PWAs.
Hinzufügen von PWA-Funktionalität: Praktische Übung zur Installation und Konfiguration des Angular Service Workers, um PWA-Funktionalität zu einem bestehenden Angular-Projekt hinzuzufügen.
Caching-Strategien und Offlinefähigkeit
Grundlagen des Caching: Erklärung der verschiedenen Caching-Strategien (Cache-first, Network-first, Stale-while-revalidate) und deren Vor- und Nachteile.
Implementierung von Caching-Strategien: Implementierung von Caching-Strategien im Angular Service Worker, um eine Offlinefähigkeit der Anwendung zu gewährleisten.
Manifest-Datei und App Shell
Erstellung der Manifest-Datei: Einführung in die Web App Manifest-Datei und ihre Bedeutung für PWAs. Anleitung zur Erstellung und Konfiguration einer Manifest-Datei.
App Shell Architektur: Erklärung der App Shell Architektur und deren Implementierung, um die Performance und das Benutzererlebnis zu verbessern.
Push-Benachrichtigungen
Einführung in Push-Benachrichtigungen: Erklärung, wie Push-Benachrichtigungen funktionieren und warum sie für PWAs nützlich sind.
Implementierung von Push-Benachrichtigungen: Schritt-für-Schritt-Anleitung zur Implementierung von Push-Benachrichtigungen in Angular PWAs, einschließlich der Nutzung von Web Push APIs und des Angular Service Workers.
Performance-Optimierung
Lighthouse und Performance-Metriken: Nutzung von Google Lighthouse zur Analyse und Bewertung der Performance einer PWA. Erklärung der wichtigsten Performance-Metriken und deren Bedeutung.
Optimierungstechniken: Techniken zur Verbesserung der Ladezeiten und Gesamtperformance einer PWA, einschließlich Lazy Loading, Code-Splitting und Optimierung von Bildern.
Progressive Enhancement und Responsiveness
Responsive Design: Best Practices für die Umsetzung eines responsiven Designs in Angular PWAs, um eine optimale Benutzererfahrung auf allen Geräten zu gewährleisten.
Progressive Enhancement: Implementierung von Progressive Enhancement-Techniken, um sicherzustellen, dass die Anwendung auch in eingeschränkten Browserumgebungen funktioniert.
Testing und Debugging von PWAs
Testing-Tools und -Techniken: Einführung in Tools und Techniken zum Testen von PWAs, einschließlich Unit-Tests, End-to-End-Tests und manuelles Testing von PWA-spezifischen Features.
Debugging von Service Workern: Praktische Tipps und Techniken zum Debugging von Service Workern und zur Fehlerbehebung bei der Offlinefähigkeit und Performance von PWAs.
Deployment und Best Practices
Deployment von PWAs: Anleitung zur Bereitstellung einer PWA auf verschiedenen Plattformen und Servern, einschließlich der Nutzung von CI/CD-Pipelines zur Automatisierung des Deployment-Prozesses.
Best Practices für PWAs: Zusammenfassung und Diskussion der besten Praktiken für die Entwicklung, Optimierung und Bereitstellung von Angular PWAs.
Dauer/zeitlicher Ablauf:
2 Tage
Zielgruppe:
Dieses Seminar richtet sich an Webentwickler und Softwareingenieure, die Progressive Web Apps mit Angular erstellen und optimieren möchten. Grundlegende Kenntnisse in Angular und JavaScript sind erforderlich.
Wir setzen Analyse-Cookies ein, um Ihre Zufriedenheit bei der Nutzung unserer Webseite zu verbessern.
Diese Cookies werden nicht automatisiert gesetzt.
Wenn Sie mit dem Einsatz dieser Cookies einverstanden sind, klicken Sie bitte auf Akzeptieren.
Weitere Informationen finden Sie hier.
