Progressive Web Apps

Eine Progressive Web App (PWA) ist eine App, die mit Webplattform-Technologien gebaut wird, aber dennoch ein Nutzererlebnis bietet, das dem einer plattformspezifischen App ähnelt.

Wie eine Website kann eine PWA auf mehreren Plattformen und Geräten mit nur einer Codebasis laufen. Wie eine plattformspezifische App kann sie auf dem Gerät installiert werden, offline und im Hintergrund arbeiten sowie mit dem Gerät und anderen installierten Apps interagieren.

Leitfäden

Diese Leitfäden geben konzeptionelle Erklärungen zu verschiedenen Aspekten von PWAs. Sie sollen Ihnen helfen, zu verstehen, welche Möglichkeiten PWAs bieten, und geben genügend Hinweise, um zu verstehen, wie man diese erreicht.

Was ist eine Progressive Web App?

Eine Einführung in PWAs, ein Vergleich mit traditionellen Websites und plattformspezifischen Apps sowie eine Übersicht ihrer Hauptmerkmale.

Installierbarkeit von PWAs

Eines der prägenden Merkmale einer PWA ist, dass sie auf dem Gerät installiert werden kann und den Nutzern als plattformspezifische App erscheint, eine dauerhafte Funktion ihres Geräts, die sie direkt aus dem Betriebssystem heraus starten können, wie jede andere App auch. In diesem Leitfaden werden wir erforschen, was "installierbar" bedeutet, was eine PWA bieten muss, um installierbar zu sein, und wie man das Installationserlebnis anpassen kann.

Installieren und Deinstallieren von Web-Apps

Dieser Leitfaden behandelt, wie Nutzer PWAs auf ihren Geräten installieren und deinstallieren können.

Offline- und Hintergrundbetrieb

In diesem Leitfaden stellen wir eine Reihe von Technologien vor, die es einer PWA ermöglichen, ein gutes Nutzererlebnis auch bei intermittierender Netzwerkverbindung zu bieten und im Hintergrund Vorgänge auszuführen, selbst 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 verwendet werden, um Offline-Funktionalität zu implementieren.

Best Practices für PWAs

PWAs sollten sich an verschiedene Browser und Geräte anpassen, zugänglich sein, gute Leistung liefern und sich gut in das Betriebssystem integrieren. Dieser Leitfaden bietet eine Liste von Best Practices, um sicherzustellen, dass Ihre PWA so gut wie möglich ist.

Anleitung

Diese Anleitungen geben konkrete und detaillierte Anweisungen zur Implementierung spezifischer PWA-Funktionen.

Erstellen Sie eine eigenständige App

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

Definieren Sie Ihre App-Icons

Beschreibt, wie Sie Ihr 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 festlegen.

Abzeichen anzeigen

Beschreibt, wie man ein Abzeichen auf dem Icon der PWA anzeigt, beispielsweise um den Nutzer darüber zu informieren, dass er neue Nachrichten erhalten hat.

Häufige App-Aktionen als Shortcuts bereitstellen

Beschreibt, wie häufige Aktionen für eine PWA bereitgestellt werden, die über das App-Shortcut-Menü des Betriebssystems gestartet werden können.

Daten zwischen Apps teilen

Beschreibt, wie PWAs Daten miteinander teilen können, indem sie den App-Sharing-Mechanismus des Betriebssystems verwenden.

Installation von Ihrer PWA auslösen

Beschreibt, wie Entwickler ihre eigene Benutzeroberfläche bereitstellen können, um Nutzer 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 beim Klicken auf die Datei Ihre PWA gestartet wird, um sie zu bearbeiten.

Tutorials

In diesen Tutorials erstellen Sie eine PWA von Grund auf. Tutorials führen durch die Schritte zur Erstellung einer App von Anfang bis Ende und erklären, wie die verschiedenen Funktionen der App implementiert werden.

Erstellen Ihrer ersten PWA

Dieses Anfänger-Tutorial führt durch die Erstellung einer PWA zur Verfolgung von Menstruationszyklen. Lektionen beinhalten einen Durchgang durch das erforderliche HTML, CSS und JavaScript zur Erstellung einer voll funktionsfähigen Web-App, das Einrichten einer Testumgebung und vollständige Erläuterungen, die den Lernenden durch das Upgraden der Web-App zu einer PWA führen; einschließlich Entwicklung und Überprüfung 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 die bei der js13kGames 2017 Wettbewerb in der A-Frame Kategorie eingereichten Spiele anzeigt. Dieses Tutorial umfasst alle Grundlagen zur Erstellung einer PWA mit zusätzlichen Funktionen, einschließlich Benachrichtigungen, Push und App-Performance.

Referenz

Referenzdokumentation zu den Webtechnologien, die Sie zur Erstellung einer PWA verwenden.

Web-App-Manifest

Web-App-Manifest-Mitglieder

Entwickler können die Mitglieder des Web-App-Manifests verwenden, um eine PWA zu beschreiben, ihr Aussehen 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 es einem Service Worker und seiner Client-PWA, einen grundlegenden bidirektionalen Kommunikationskanal einzurichten.

Offline-Betrieb

Die folgenden APIs können von einem Service Worker verwendet werden, um Ihre App offlinefähig zu machen:

Cache

Ein persistenter Speichermodus für HTTP-Antworten, der zum Speichern von Assets verwendet wird, die wiederverwendet werden können, wenn die App offline ist.

Clients

Ein Interface, das den Zugriff auf die Dokumente ermöglicht, die vom Service Worker gesteuert werden.

FetchEvent

Ein Event, das im Service Worker bei jeder HTTP-Anfrage der Client-PWA ausgelöst wird. Das Event kann verwendet werden, um die Anfrage entweder normal an den Server zu senden und die Antwort für die zukünftige Verwendung zu speichern oder die Anfrage 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 zu einem späteren Zeitpunkt im Service Worker auszuführen, sobald eine stabile Netzwerkverbindung besteht.

Web Periodic Background Synchronization API

Eine Möglichkeit, Aufgaben im Service Worker in regelmäßigen Abständen mit Netzwerkverbindung auszuführen.

Background Fetch API

Ein Verfahren für einen Service Worker, um Downloads zu verwalten, die eine erhebliche Zeit in Anspruch nehmen können, wie Video- oder Audiodateien.

Andere Web-APIs

IndexedDB

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

Badging API

Eine Methode, um ein Abzeichen auf dem App-Icon anzuzeigen, wodurch eine geringe Störung verursacht wird.

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 mit anderen Apps, die der Nutzer auf seinem Gerät ausgewählt hat.

Window Controls Overlay API

Eine API für auf Desktop-Betriebssystemen installierte PWAs, die das Verbergen der standardmäßigen Fenstertitelleiste ermöglicht und die vollständige Anzeigefläche des App-Fensters nutzt.

Siehe auch