Progressive Web-Anwendungen (PWA) - Intensiv-Schulung für Einsteiger

Institut: HECKER CONSULTING
Bereich: Technik, EDV, Telekommunikation

Kurs merken

Anmelden

Kursbeschreibung

Von überall abrufbar, kein Download erforderlich, plattformunabhängig, Nutzung im Offline-Modus: Die Progressive Web-Anwendungen (PWA)

Erstellen Sie Ihre erste eigene Progressive Web-Anwendung (PWA)

Von der ersten Konfiguration eines App-Manifests bis Nutzung nativer APIs deckt unser "Progressive Web-Anwendungen (PWA) - Beratung, Coaching, Workshop, Training" alles ab!

Sie erhalten aktuelle Informationen über die Grundlagen und Möglichkeiten der Progressive Web-Anwendungen (PWA) - Technologien und vieles mehr.

Ihre individuellen Fragen und Themenwünsche werden dabei natürlich berücksichtigt.

PWA - Erste Schritte

Was sind progressive Webanwendungen?
PWAs versus native mobile Anwendungen
Eine erste progressive Web-Anwendung
PWA-Kernbausteine
Vergleich von PWAs und SPAs
Was bedeutet "Progressive Verbesserung"?

PWA - Das App-Manifest

Verwendung eines App-Manifests
Hinzufügen des Manifests
Verstehen der Eigenschaften von App-Manifesten
Hinzufügen von Eigenschaften zum App-Manifest
PWAs und Browser-Unterstützung
Verwendung der Chrome-Entwicklerwerkzeuge
Simulieren der Webanwendung auf einem Emulator
Vorbereiten des emulierten Geräts für PWA-Merkmale
Voraussetzungen für die Installation der Webanwendung
Eigenschaften für Safari hinzufügen
Eigenschaften für Internet Explorer hinzufügen

PWA - Die Service-Worker-API

Möglichkeiten von Service-Worker
Die Service-Worker-Events kennen und verstehen
Der Lebenszyklus des Service Workers
Service-Worker Browser-Unterstützung
Registrieren eines Service-Worker
Reagieren auf eingehende Ereignisse im Service-Worker
Aktualisierung und Aktivierung von Service-Worker
Nicht-Lebenszyklus-Ereignisse eines Service-Worker
Verbinden von Chrome-Entwicklerwerkzeugen mit einem realen/emulierten Gerät
Testen der App auf einem realen Gerät
Service-Worker Zusammenfassung

PWA - Das Promise- und Fetch-API

Asynchroner Code in JavaScript
Promises - Grundlagen
Promises verwerfen
Fetch - Grundlagen
Senden von Anfragen über Fetch
Fetch und CORS
Vergleich von Fetch und Ajax
Hinzufügen von Polyfills
Fetch-API und Service-Worker

PWA - Der Service-Worker und Caching

Warum Caching?
Verstehen der Cache-API
Browser-Unterstützung
Identifizieren von cache-bare Elementen
Statische Zwischenspeicherung und Pre-Caching
Abrufen von Elementen aus dem Cache
Hinzufügen und Abrufen mehrerer Dateien zum und vom Cache
Mehrere Dateien mit addAll zwischenspeichern
Grundlagen von Dynamischen Caching
Implementierung von dynamischem Caching
Behandlung von Fehlern
Hinzufügen einer Cache-Versionierung
Unterschiedliche Cache-Versionen und Bereinigung
Optimierung der Cache-Verwaltung

PWA - Die Caching Strategien

Bereitstellen einer Offline-Fallback-Seite
Strategie: Cache bei Bedarf
Strategie: Cache mit Netzwerk-Fallback
Strategie: Nur Cache
Strategie: Nur Netzwerk
Strategie: Netzwerk mit Cache-Fallback
Strategie: Cache dann Netzwerk
Strategie: Cache dann Netzwerk und dynamisches Caching
Strategie: Cache dann Netzwerk mit Offline-Unterstützung
Cache-Strategien und Routing
Bereinigen und Säubern des Caches
Freigeben eines Service-Worker

PWA - Dynamische Daten mit IndexedDB

Grundlagen von IndexedDB
Dynamisches Caching versus Zwischenspeichern dynamischer Inhalte
Einführung von IndexedDB
Unterstützung für IndexedDB-Browser
Hinzufügen der IDB-Datei
Speichern von geholten Daten in IndexedDB
Verwendung von IndexedDB im Service Worker
Lesen von Daten aus der IDB
Löschung von IDB und Behandlung von Server-Client-Unstimmigkeiten
Implementieren der Clear Database Methode
Löschen einzelner Elemente aus der Datenbank
IndexedDB und Caching-Strategien

PWA - Erstellen einer responsiven Benutzeroberfläche (UI)

Verstehen von Responsive Design
CSS und Medienanfragen
Bilder responsiv einsetzen
Hinzufügen von Animationen
Der Viewport und die Skalierung

PWA - Die Hintergrund-Synchronisation

Wie funktioniert die Hintergrund-Synchronisation?
Hinzufügen der Grundeinstellungen
Registrieren einer Synchronisierungsaufgabe
Speichern von Daten in IndexedDB
Hinzufügen eines Fallbacks
Synchronisieren von Daten im Service Worker
Periodische Synchronisierung verstehen
Hinzufügen von serverseitigem Code
Beheben von Fehlern

PWA - Die Web-Push-Benachrichtigungen

