Démonstrations progressives de l’application web

Reportez-vous à ces PWA de démonstration pour découvrir comment utiliser des fonctionnalités et des API qui peuvent améliorer progressivement vos applications lorsqu’elles sont installées sur des appareils.

PWAmp

PWAmp est un lecteur de musique de bureau qui lit des fichiers audio locaux et distants.

Application, code source et fichier Lisez-moi.

PWAmp utilise les fonctionnalités suivantes :

Fonctionnalité	Description	Documentation
Superposition des contrôles de fenêtre	L’espace normalement réservé à la barre de titre peut être utilisé par PWAmp pour afficher une visualisation de la chanson actuelle.	Afficher le contenu dans la zone de la barre de titre à l’aide de la superposition des contrôles de fenêtre
Gestion des protocoles	Les liens qui commencent par web+amp: peuvent être utilisés pour partager des chansons distantes.	Gérer les protocoles dans une PWA
Gestion des fichiers	Les fichiers audio peuvent être ouverts directement avec PWAmp. Cliquez avec le bouton droit sur un fichier se terminant par .mp3 , par exemple, puis cliquez sur Ouvrir avec.	Gérer des fichiers dans une PWA
Partage web	Les chansons peuvent être partagées avec d’autres applications via la boîte de dialogue de partage du système d’exploitation.	Partager du contenu
Partager la cible	D’autres applications peuvent partager des fichiers audio avec PWAmp via la boîte de dialogue de partage du système d’exploitation.	Réception de contenu partagé
Widget	Un widget mini-lecteur peut être installé dans Windows 11 tableau de bord widgets pour voir la chanson actuelle.	Afficher un widget PWA dans le tableau des widgets Windows
Barre latérale	PWAmp peut être épinglé à la barre latérale dans Microsoft Edge.	Créer une PWA pour la barre latérale dans Microsoft Edge

Wami

Wami peut appliquer une séquence d’étapes de manipulation d’images, telles que le rognage, le redimensionnement, la rotation ou l’ajout d’effets sur un lot d’images.

Application, code source et fichier Lisez-moi.

Wami utilise les fonctionnalités suivantes :

Fonctionnalité	Description	Documentation
Superposition des contrôles de fenêtre	L’espace normalement réservé à la barre de titre peut être utilisé par wami.	Afficher le contenu dans la zone de la barre de titre à l’aide de la superposition des contrôles de fenêtre
Accès au système de fichiers	Wami peut enregistrer des images transformées sur le disque.	API d’accès au système de fichiers

Webboard

Webboard est une application de dessin.

Application, code source et fichier Lisez-moi.

Webboard utilise les fonctionnalités suivantes :

Fonctionnalité	Description	Documentation
Partage web	Les dessins peuvent être partagés avec d’autres applications via la boîte de dialogue de partage du système d’exploitation.	Partager du contenu

Mes pistes

My Tracks est utile pour visualiser les traces GPS (*.gpx fichiers) sur une carte.

Application, code source et fichier Lisez-moi.

My Tracks utilise les fonctionnalités suivantes :

Fonctionnalité	Description	Documentation
Superposition des contrôles de fenêtre	L’espace normalement réservé à la barre de titre est utilisé par Mes pistes pour afficher sa propre barre de recherche.	Afficher le contenu dans la zone de la barre de titre à l’aide de la superposition des contrôles de fenêtre
Gestion des protocoles	My Tracks gère les URI qui commencent par le geo: protocole pour afficher les emplacements sur la carte.	Gérer les protocoles dans une PWA
Gestion des fichiers	My Tracks gère les *.gpx fichiers en mode natif.	Gérer des fichiers dans une PWA
Raccourcis	Mes pistes définit des raccourcis pour masquer et afficher facilement toutes les pistes de la carte.	Définir des raccourcis d’application (appuyez longuement ou cliquez avec le bouton droit)

Mes films

Cette démonstration PWA simple vous permet de rechercher des films fabriqués et de les stocker localement.

Application, code source.

Mes films utilise les fonctionnalités suivantes :

Fonctionnalité	Description	Documentation
Synchronisation en arrière-plan	Si l’utilisateur est hors connexion lors de l’affichage d’informations supplémentaires sur un film, l’application utilise la synchronisation d’arrière-plan pour récupérer les informations ultérieurement lorsque l’utilisateur est de nouveau en ligne.	Utiliser l’API de synchronisation en arrière-plan pour synchroniser les données avec le serveur
Notifications	Lorsque les informations relatives à un film sont récupérées, une notification est envoyée afin que l’utilisateur puisse se réengager avec l’application.	Afficher les notifications dans le centre de notifications

BPM Techno

BPM Techno analyse l’audio via le microphone de l’appareil et affiche un compteur de battements par minute en temps réel (BPM).

Application, code source et fichier Lisez-moi.

BPM Techno utilise les fonctionnalités suivantes :

Fonctionnalité	Description	Documentation
Raccourcis	BPM Techno définit un raccourci qui permet aux utilisateurs de charger un fichier audio dans l’application.	Définir des raccourcis d’application (appuyez longuement ou cliquez avec le bouton droit)
Gestion des fichiers	BPM Techno gère les *.mp3 fichiers en mode natif.	Gérer des fichiers dans une PWA
Partager la cible	D’autres applications peuvent partager des fichiers audio avec BPM Techno via la boîte de dialogue de partage du système d’exploitation.	Réception de contenu partagé
Gestion des protocoles	L’application gère les web+bpm: URI qui peuvent être utilisés pour envoyer des liens vers une chanson à analyser.	Gérer les protocoles dans une PWA

1DIV

1DIV est un éditeur CSS qui permet aux utilisateurs de créer des dessins avec un seul élément HTML et du code CSS.

Application, code source et fichier Lisez-moi.

1DIV utilise les fonctionnalités suivantes :

Fonctionnalité	Description	Documentation
Superposition des contrôles de fenêtre	1DIV utilise l’espace normalement réservé par la barre de titre pour afficher un logo, un champ de recherche et un bouton.	Afficher le contenu dans la zone de la barre de titre à l’aide de la superposition des contrôles de fenêtre

Voir aussi

• Téléchargez ou clonez le dépôt Demos dans Exemple de code pour DevTools.