Partager via

Exemples d’applications web progressives

Ces PWA de démonstration montrent comment utiliser des fonctionnalités et des API qui peuvent améliorer progressivement vos applications lorsqu’elles sont installées sur des appareils.

Le premier exemple à utiliser lors de la prise en main est l’exemple convertisseur de température.

Consultez le fichier Lisez-moi pour l’exemple ; certains exemples nécessitent une configuration et ne fonctionnent pas si vous cliquez simplement sur le lien de l’application ci-dessous.

La plupart de ces démonstrations PWA se trouvent dans le dépôt MicrosoftEdge/Demos .

1DIV

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

L’application 1DIV

Fichier lisez-moi et code source, Application.

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

client Email

Un PWA de client de messagerie simulé qui montre comment utiliser des gestionnaires de protocole PWA.

Fichier lisez-moi et code source, Application.

Email client utilise les fonctionnalités suivantes :

Fonctionnalité Description Documentation
Gestion des protocoles mailto les liens sont gérés par l’application pour commencer à composer un nouvel e-mail. Gérer les protocoles dans une PWA

Balise meta du titre de l’application

Une application web de démonstration pour présenter la application-title balise meta.

Fichier lisez-moi et code source, Application.

La méta-balise titre de l’application utilise les fonctionnalités suivantes :

Fonctionnalité Description Documentation
application-title balise meta La PWA apporte des modifications au runtime à l’élément <meta name="application-title" content=""> . application-title dans l’attribut< meta> name sur MDN.

Synchronisation d’arrière-plan PWA

La démonstration PWA Background Sync vous permet d’envoyer des messages de conversation même hors connexion. Si vous êtes hors connexion lors de l’envoi d’un message, l’application utilise la synchronisation en arrière-plan pour envoyer le message ultérieurement, lorsque vous êtes de retour en ligne.

Démonstration de l’API PWA Background Sync

Fichier lisez-moi et code source, Application.

La démonstration de l’API PWA Background Sync utilise les fonctionnalités suivantes :

Fonctionnalité Description Documentation
Synchronisation en arrière-plan Active l’utilisation de la PWA en mode hors connexion ; synchronise les données avec le serveur lorsque la connexion réseau est restaurée. Synchroniser et mettre à jour une PWA en arrière-plan

Gestionnaires de fichiers PWA

L’application gestionnaires de fichiers PWA gère les *.txt fichiers comme le fait une application native.

L’application de démonstration « Gestionnaires de fichiers PWA »

Fichier lisez-moi et code source, Application.

L’application gestionnaires de fichiers PWA utilise les fonctionnalités suivantes :

Fonctionnalité Description Documentation
Gestion des fichiers Le file_handlers membre de manifeste d’application web permet à une PWA de gérer les types de fichiers comme le fait une application native. Gérer des fichiers dans une PWA

Programme d’installation PWA

PWA qui utilise l’API d’installation web pour installer d’autres PWA. Utilise également css masonry.

Fichier lisez-moi et code source, Application.

Le programme d’installation PWA utilise les fonctionnalités suivantes :

Fonctionnalité Description Documentation
API d’installation web Le programme d’installation PWA utilise l’API navigator.install() pour installer d’autres PWA sur l’appareil. API d’installation web
Maçonnerie CSS Au lieu d’une grille stricte qui comporte des écarts sous des éléments plus courts, les éléments de la ligne suivante sont levés pour combler les vides. Disposition de la maçonnerie

Voir aussi :

PWA du minuteur

Dispose d’un bouton Définir le minuteur et vous pouvez définir la durée du minuteur.

Fichier lisez-moi et code source, Application.

PWA To Do

Créez des listes de tâches localement dans votre navigateur ou en installant l’application. Cliquez sur le lien À propos de dans la démonstration rendue.

Fichier lisez-moi et code source, Application.

PWAmp

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

L’application PWAmp, affichant des boutons de lecture et une liste de chansons

Fichier lisez-moi et code source, Application.

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. Partage de 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

Convertisseur de température

Application de démonstration PWA simple qui convertit les températures. Consultez Exemple de convertisseur de température.

Fichier lisez-moi et code source, Application.

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.

L’application wami

Fichier lisez-moi et code source, Application.

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

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).

L’application BPM Techno

Fichier lisez-moi et code source, Application.

Cette démonstration se trouve dans le dépôt webmaxru / bpm-counter .

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

Webboard

Webboard est une application de dessin.

Webboard est une application web progressive pour le dessin et le tableau blanc intelligent

Fichier lisez-moi et code source, Application.

Cette démonstration se trouve dans le référentiel pwa-builder/ web-whiteboard .

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. Partage de contenu

Voir également

  • Last updated on