Wie Push und Benachrichtigungen funktionieren
Browser-Unterstützung
Beantragung von Berechtigungen
Anzeigen von Benachrichtigungen
Benachrichtigungen aus dem Service-Worker
Optionen für Benachrichtigungen
Hinzufügen von Aktionen zu Benachrichtigungen
Reagieren auf Benachrichtigungs-Interaktion
Von Benachrichtigungen zu Push-Mitteilungen
Erstellen eines Push-Abonnements
Speichern von Abonnements
Server und Client verbinden
Senden von Push-Nachrichten vom Server aus
Wiedergabe von Push-Nachrichten im Client
Anzeigen von Push-Benachrichtigungen auf einem realen Gerät
Öffnen einer Seite bei Benutzerinteraktion

PWA - Der Zugriff auf native Gerätemerkmale

DOM-Zugriff erhalten
Eigene Polyfills erstellen
Kamerazugriff - Abrufen des Videobildes
Speichern des Bildes auf einem Server
Testen der Kamera und Hochladen
Implementierung eines Fallbacks
Ermitteln der Benutzerposition
Behebung von Fehlern
Testen der Anwendung auf einem realen Gerät

PWA - Service-Worker mit Workbox

Die Workbox-Grundlagen verstehen
Installation und Verwendung von Workbox
Konfigurieren der Workbox-Voreinstellungen
Anpassen des Service-Worker
Routing mit dem Workbox-Router
Erweitern des dynamischen Caching
Optionen und Einrichten von Caching-Strategien
Benutzerdefinierte Handler für IndexedDB
Bereitstellen eines Offline-HTML-Fallbacks
Handhabung von Hintergrundsynchronisation und Push-Benachrichtigungen
Verstehen der Workbox-Dokumentation
Verbesserung des Build-Workflows
Prüfung unserer PWA mit Lighthouse

PWA - Die Erstellung mit SPA-Frameworks

Allgemeine Anmerkungen zu SPAs und PWAs
Erstellen einer PWA mit React und create-react-app
Erstellen einer PWA mit Angular und dem Angular CLI
Erstellen einer PWA mit Vue.js und dem Vue CLI

Von überall abrufbar, kein Download erforderlich, plattformunabhängig, Nutzung im Offline-Modus: Die Progressive Web-Anwendungen (PWA)

Erstellen Sie Ihre erste eigene Progressive Web-Anwendung (PWA)

Von der ersten Konfiguration eines App-Manifests bis Nutzung nativer APIs deckt unser "Progressive Web-Anwendungen (PWA) - Beratung, Coaching, Workshop, Training" alles ab!

Sie erhalten aktuelle Informationen über die Grundlagen und Möglichkeiten der Progressive Web-Anwendungen (PWA) - Technologien und vieles mehr.

Ihre individuellen Fragen und Themenwünsche werden dabei natürlich berücksichtigt.

PWA - Erste Schritte

Was sind progressive Webanwendungen?
PWAs versus native mobile Anwendungen
Eine erste progressive Web-Anwendung
PWA-Kernbausteine
Vergleich von PWAs und SPAs
Was bedeutet "Progressive Verbesserung"?

PWA - Das App-Manifest

Verwendung eines App-Manifests
Hinzufügen des Manifests
Verstehen der Eigenschaften von App-Manifesten
Hinzufügen von Eigenschaften zum App-Manifest
PWAs und Browser-Unterstützung
Verwendung der Chrome-Entwicklerwerkzeuge
Simulieren der Webanwendung auf einem Emulator
Vorbereiten des emulierten Geräts für PWA-Merkmale
Voraussetzungen für die Installation der Webanwendung
Eigenschaften für Safari hinzufügen
Eigenschaften für Internet Explorer hinzufügen

PWA - Die Service-Worker-API

Möglichkeiten von Service-Worker
Die Service-Worker-Events kennen und verstehen
Der Lebenszyklus des Service Workers
Service-Worker Browser-Unterstützung
Registrieren eines Service-Worker
Reagieren auf eingehende Ereignisse im Service-Worker
Aktualisierung und Aktivierung von Service-Worker
Nicht-Lebenszyklus-Ereignisse eines Service-Worker
Verbinden von Chrome-Entwicklerwerkzeugen mit einem realen/emulierten Gerät
Testen der App auf einem realen Gerät
Service-Worker Zusammenfassung

PWA - Das Promise…

mehrweniger lesen

Wann & Wo

Website

https://www.hco.de

Datum

auf Anfrage

Uhrzeit

09:00

Dauer

ab 1 Tag nach Vereinbarung

Ort

Virtuelles Klassenzimmer, Live-Online-Seminar

Kontakt

E-Mail

info@hco.de

Kontakt

Peter Hecker

Straße

Erkrather Str. 401

PLZ

40231

Ort

Düsseldorf

Land

Deutschland

Bundesland

---

Tel

+49 211 542 480 40

Voraussetzungen

Keine besonderen Anforderungen.

Ziele

Zielgruppe

Interessenten mit abgeschlossener Berufsausbildung oder Berufserfahrungen im Medienbereich, Kommunikationsbereich oder kaufmännischen Bereich, die sicher im Umgang mit dem PC sind sowie eine Affinität zum Internet und digitalen Medien haben und eineProgressive Web-Anwendungen (PWA) - Beratung, Coaching, Workshop, Training suchen!

Weitere Daten

Kursnummer

5fdb64294e604e78c023

Plätze