Progressive Web Apps

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.

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.

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.

Unsere PWA-Referenz listet alle auf MDN dokumentierten Funktionen auf, die Sie zum Erstellen einer PWA benötigen.

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.

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.

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.

Web Share API

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.

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