Beispiele für progressive Web-Apps

Diese Demo-PWAs zeigen, wie Sie Features und APIs verwenden, die Ihre Apps bei der Installation auf Geräten schrittweise verbessern können.

Das erste Beispiel, das bei den ersten Schritten verwendet werden soll, ist das Beispiel für den Temperaturkonverter.

Das Beispiel finden Sie in der Infodatei. Einige Beispiele erfordern eine Einrichtung und funktionieren nicht, wenn Sie einfach auf den Link der App unten klicken.

Die meisten dieser PWA-Demos befinden sich im MicrosoftEdge/Demos-Repository .

1DIV

1DIV ist ein CSS-Editor, mit dem Benutzer Zeichnungen erstellen können, indem nur ein HTML-Element und CSS-Code erstellt werden.

Infodatei und Quellcode, App.

1DIV verwendet die folgenden Features:

Feature	Beschreibung	Dokumentation
Überlagerung von Fenstersteuerelementen	1DIV verwendet den normalerweise von der Titelleiste reservierten Platz, um ein Logo, ein Suchfeld und eine Schaltfläche anzuzeigen.	Anzeigen von Inhalten im Titelleistenbereich mithilfe der Überlagerung von Fenstersteuerelementen

Email Client

Eine simulierte E-Mail-Client-PWA, die die Verwendung von PWA-Protokollhandlern veranschaulicht.

Infodatei und Quellcode, App.

Email Client verwendet die folgenden Features:

Feature	Beschreibung	Dokumentation
Protokollverarbeitung	mailto Links werden von der App verarbeitet, um mit dem Verfassen einer neuen E-Mail zu beginnen.	Behandeln von Protokollen in einer PWA

Metatag "Anwendungstitel"

Eine Demo-Web-App zum Präsentieren des application-title Metatags.

Infodatei und Quellcode, App.

Das Metatag "Anwendungstitel" verwendet die folgenden Features:

Feature	Beschreibung	Dokumentation
application-title Metatag	Die PWA nimmt Laufzeitänderungen am <meta name="application-title" content=""> -Element vor.	application-title im <Metanamensattribut> bei MDN.

PWA-Hintergrundsynchronisierung

Mit der Demo zur PWA-Hintergrundsynchronisierung können Sie Chatnachrichten auch offline senden. Wenn Sie beim Senden einer Nachricht offline sind, verwendet die App die Hintergrundsynchronisierung, um die Nachricht später zu senden, wenn Sie wieder online sind.

Infodatei und Quellcode, App.

Die Demo der PWA-Hintergrundsynchronisierungs-API verwendet die folgenden Features:

Feature	Beschreibung	Dokumentation
Hintergrundsynchronisierung	Aktiviert die Verwendung der PWA im Offlinemodus. synchronisiert Daten mit dem Server, wenn die Netzwerkverbindung wiederhergestellt wird.	Synchronisieren und Aktualisieren einer PWA im Hintergrund

PWA-Dateihandler

Die PWA-Dateihandler-App verarbeitet *.txt Dateien wie eine native Anwendung.

Infodatei und Quellcode, App.

Die PWA-Dateihandler-App verwendet die folgenden Features:

Feature	Beschreibung	Dokumentation
Dateiverarbeitung	Das file_handlers Web-App-Manifestmitglied ermöglicht es einer PWA, Dateitypen wie eine native Anwendung zu behandeln.	Behandeln von Dateien in einer PWA

PWA-Installationsprogramm

Eine PWA, die die Webinstallations-API verwendet, um andere PWAs zu installieren. Verwendet auch CSS-Mauerwerk.

Infodatei und Quellcode, App.

Das PWA-Installationsprogramm verwendet die folgenden Features:

Feature	Beschreibung	Dokumentation
Webinstallations-API	Das PWA-Installationsprogramm verwendet die navigator.install() API, um andere PWAs auf dem Gerät zu installieren.	Webinstallations-API
CSS Mauerwerk	Anstelle eines strengen Rasters, das Lücken unterhalb kürzerer Elemente aufweist, werden die Elemente in der folgenden Zeile angehoben, um die Lücken zu füllen.	Mauerwerkslayout

Siehe auch:

• Microsoft Edge: Web Install API Dev Trial Live
• Webinstallations-API : Explainer.

Timer PWA

Verfügt über die Schaltfläche Timer festlegen , und Sie können die Dauer des Timers festlegen.

Infodatei und Quellcode, App.

PWA To Do

