Progressive Web-App-Demos
Sehen Sie sich diese Demo-PWAs an, um zu erfahren, wie Sie Features und APIs verwenden, die Ihre Apps bei der Installation auf Geräten schrittweise verbessern können.
PWAmp
PWAmp ist ein Desktop-Musikplayer, der lokale und Remote-Audiodateien wiedergibt.
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 Inhalten |
| 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 |
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.
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 |
Webboard
Webboard ist eine Zeichnungsanwendung.
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 Inhalten |
Meine Spuren
My Tracks ist nützlich, um GPS-Spuren (*.gpx Dateien) auf einer Karte zu visualisieren.
My Tracks verwendet die folgenden Features:
| Feature | Beschreibung | Dokumentation |
|---|---|---|
| Überlagerung von Fenstersteuerelementen | Der normalerweise für die Titelleiste reservierte Platz wird von "Meine Spuren" verwendet, um eine eigene Suchleiste anzuzeigen. | Anzeigen von Inhalten im Titelleistenbereich mithilfe der Überlagerung von Fenstersteuerelementen |
| Protokollverarbeitung | My Tracks verarbeitet URIs, die mit dem geo: Protokoll beginnen, um Standorte auf der Karte anzuzeigen. |
Behandeln von Protokollen in einer PWA |
| Dateiverarbeitung | My Tracks verarbeitet *.gpx Dateien nativ. |
Behandeln von Dateien in einer PWA |
| Verknüpfungen | My Tracks definiert Tastenkombinationen, um alle Spuren auf der Karte einfach auszublenden und anzuzeigen. | Definieren von App-Verknüpfungen (Langes Drücken oder Klicken mit der rechten Maustaste) |
Meine Filme
Mit dieser einfachen PWA-Demo können Sie nach gemachten Filmen suchen und sie lokal speichern.
Meine Filme verwendet die folgenden Features:
| Feature | Beschreibung | Dokumentation |
|---|---|---|
| Hintergrundsynchronisierung | Wenn der Benutzer offline ist, wenn er weitere Informationen zu einem Film anzeigt, verwendet die App die Hintergrundsynchronisierung, um die Informationen später abzurufen, wenn der Benutzer wieder online ist. | Verwenden der Hintergrundsynchronisierungs-API zum Synchronisieren von Daten mit dem Server |
| Benachrichtigungen | Wenn die Informationen zu einem Film abgerufen werden, wird eine Benachrichtigung gesendet, damit der Benutzer erneut mit der App interagieren kann. | Anzeigen von Benachrichtigungen im Info-Center |
BPM Techno
BPM Techno analysiert Audiodaten über das Gerätemikrofon und zeigt einen Echtzeit-Beats-per-Minute-Zähler (BPM) an.
BPM Techno verwendet die folgenden Features:
| Feature | Beschreibung | Dokumentation |
|---|---|---|
| Verknüpfungen | 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 |
1DIV
1DIV ist ein CSS-Editor, mit dem Benutzer Zeichnungen mit nur einem HTML-Element und CSS-Code erstellen können.
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 |
Siehe auch
- Laden Sie das Demos-Repository unter Beispielcode für DevTools herunter, oder klonen Sie es.