Progressive Web Apps

Leitfäden

Die PWA-Leitfäden bieten konzeptionelle Erklärungen zu verschiedenen Aspekten von PWAs. Sie sollen Ihnen helfen zu verstehen, welche Möglichkeiten mit PWAs bestehen, und geben genügend Hinweise, wie Sie diese erreichen können.

Was ist eine Progressive Web App?

Eine Einführung in PWAs, die den Vergleich mit traditionellen Websites und plattform-spezifischen Apps zieht und ihre wichtigsten Merkmale darstellt.

PWAs installierbar machen

Eines der charakteristischen Merkmale einer PWA ist, dass sie auf dem Gerät installiert werden kann und den Nutzern als plattform-spezifische App erscheint, die sie direkt vom Betriebssystem aus wie jede andere App starten können. In diesem Leitfaden untersuchen wir, was "installierbar" bedeutet, was eine PWA bereitstellen muss, um installierbar zu sein, und wie Sie das Installationserlebnis anpassen können.

Web-Apps installieren und deinstallieren

Dieser Leitfaden behandelt, 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, ein gutes Benutzererlebnis zu bieten, selbst wenn das Gerät nur eine intermittierende Netzwerkverbindung hat, und Operationen im Hintergrund durchzuführen, auch wenn die Hauptapp nicht läuft.

Caching

Ein Überblick über die APIs, die es einer PWA ermöglichen, Ressourcen lokal zwischenzuspeichern, und einige gängige Strategien, die von PWAs zur Implementierung der Offline-Funktionalität verwendet werden.

Beste Praktiken für PWAs

PWAs sollten sich an verschiedene Browser und Geräte anpassen, zugänglich, leistungsfähig sein und sich gut in das Betriebssystem integrieren. Dieser Leitfaden bietet eine Liste der besten 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 Sie eine eigenständige App

Beschreibt, wie festgelegt werden kann, dass eine PWA in einem eigenen dedizierten Fenster gestartet werden soll, anstatt in einem Browser-Tab.

Definieren Sie Ihre App-Icons

Beschreibt, wie Sie Ihre eigene Reihe von Icons definieren, die verwendet werden, wenn die PWA auf einem Gerät installiert wird.

Passen Sie die Farben Ihrer App an

Beschreibt, wie Hintergrund- und Thema-Farben für eine PWA festgelegt werden.

Abzeichen anzeigen

Beschreibt, wie ein Abzeichen auf dem Icon der PWA angezeigt wird, um beispielsweise dem Benutzer mitzuteilen, dass er neue Nachrichten erhalten hat.

Häufige App-Aktionen als Shortcuts verfügbar machen

Beschreibt, wie häufige Aktionen für eine PWA bereitgestellt werden können, die vom Shortcut-Menü der Betriebssystem-App aus gestartet werden können.

Daten zwischen Apps teilen

Beschreibt, wie PWAs Daten untereinander teilen können, indem sie den App-Freigabemechanismus des Betriebssystems verwenden.

Installation von Ihrer PWA auslösen

Beschreibt, wie Entwickler ihre eigene Benutzeroberfläche bereitstellen können, um Benutzer zur Installation ihrer PWA einzuladen.

Dateien mit Ihrer PWA verknüpfen

Beschreibt, wie eine Verknüpfung zwischen Dateitypen und Ihrer PWA erstellt werden kann, sodass Ihre PWA beim Klicken auf die Datei zur Bearbeitung gestartet wird.

Tutorials

Erstellen Sie eine PWA von Grund auf mit diesen PWA-Tutorials, die die Schritte von Anfang bis Ende erklären und erläutern, wie die verschiedenen Funktionen der App implementiert werden.

Ihre erste PWA erstellen

