Progressive Web Apps
Eine Progressive Web App (PWA) ist eine App, die mit Webplattform-Technologien erstellt wurde, aber ein Benutzererlebnis wie eine plattform-spezifische App bietet.
Wie eine Website kann eine PWA auf mehreren Plattformen und Geräten mit einem einzigen Code-Basis laufen. Wie eine plattform-spezifische App kann sie auf dem Gerät installiert werden, offline und im Hintergrund arbeiten und sich mit dem Gerät sowie mit anderen installierten Apps integrieren.
Leitfäden
Die PWA-Leitfäden bieten konzeptionelle Erklärungen zu verschiedenen Aspekten von PWAs. Sie sollen Ihnen helfen, zu verstehen, welche Möglichkeiten PWAs bieten, und genügend Hinweise geben, um zu verstehen, wie man diese erreicht.
- Was ist eine progressive Web-App?
-
Eine Einführung in PWAs, die den Vergleich mit traditionellen Websites und plattform-spezifischen Apps zieht und ihre Hauptmerkmale skizziert.
- PWAs installierbar machen
-
Ein entscheidendes Merkmal einer PWA besteht darin, dass sie auf dem Gerät installiert werden kann und für Benutzer wie eine plattform-spezifische App erscheint, eine dauerhafte Funktion ihres Geräts, die sie direkt wie jede andere App aus dem Betriebssystem heraus starten können. In diesem Leitfaden erkunden wir, was "installierbar" bedeutet, was eine PWA bieten muss, damit sie installierbar ist, und wie Sie das Installationserlebnis anpassen können.
- Installieren und Deinstallieren von Web-Apps
-
Dieser Leitfaden deckt ab, wie Benutzer PWAs auf ihren Geräten installieren und deinstallieren können.
- Offline- und Hintergrundbetrieb
-
In diesem Leitfaden führen wir eine Reihe von Technologien ein, die es einer PWA ermöglichen, auch bei intermittierender Netzwerkkonnektivität ein gutes Benutzererlebnis zu bieten und im Hintergrund Operationen durchzuführen, selbst wenn die Haupt-App nicht läuft.
- Caching
-
Ein Überblick über die APIs, die es einer PWA ermöglichen, Ressourcen lokal zu cachen, und einige gängige Strategien, die von PWAs verwendet werden, um Offline-Funktionalität zu implementieren.
- Bewährte Praktiken für PWAs
-
PWAs sollten sich an verschiedene Browser und Geräte anpassen, zugänglich sein, gute Leistung haben und sich gut in das Betriebssystem integrieren. Dieser Leitfaden bietet eine Liste von bewährten Praktiken, um sicherzustellen, dass Ihre PWA so gut wie möglich ist.
Anleitung
Die PWA-Anleitungen bieten detaillierte Anweisungen zur Implementierung spezifischer PWA-Funktionen.
- Erstellen einer eigenständigen App
-
Beschreibt, wie festgelegt werden kann, dass eine PWA in einem eigenen dedizierten Fenster gestartet wird, wenn sie gestartet wird, anstatt in einem Browser-Tab.
- Definieren Sie Ihre App-Icons
-
Beschreibt, wie Sie ein eigenes Set von Icons definieren, die verwendet werden, wenn die PWA auf einem Gerät installiert ist.
- Passen Sie die Farben Ihrer App an
-
Beschreibt, wie Sie Hintergrund- und Themenfarben für eine PWA setzen.
- Abzeichen anzeigen
-
Beschreibt, wie Sie ein Abzeichen auf dem Icon der PWA anzeigen: zum Beispiel, um den Benutzer wissen zu lassen, dass er neue Nachrichten erhalten hat.
- Gemeinsame App-Aktionen als Kurzbefehle bereitstellen
-
Beschreibt, wie Sie gängige Aktionen für eine PWA bereitstellen können, die aus dem App-Kurzmenü des Betriebssystems gestartet werden können.
- Daten zwischen Apps teilen
-
Beschreibt, wie PWAs Daten miteinander teilen können, indem sie den App-Freigabemechanismus des Betriebssystems verwenden.
- Installation aus Ihrer PWA heraus auslösen
-
Beschreibt, wie Entwickler ihre eigene Benutzeroberfläche bereitstellen können, um Benutzer einzuladen, ihre PWA zu installieren.
- Dateien mit Ihrer PWA verknüpfen
-
Beschreibt, wie Sie eine Zuordnung zwischen Dateitypen und Ihrer PWA erstellen können, sodass, wenn der Benutzer auf die Datei klickt, Ihre PWA gestartet wird, um diese zu verarbeiten.
Tutorials
Erstellen Sie eine PWA von Grund auf mit diesen PWA-Tutorials, die die Schritte von Anfang bis Ende durchgehen und erklären, wie die verschiedenen Funktionen der App unterwegs implementiert werden.
- Erstellen Ihrer ersten PWA
-
Dieses Anfänger-Tutorial führt durch die Erstellung einer PWA zur Verfolgung von Menstruationszyklen. Die Lektionen umfassen einen Rundgang durch das HTML, CSS und JavaScript, das erforderlich ist, um eine voll funktionsfähige Web-App zu erstellen, das Einrichten einer Testumgebung und vollständige Erklärungen, die den Lernenden durch das Upgrade der Web-App in eine PWA führen; einschließlich Entwicklung und Inspektion eines Manifests, Hinzufügen eines Service-Workers und Verwendung des Service-Workers zum Löschen veralteter Caches.
- Tiefer Einblick in PWA
-
Dieses Tutorial auf mittlerem Niveau führt durch die Erstellung einer PWA, die Informationen über Spiele auflistet, die in die A-Frame-Kategorie im js13kGames 2017 Wettbewerb eingereicht wurden. Dieses Tutorial umfasst alle Grundlagen zur Erstellung einer PWA sowie zusätzliche Funktionen, einschließlich Benachrichtigungen, Push und App-Leistung.
Referenz
Unsere PWA-Referenz listet alle auf MDN dokumentierten Funktionen auf, die Sie zum Erstellen einer PWA benötigen.
Web-App-Manifest
- Elemente des Web-App-Manifests
-
Entwickler können Elemente des Web-App-Manifests verwenden, um eine PWA zu beschreiben, ihr Erscheinungsbild anzupassen und sie tiefer in das Betriebssystem zu integrieren.
Service Worker APIs
Kommunikation mit der App
Die folgenden APIs können von einem Service Worker verwendet werden, um mit seiner zugehörigen Client-PWA zu kommunizieren:
Client.postMessage()
-
Ermöglicht einem Service Worker, eine Nachricht an seine Client-PWA zu senden.
- Broadcast Channel API
-
Ermöglicht einem Service Worker und seiner Client-PWA, einen grundlegenden Zweiweg-Kommunikationskanal zu etablieren.
Offline-Betrieb
Die folgenden APIs können von einem Service Worker verwendet werden, um Ihre App offline funktionsfähig zu machen:
Cache
-
Ein persistenter Speichermechanismus für HTTP-Antworten, der zur Speicherung von Assets verwendet wird, die erneut genutzt werden können, wenn die App offline ist.
Clients
-
Eine Schnittstelle, die Zugriff auf die Dokumente bietet, die vom Service Worker gesteuert werden.
FetchEvent
-
Ein Ereignis, das im Service Worker mit jeder von der Client-PWA gesendeten HTTP-Anforderung ausgelöst wird. Das Ereignis kann verwendet werden, um entweder die Anforderung wie gewohnt an den Server zu senden und die Antwort für zukünftige Verwendung zu speichern oder die Anforderung abzufangen und sofort mit einer zuvor zwischengespeicherten Antwort zu antworten.
Hintergrundbetrieb
Die folgenden APIs können von einem Service Worker verwendet werden, um Aufgaben im Hintergrund auszuführen, selbst wenn Ihre App nicht läuft:
- Background Synchronization API
-
Eine Möglichkeit, Aufgaben in einem Service Worker auszuführen, sobald eine stabile Netzwerkverbindung besteht.
- Web Periodic Background Synchronization API
-
Eine Möglichkeit, Aufgaben in einem Service Worker in regelmäßigen Abständen mit Netzwerkverbindung auszuführen.
- Background Fetch API
-
Eine Methode für einen Service Worker, um Downloads zu verwalten, die viel Zeit in Anspruch nehmen können, wie z.B. Video- oder Audiodateien.
Andere Web APIs
- IndexedDB
-
Eine clientseitige Speicher-API für große Mengen strukturierter Daten, einschließlich Dateien.
- Badging API
-
Eine Methode zur Anzeige eines Abzeichens auf dem Anwendungs-Icon, das eine benachrichtigungsarme Benachrichtigung bietet.
- Notifications API
-
Eine Möglichkeit zur Versendung von Benachrichtigungen, die auf Betriebssystemebene angezeigt werden.
-
Ein Mechanismus zum Teilen von Text, Links, Dateien und anderen Inhalten mit anderen Apps, die vom Benutzer auf ihrem Gerät ausgewählt werden.
- Window Controls Overlay API
-
Eine API für PWAs, die auf Desktop-Betriebssystemen installiert sind und das Standardfenstertitel entfernen, was das Überlagern der App über die gesamte Oberfläche des App-Fensters ermöglicht.
Siehe auch
- Progressive Web Apps auf web.dev
- Learn PWA auf web.dev
- Progressive Web Apps auf learn.microsoft.com (2023)