Progressive Web Apps (PWAs) mit Angular

Seminarziel

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.

Inhalt

• Einführung in Progressive Web Apps (PWAs)
  • 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.