Erstellen Sie Aufgabenlisten lokal in Ihrem Browser oder durch Installieren der App. Klicken Sie in der gerenderten Demo auf den Link Info .

Infodatei und Quellcode, App.

PWAmp

PWAmp ist ein Desktop-Musikplayer, der lokale und Remote-Audiodateien wiedergibt.

Infodatei und Quellcode, App.

PWAmp verwendet die folgenden Features:

Feature	Beschreibung	Dokumentation
Überlagerung von Fenstersteuerelementen	Der normalerweise für die Titelleiste reservierte Platz kann von PWAmp verwendet werden, um eine Visualisierung des aktuellen Songs anzuzeigen.	Anzeigen von Inhalten im Titelleistenbereich mithilfe der Überlagerung von Fenstersteuerelementen
Protokollverarbeitung	Links, die mit web+amp: beginnen, können verwendet werden, um Remotelieder freizugeben.	Behandeln von Protokollen in einer PWA
Dateiverarbeitung	Audiodateien können mit PWAmp direkt geöffnet werden. Klicken Sie beispielsweise mit der rechten Maustaste auf eine Datei, die mit .mp3 endet, und klicken Sie auf Öffnen mit.	Behandeln von Dateien in einer PWA
Webfreigabe	Songs können über das Freigabedialogfeld des Betriebssystems für andere Apps freigegeben werden.	Freigeben von Inhalt
Freigabeziel	Andere Apps können Audiodateien über das Freigabedialogfeld des Betriebssystems mit PWAmp freigeben.	Empfangen freigegebener Inhalte
Widget	Ein Miniplayer-Widget kann in Windows 11 Widgets Dashboard installiert werden, um den aktuellen Song anzuzeigen.	Anzeigen eines PWA-Widgets im Windows Widgets Board
Seitenleiste	PWAmp kann an die Randleiste in Microsoft Edge angeheftet werden.	Erstellen einer PWA für die Randleiste in Microsoft Edge

Temperaturkonverter

Eine einfache PWA-Demo-App, die Temperaturen konvertiert. Weitere Informationen finden Sie unter Beispiel für Temperaturkonverter.

Infodatei und Quellcode, App.

wami

wami kann eine Reihe von Bildbearbeitungsschritten anwenden, z. B. Zuschneiden, Ändern der Größe, Drehen oder Hinzufügen von Effekten auf Batches von Bildern.

Infodatei und Quellcode, App.

wami verwendet die folgenden Features:

Feature	Beschreibung	Dokumentation
Überlagerung von Fenstersteuerelementen	Der normalerweise für die Titelleiste reservierte Platz kann von wami verwendet werden.	Anzeigen von Inhalten im Titelleistenbereich mithilfe der Überlagerung von Fenstersteuerelementen
Dateisystemzugriff	wami kann transformierte Bilder wieder auf einem Datenträger speichern.	Dateisystemzugriffs-API

BPM Techno

BPM Techno analysiert Audiodaten über das Gerätemikrofon und zeigt einen Echtzeit-Beats-per-Minute-Zähler (BPM) an.

Infodatei und Quellcode, App.

Diese Demo befindet sich im Repository webmaxru/bpm-counter .

BPM Techno verwendet die folgenden Features:

Feature	Beschreibung	Dokumentation
Tastenkombinationen	BPM Techno definiert eine Verknüpfung, mit der Benutzer eine Audiodatei in die App hochladen können.	Definieren von App-Verknüpfungen (Langes Drücken oder Klicken mit der rechten Maustaste)
Dateiverarbeitung	BPM Techno verarbeitet *.mp3 Dateien nativ.	Behandeln von Dateien in einer PWA
Freigabeziel	Andere Apps können Audiodateien mit BPM Techno über das Dialogfeld zum Teilen des Betriebssystems freigeben.	Empfangen freigegebener Inhalte
Protokollverarbeitung	Die App verarbeitet web+bpm: URIs, die verwendet werden können, um Links zu einem zu analysierenden Song zu senden.	Behandeln von Protokollen in einer PWA

Webboard

Webboard ist eine Zeichnungsanwendung.

Infodatei und Quellcode, App.

Diese Demo befindet sich im Repository pwa-builder/ web-whiteboard .

Webboard verwendet die folgenden Features:

Feature	Beschreibung	Dokumentation
Webfreigabe	Zeichnungen können über das Freigabedialogfeld des Betriebssystems für andere Apps freigegeben werden.	Freigeben von Inhalt

Weitere Informationen

• Klonen Sie das Edge-Demos-Repository auf Ihr Laufwerk unter Beispielcode für DevTools.