Freigeben über

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.

Die 1DIV-App

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.

Demo zur PWA-Hintergrundsynchronisierungs-API

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.

Demo-App

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:

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.

Die PWAmp-App mit Wiedergabeschaltflächen und einer Liste von Songs

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.

Die wami-App

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.

Die BPM Techno-App

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.

Webboard ist eine progressive Web-App zum Zeichnen und intelligentes Whiteboarding

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

  • Last updated on