Dieses Einsteiger-Tutorial führt durch die Erstellung einer PWA zur Verfolgung von Menstruationszyklen. Lektionen umfassen eine Schritt-für-Schritt-Anleitung zu den erforderlichen HTML-, CSS- und JavaScript-Komponenten, um eine voll funktionsfähige Web-App zu erstellen, das Einrichten einer Testumgebung und umfassende Erklärungen zur Aufrüstung der Web-App in eine PWA; einschließlich der Entwicklung und Überprüfung eines Manifests, dem Hinzufügen eines Service-Workers und der Verwendung des Service-Workers zur Löschung veralteter Caches.

Eintauchen in PWA

Dieses Tutorial mittlerer Stufe führt durch die Erstellung einer PWA, die Informationen über Spiele auflistet, die der Kategorie A-Frame im Rahmen des js13kGames 2017 Wettbewerbs eingereicht wurden. Dieses Tutorial enthält alle Grundlagen zur Erstellung einer PWA, mit zusätzlichen Funktionen wie Benachrichtigungen, Push-Dienste und App-Performance.

Referenz

Unsere PWA-Referenz listet alle auf MDN dokumentierten Funktionen auf, die Sie benötigen, um eine PWA zu erstellen.

Web-App-Manifest

Mitglieder des Web-App-Manifests

Entwickler können Mitglieder 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 genutzt werden, um mit der 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 Zwei-Wege-Kommunikationskanal zu etablieren.

Offline-Betrieb

Die folgenden APIs können von einem Service-Worker genutzt werden, um Ihre App offline betreiben zu können:

Cache

Ein persistentes Speichersystem für HTTP-Antworten, das zum Speichern von Ressourcen verwendet wird, die wiederverwendet werden können, wenn die App offline ist.

Clients

Eine Schnittstelle, die Zugriff auf die vom Service-Worker kontrollierten Dokumente bietet.

FetchEvent

Ein Ereignis, das im Service-Worker mit jeder von der Client-PWA durchgeführten HTTP-Anfrage ausgelöst wird. Das Ereignis kann verwendet werden, um entweder die Anfrage wie gewohnt an den Server zu senden und die Antwort für die zukünftige Verwendung zu speichern, oder um die Anfrage abzufangen und sofort mit einer zuvor zwischengespeicherten Antwort zu antworten.

Hintergrundbetrieb

Die folgenden APIs können von einem Service-Worker genutzt werden, um Aufgaben im Hintergrund durchzuführen, selbst wenn Ihre App nicht läuft:

Background Synchronization API

Eine Methode, um Aufgaben auf einen späteren Zeitpunkt zu verschieben, an dem eine stabile Netzwerkverbindung in einem Service-Worker vorhanden ist.

Web Periodic Background Synchronization API

Eine Methode zur Registrierung von Aufgaben, die in einem Service-Worker in regelmäßigen Abständen mit Netzwerkverbindung ausgeführt werden sollen.

Background Fetch API

Eine Methode für einen Service-Worker, um Downloads zu verwalten, die eine signifikante Zeit in Anspruch nehmen können, wie z.B. Video- oder Audiodateien.

Andere Web-APIs

IndexedDB

Eine clientseitige Speicher-API für erhebliche Mengen strukturierter Daten, einschließlich Dateien.

Badging API

Eine Methode, um ein Abzeichen auf dem Anwendungs-Icon einzurichten und eine ablenkungsarme Benachrichtigung bereitzustellen.

Notifications API

Eine Möglichkeit, Benachrichtigungen zu senden, die auf Betriebssystemebene angezeigt werden.

Web Share API

Ein Mechanismus zum Teilen von Text, Links, Dateien und anderen Inhalten an andere Apps, die vom Benutzer auf seinem Gerät ausgewählt werden.

Window Controls Overlay API

Eine API für auf Desktop-Betriebssystemen installierte PWAs, die das Verstecken der Standardfenstertitelleiste ermöglicht, um die App über die gesamte Fläche des App-Fensters darzustellen.

Siehe auch

• Progressive Web Apps auf web.dev
• Learn PWA auf web.dev
• Progressive Web Apps auf learn.microsoft.com (2023)