Demostraciones progresivas de aplicaciones web

Consulte estas PPA de demostración para obtener información sobre cómo usar características y API que pueden mejorar progresivamente las aplicaciones cuando se instalan en dispositivos.

PWAmp

PWAmp es un reproductor de música de escritorio que reproduce archivos de audio locales y remotos.

Aplicación, código fuente y archivo Léame.

PWAmp usa las siguientes características:

Característica	Descripción	Documentación
Superposición de controles de ventana	PwAmp puede usar el espacio reservado normalmente a la barra de título para mostrar una visualización de la canción actual.	Mostrar contenido en el área de la barra de título mediante la superposición de controles de ventana
Control de protocolos	Los vínculos que comienzan por web+amp: se pueden usar para compartir canciones remotas.	Control de protocolos en una PWA
Control de archivos	Los archivos de audio se pueden abrir directamente con PWAmp. Haga clic con el botón derecho en un archivo que termine con .mp3 , por ejemplo, y haga clic en Abrir con.	Controlar archivos en un PWA
Recurso compartido web	Las canciones se pueden compartir con otras aplicaciones a través del cuadro de diálogo de uso compartido del sistema operativo.	Uso compartido de contenido
Compartir destino	Otras aplicaciones pueden compartir archivos de audio con PWAmp, a través del cuadro de diálogo de uso compartido del sistema operativo.	Recepción de contenido compartido
Widget	Se puede instalar un widget de mini reproductor en Windows 11 panel widgets para ver la canción actual.	Mostrar un widget PWA en el panel de widgets de Windows
Barra lateral	PWAmp se puede anclar a la barra lateral de Microsoft Edge.	Compilación de una PWA para la barra lateral en Microsoft Edge

Wami

Wami puede aplicar una secuencia de pasos de manipulación de imágenes, como recortar, cambiar el tamaño, girar o agregar efectos en el lote de imágenes.

Aplicación, código fuente y archivo Léame.

Wami usa las siguientes características:

Característica	Descripción	Documentación
Superposición de controles de ventana	Wami puede usar el espacio reservado normalmente a la barra de título.	Mostrar contenido en el área de la barra de título mediante la superposición de controles de ventana
Acceso al sistema de archivos	Wami puede guardar las imágenes transformadas de nuevo en el disco.	API de acceso al sistema de archivos

Webboard

Webboard es una aplicación de dibujo.

Aplicación, código fuente y archivo Léame.

Webboard usa las siguientes características:

Característica	Descripción	Documentación
Recurso compartido web	Los dibujos se pueden compartir con otras aplicaciones a través del cuadro de diálogo de uso compartido del sistema operativo.	Uso compartido de contenido

Mis pistas

Mis pistas es útil para visualizar pistas GPS (*.gpx archivos) en un mapa.

Aplicación, código fuente y archivo Léame.

My Tracks usa las siguientes características:

Característica	Descripción	Documentación
Superposición de controles de ventana	El espacio reservado normalmente a la barra de título lo usan Mis pistas para mostrar su propia barra de búsqueda.	Mostrar contenido en el área de la barra de título mediante la superposición de controles de ventana
Control de protocolos	My Tracks controla los URI que comienzan con el geo: protocolo para mostrar las ubicaciones en el mapa.	Control de protocolos en una PWA
Control de archivos	My Tracks controla *.gpx los archivos de forma nativa.	Controlar archivos en un PWA
Accesos directos	Mis pistas define accesos directos para ocultar y mostrar fácilmente todas las pistas del mapa.	Definición de accesos directos de la aplicación (menús de pulsación larga o clic con el botón derecho)

Mis películas

Esta sencilla demostración de PWA le permite buscar películas compuestas y almacenarlas localmente.

Aplicación, código fuente.

My Movies usa las siguientes características:

Característica	Descripción	Documentación
Sincronización en segundo plano	Si el usuario está sin conexión al mostrar más información sobre una película, la aplicación usa la sincronización en segundo plano para recuperar la información más adelante cuando el usuario vuelva a estar en línea.	Uso de la API de sincronización en segundo plano para sincronizar datos con el servidor
Notificaciones	Cuando se recupera la información sobre una película, se envía una notificación para que el usuario pueda volver a interactuar con la aplicación.	Mostrar notificaciones en el centro de acciones

BPM Techno

BPM Techno analiza el audio a través del micrófono del dispositivo y muestra un contador de latidos por minuto (BPM) en tiempo real.

Aplicación, código fuente y archivo Léame.

BPM Techno usa las siguientes características:

Característica	Descripción	Documentación
Accesos directos	BPM Techno define un acceso directo que permite a los usuarios cargar un archivo de audio en la aplicación.	Definición de accesos directos de la aplicación (menús de pulsación larga o clic con el botón derecho)
Control de archivos	BPM Techno controla *.mp3 los archivos de forma nativa.	Controlar archivos en un PWA
Compartir destino	Otras aplicaciones pueden compartir archivos de audio con BPM Techno, a través del cuadro de diálogo de uso compartido del sistema operativo.	Recepción de contenido compartido
Control de protocolos	La aplicación controla web+bpm: los URI que se pueden usar para enviar vínculos a una canción que se va a analizar.	Control de protocolos en una PWA

1DIV

1DIV es un editor CSS que permite a los usuarios crear dibujos con un solo elemento HTML y código CSS.

Aplicación, código fuente y archivo Léame.

1DIV usa las siguientes características:

Característica	Descripción	Documentación
Superposición de controles de ventana	1DIV usa el espacio normalmente reservado por la barra de título para mostrar un logotipo, un campo de búsqueda y un botón.	Mostrar contenido en el área de la barra de título mediante la superposición de controles de ventana

Recursos adicionales

• Descargue o clone el repositorio Demos en código de ejemplo para DevTools.