Compartir a través de

Ejemplos de aplicación web progresiva

Estos PPA de demostración muestran cómo usar características y API que pueden mejorar progresivamente las aplicaciones cuando se instalan en dispositivos.

El primer ejemplo que se va a usar al empezar es el ejemplo de convertidor de temperatura.

Consulte el archivo Léame para obtener el ejemplo; algunos ejemplos requieren configuración y no funcionan si simplemente hace clic en el vínculo de la aplicación siguiente.

La mayoría de estas demostraciones de PWA están en el repositorio MicrosoftEdge/Demos .

1DIV

1DIV es un editor CSS que permite a los usuarios crear dibujos mediante la creación de un solo elemento HTML y código CSS.

La aplicación 1DIV

Léame y código fuente, App.

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

Email cliente

PWA de cliente de correo electrónico simulado que muestra cómo usar controladores de protocolo PWA.

Léame y código fuente, App.

Email cliente usa las siguientes características:

Característica Descripción Documentación
Control de protocolos mailto La aplicación controla los vínculos para empezar a redactar un nuevo correo electrónico. Control de protocolos en una PWA

Etiqueta meta de título de aplicación

Una aplicación web de demostración para mostrar la application-title metaetiqueta.

Léame y código fuente, App.

La metaetiqueta de título de aplicación usa las siguientes características:

Característica Descripción Documentación
application-title Metaetiqueta PWA realiza cambios en tiempo de ejecución en el <meta name="application-title" content=""> elemento . application-title en <el atributo de metanombre> en MDN.

Sincronización en segundo plano de PWA

La demostración de sincronización en segundo plano de PWA le permite enviar mensajes de chat incluso cuando están sin conexión. Si está sin conexión al enviar un mensaje, la aplicación usa la sincronización en segundo plano para enviar el mensaje más adelante, cuando vuelva a estar en línea.

Demostración de la API de sincronización en segundo plano de PWA

Léame y código fuente, App.

La demostración de la API de sincronización en segundo plano de PWA usa las siguientes características:

Característica Descripción Documentación
Sincronización en segundo plano Habilita el uso de PWA cuando está sin conexión; sincroniza los datos con el servidor cuando se restaura la conexión de red. Sincronización y actualización de una PWA en segundo plano

Controladores de archivos PWA

La aplicación de controladores de archivos PWA controla *.txt los archivos como lo hace una aplicación nativa.

La aplicación de demostración

Léame y código fuente, App.

La aplicación de controladores de archivos PWA usa las siguientes características:

Característica Descripción Documentación
Control de archivos El miembro del file_handlers manifiesto de aplicación web permite que un PWA controle los tipos de archivo como lo hace una aplicación nativa. Controlar archivos en un PWA

Instalador de PWA

PWA que usa la API de instalación web para instalar otras PWA. También usa CSS Masonry.

Léame y código fuente, App.

El instalador de PWA usa las siguientes características:

Característica Descripción Documentación
API de instalación web El instalador de PWA usa la navigator.install() API para instalar otros PWA en el dispositivo. API de instalación web
Mampostería CSS En lugar de una cuadrícula estricta que tiene espacios por debajo de elementos más cortos, los elementos de la fila siguiente se elevan para rellenar los huecos. Diseño de mampostería

Consulta también:

PWA del temporizador

Tiene un botón Establecer temporizador y puede establecer la duración del temporizador.

Léame y código fuente, App.

Tareas pendientes de PWA

Cree listas de tareas localmente en el explorador o mediante la instalación de la aplicación. Haga clic en el vínculo Acerca de en la demostración representada.

Léame y código fuente, App.

PWAmp

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

La aplicación PWAmp, que muestra botones de reproducción y una lista de canciones

Léame y código fuente, App.

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

Convertidor de temperatura

Una sencilla aplicación de demostración de PWA que convierte las temperaturas. Consulte Ejemplo de convertidor de temperatura.

Léame y código fuente, App.

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 lotes de imágenes.

La aplicación wami

Léame y código fuente, App.

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

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.

La aplicación BPM Techno

Léame y código fuente, App.

Esta demostración se encuentra en el repositorio webmaxru/bpm-counter .

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

Webboard

Webboard es una aplicación de dibujo.

Webboard es una aplicación web progresiva para dibujar y pizarra inteligente

Léame y código fuente, App.

Esta demostración se encuentra en el repositorio pwa-builder/web-whiteboard .

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

Consulte también

  • Last updated on