Ein Kurs, in dem jeder Aspekt der modernen progressiven Web-App-Entwicklung behandelt wird.
In diesem Kurs werden die Grundlagen der Entwicklung von progressiven Web-Apps leicht verständlich behandelt. In den folgenden Modulen erfährst du, was eine progressive Web-App ist, wie du eine solche App erstellst oder vorhandene Webinhalte aktualisierst und wie du alle Teile für eine installierbare Offline-App hinzufügst. Über das Menü kannst du zwischen den Modulen wechseln. Auf Desktop-Computern befindet sich das Menü links, auf Mobilgeräten hinter dem Dreistrich-Menü.
Sie lernen die Grundlagen von PWAs wie das Web App Manifest, Service Worker, das Entwerfen für eine App und die Verwendung anderer Tools zum Testen und Debuggen Ihrer PWA kennen. Im Anschluss an diese Grundlagen erfahren Sie mehr über die Einbindung in die Plattform und das Betriebssystem, wie Sie die Installation und Nutzung Ihrer PWA verbessern und wie Sie eine Offlinenutzung anbieten können.
Jedes Modul umfasst interaktive Demos und Selbsttests, mit denen Sie Ihr Wissen testen können. Sie können Demos auf Ihrem Smartphone, Tablet oder Laptop testen und testen, während Sie mit Code spielen, um die Grundlagen einer progressiven Web-App zu verstehen.
Dieser Kurs richtet sich sowohl an Einsteiger als auch fortgeschrittene Webentwickler. Sie können die Reihe von Anfang bis Ende durchgehen, um einen allgemeinen Überblick über PWAs zu erhalten, oder sie als Referenz für bestimmte Themen verwenden. Für alle, die neu in der Webentwicklung sind, benötigen Sie Grundkenntnisse in HTML, CSS und JavaScript. Sehen Sie sich CSS lernen und die Kurse HTML und JavaScript auf MDN an.
Die folgenden Themen werden behandelt:
Einstieg
Wenn Sie eine progressive Web-App erstellen möchten, fragen Sie sich vielleicht, wo Sie anfangen sollen, ob es möglich ist, eine Website auf eine PWA zu aktualisieren, ohne bei null anzufangen, oder wie Sie von einer plattformspezifischen App zu einer PWA wechseln. In diesem Artikel finden Sie Antworten auf diese Fragen.
Grundlagen
Progressive Web-Apps sind im Grunde moderne Websites. Daher ist es wichtig, dass Ihre Website eine solide Grundlage in puncto responsives Design, mobiles Design und alles hat, was an erster Stelle steht: integriertes Design und Webleistung.
App-Design
Einer der Hauptunterschiede zwischen progressiven Web-Apps und klassischen Websites und Web-Apps ist die Installierbarkeit. So entsteht ein eigenständiges Produkt, das stärker in die Plattform und das Betriebssystem integriert ist. Die Installation schafft neue Flexibilität und neue Verantwortung, da wir keine Browser-Benutzeroberfläche um unsere Inhalte haben werden.
Assets und Daten
Eine progressive Web-App ist eine Website. Alle Assets sind dieselben wie im Web, nur mit neuen Tools, die dafür sorgen, dass diese Assets schnell geladen werden, wenn sie online und offline verfügbar sind.
Service Worker
Service Worker sind ein wesentlicher Bestandteil einer PWA. Sie ermöglichen schnelles Laden (unabhängig vom Netzwerk), Offlinezugriff, Push-Benachrichtigungen und andere Funktionen.
Caching
Mit der Cache Storage API können Sie Assets auf dem Gerät herunterladen, speichern, löschen oder aktualisieren. Diese Assets können dann auf dem Gerät ausgeliefert werden, ohne dass eine Netzwerkanfrage erforderlich ist.
Bereit
Mit dem Abrufereignis des Service Workers können Sie Netzwerkanfragen abfangen und mit verschiedenen Verfahren eine Antwort bereitstellen.
Workbox
Workbox besteht aus einer Reihe von Modulen, die gängige Service-Worker-Interaktionen wie Routing und Caching vereinfachen. Jedes Modul behandelt einen bestimmten Aspekt der Service Worker-Entwicklung. Das Ziel von Workbox ist es, die Arbeit mit Service Workern so einfach wie möglich zu machen und gleichzeitig die Flexibilität zu bieten, komplexe Anwendungsanforderungen bei Bedarf zu erfüllen.
Offlinedaten
Damit Sie auch offline problemlos arbeiten können, müssen Sie Speicherplatzverwaltung implementieren. Tools wie IndexedDB, Cache, Storage Manager, Persistent Storage und Inhaltsindexierung können dabei helfen.
Installation
Installierte Apps sind leicht zugänglich und können von einer tieferen Einbindung in das Betriebssystem profitieren. Hier erfahren Sie, wie Sie Ihre PWA installierbar machen und von diesen Vorteilen profitieren.
Web-App-Manifest
Das Web-App-Manifest ist eine JSON-Datei, in der definiert ist, wie die PWA als installierte Anwendung behandelt werden soll, einschließlich des Erscheinungsbilds und der grundlegenden Funktionsweise des Betriebssystems.
Installationsaufforderung
Bei Websites, die die Kriterien für die Installation von PWAs erfüllen, löst der Browser ein Ereignis aus, um den Nutzer zur Installation aufzufordern. Die gute Nachricht ist, dass Sie mit diesem Ereignis Ihren Prompt anpassen und Nutzer dazu einladen können, Ihre App zu installieren.
Aktualisieren
Wahrscheinlich muss Ihre PWA aktualisiert werden. In diesem Kapitel finden Sie die Tools, mit denen Sie verschiedene Teile Ihrer PWA aktualisieren können – von Assets bis hin zu Metadaten.
Verbesserungen
Ihre Nutzer erwarten eine gute Nutzererfahrung. In diesem Kapitel erfahren Sie, wie Sie Ihre PWA mit Ladebildschirmen und App-Verknüpfungen optimieren und wie Sitzungen funktionieren.
Erkennung
Die Feststellung, wie Nutzer mit Ihrer App interagieren, ist für die Anpassung und Verbesserung der User Experience hilfreich. Sie können beispielsweise prüfen, ob Ihre App bereits auf dem Gerät des Nutzers installiert ist, und Funktionen wie das Übertragen der Navigation vom Browser zur eigenständigen App implementieren.
Integration des Betriebssystems
Ihre PWA funktioniert jetzt außerhalb des Browsers. In diesem Kapitel wird beschrieben, wie Sie die Integration in das Betriebssystem weiter optimieren können, nachdem Nutzer Ihre App installiert haben.
Fensterverwaltung
Eine PWA außerhalb des Browsers verwaltet ihr eigenes Fenster. In diesem Kapitel erfahren Sie mehr über die APIs und Funktionen zum Verwalten eines Fensters innerhalb des Betriebssystems.
Experimentelle Funktionen
Einige PWA-Funktionen befinden sich noch im Aufbau und Sie können an ihrer Entwicklung beteiligt werden. In diesem Kapitel erfahren Sie mehr über das Fugu-Projekt, die Registrierung für einen Ursprungstest und die Verwendung experimenteller APIs
Tools und Fehlerbehebung
Wir stellen die Tools vor, mit denen Sie Ihre progressiven Web-Apps entwickeln, debuggen und testen können.
Architektur
Bei der Entwicklung einer PWA müssen Sie entscheiden, ob Sie eine einseitige oder eine mehrseitige App erstellen und ob Sie sie im Stammverzeichnis Ihrer Domain oder in einem Ordner hosten möchten.
Komplexitätsmanagement
Eine einfache Webanwendung zu halten, kann überraschend kompliziert sein. In diesem Modul erfahren Sie, wie Web-APIs mit Threading funktionieren und wie Sie diese für gängige PWA-Muster wie die Statusverwaltung verwenden können.
Leistungsspektrum
PWAs sind nicht nur an den Bildschirm gebunden. In diesem Kapitel geht es um die aktuellen Möglichkeiten einer PWA in Bezug auf Hardware, Sensoren und Plattformnutzung.
Schlusswort
Weitere Informationen und Ressourcen
Bist du bereit, PWA zu lernen?