Demonstrações progressivas da Aplicação Web

  • Artigo

Veja estas PWAs de demonstração para saber como utilizar funcionalidades e APIs que podem melhorar progressivamente as suas aplicações quando instaladas em dispositivos.

PWAmp

O PWAmp é um leitor de música de ambiente de trabalho que reproduz ficheiros de áudio locais e remotos.

Captura de ecrã da aplicação PWAmp a mostrar os botões de reprodução e uma lista de músicas

Aplicação, código fonte e ficheiro Readme.

PWAmp utiliza as seguintes funcionalidades:

Recurso Descrição Documentação
Sobreposição de Controlos de Janela O espaço normalmente reservado à barra de título pode ser utilizado pela PWAmp para apresentar uma visualização da música atual. Apresentar conteúdo na área da barra de título com a Sobreposição de Controlos de Janela
Processamento de Protocolos As ligações que começam com web+amp: podem ser utilizadas para partilhar músicas remotas. Processar protocolos em Aplicativos Web Progressivas
Processamento de Ficheiros Os ficheiros de áudio podem ser abertos diretamente com PWAmp. Clique com o botão direito do rato num ficheiro que termine com .mp3 , por exemplo, e clique em Abrir com. Processar ficheiros na Aplicativos Web Progressiva
Partilha Web As músicas podem ser partilhadas com outras aplicações através da caixa de diálogo de partilha do sistema operativo. Compartilhando conteúdo
Partilhar Destino Outras aplicações podem partilhar ficheiros de áudio com PWAmp, através da caixa de diálogo de partilha do sistema operativo. Receber conteúdo partilhado
Widget Um Mini-player Widget pode ser instalado no Windows 11 Widgets dashboard para ver a música atual. Criar Widgets baseados em PWA
Barra lateral O PWAmp pode ser afixado à barra lateral no Microsoft Edge. Criar PWAs para a barra lateral no Microsoft Edge

Wami

A Wami pode aplicar uma sequência de passos de manipulação de imagens, como recortar, redimensionar, rodar ou adicionar efeitos em lotes de imagens.

Captura de ecrã da aplicação wami

Aplicação, código fonte e ficheiro Readme.

A Wami utiliza as seguintes funcionalidades:

Recurso Descrição Documentação
Sobreposição de Controlos de Janela O espaço normalmente reservado para a barra de título pode ser utilizado pela wami. Apresentar conteúdo na área da barra de título com a Sobreposição de Controlos de Janela
Acesso ao Sistema de Ficheiros O Wami pode guardar as imagens transformadas novamente no disco. API de Acesso ao Sistema de Ficheiros

Webboard

O Webboard é uma aplicação de desenho.

O Webboard é uma Aplicação Web Progressiva para desenho e quadro inteligente

Aplicação, código fonte e ficheiro Readme.

O Webboard utiliza as seguintes funcionalidades:

Recurso Descrição Documentação
Partilha Web Os desenhos podem ser partilhados com outras aplicações através da caixa de diálogo de partilha do sistema operativo. Compartilhando conteúdo

As Minhas Faixas

As Minhas Faixas são úteis para visualizar faixas gps (*.gpx ficheiros) num mapa.

A aplicação As Minhas Faixas

Aplicação, código fonte e ficheiro Readme.

As Minhas Faixas utilizam as seguintes funcionalidades:

Recurso Descrição Documentação
Sobreposição de Controlos de Janela O espaço normalmente reservado à barra de título é utilizado por As Minhas Faixas para apresentar a sua própria barra de pesquisa. Apresentar conteúdo na área da barra de título com a Sobreposição de Controlos de Janela
Processamento de Protocolos As Minhas Faixas processam URIs que começam com o geo: protocolo para mostrar as localizações no mapa. Processar protocolos em Aplicativos Web Progressivas
Processamento de Ficheiros As Minhas Faixas processam os ficheiros *.gpx de forma nativa. Processar ficheiros na Aplicativos Web Progressiva
Atalhos As Minhas Faixas definem atalhos para ocultar e mostrar facilmente todas as faixas do mapa. Definir atalhos de aplicação

Os Meus Filmes

Esta demonstração PWA simples permite-lhe procurar filmes compostos e armazená-los localmente.

A aplicação Os Meus Filmes

Aplicação, código fonte.

Os Meus Filmes utilizam as seguintes funcionalidades:

Recurso Descrição Documentação
Sincronização em Segundo Plano Se o utilizador estiver offline ao apresentar mais informações sobre um filme, a aplicação utiliza a Sincronização de Fundo para obter as informações mais tarde quando o utilizador voltar a estar online. Utilizar a API de Sincronização de Segundo Plano para sincronizar dados com o servidor
Notificações Quando as informações sobre um filme são obtidas, é enviada uma notificação para que o utilizador possa voltar a interagir com a aplicação. Apresentar notificações no centro de ação

BPM Techno

O BPM Techno analisa o áudio através do microfone do dispositivo e apresenta um contador BPM (beats por minuto) em tempo real.

A aplicação BPM Techno

Aplicação, código fonte e ficheiro Readme.

O BPM Techno utiliza as seguintes funcionalidades:

Recurso Descrição Documentação
Atalhos BPM Techno define um atalho que permite aos utilizadores carregar um ficheiro de áudio na aplicação. Definir atalhos de aplicação
Processamento de Ficheiros O BPM Techno processa nativamente ficheiros *.mp3 . Processar ficheiros na Aplicativos Web Progressiva
Partilhar Destino Outras aplicações podem partilhar ficheiros de áudio com o BPM Techno através da caixa de diálogo de partilha do sistema operativo. Receber conteúdo partilhado
Processamento de Protocolos A aplicação processa URIs que podem ser utilizados web+bpm: para enviar ligações para uma música a analisar. Processar protocolos em Aplicativos Web Progressivas

1DIV

1DIV é um editor CSS que permite aos utilizadores criar desenhos com apenas um elemento HTML e código CSS.

A aplicação 1DIV

Aplicação, código fonte e ficheiro Readme.

1DIV utiliza as seguintes funcionalidades:

Recurso Descrição Documentação
Sobreposição de Controlos de Janela 1DIV utiliza o espaço normalmente reservado pela barra de título para apresentar um logótipo, campo de pesquisa e botão. Apresentar conteúdo na área da barra de título com a Sobreposição de Controlos de Janela

Confira também