Partilhar via

Exemplos de Aplicações Web Progressivas

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

O primeiro exemplo a utilizar ao começar é o exemplo de conversor de temperatura.

Veja o ficheiro Readme do exemplo; alguns exemplos requerem a configuração e não funcionam se clicar na ligação da aplicação abaixo.

A maioria destas demonstrações do PWA estão no repositório MicrosoftEdge/Demos .

1DIV

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

A aplicação 1DIV

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

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

cliente Email

Um PWA de cliente de e-mail simulado que demonstra como utilizar processadores de protocolos PWA.

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

Email cliente utiliza as seguintes funcionalidades:

Recurso Descrição Documentação
Processamento de Protocolos mailto as ligações são processadas pela aplicação para começar a compor um novo e-mail. Processar protocolos num PWA

Meta tag do título da aplicação

Uma aplicação Web de demonstração para mostrar a application-title meta tag.

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

A Meta Tag de Título da Aplicação utiliza as seguintes funcionalidades:

Recurso Descrição Documentação
application-title meta tag O PWA efetua alterações de runtime ao <meta name="application-title" content=""> elemento . application-title no <atributo meta> name na MDN.

Sincronização de Fundo do PWA

A demonstração da Sincronização de Fundo do PWA permite-lhe enviar mensagens de chat mesmo quando está offline. Se estiver offline ao enviar uma mensagem, a aplicação utiliza a Sincronização de Fundo para enviar a mensagem mais tarde, quando estiver novamente online.

Demonstração da API de Sincronização de Fundo do PWA

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

A demonstração da API de Sincronização de Fundo do PWA utiliza as seguintes funcionalidades:

Recurso Descrição Documentação
Sincronização em Segundo Plano Ativa a utilização do PWA quando estiver offline; sincroniza os dados com o servidor quando a ligação de rede é restaurada. Sincronizar e atualizar um PWA em segundo plano

Processadores de ficheiros PWA

A aplicação de processadores de ficheiros PWA processa ficheiros *.txt como uma aplicação nativa.

A aplicação de demonstração

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

A aplicação de processadores de ficheiros PWA utiliza as seguintes funcionalidades:

Recurso Descrição Documentação
Processamento de Ficheiros O file_handlers membro do manifesto da aplicação Web permite que um PWA processe tipos de ficheiro como uma aplicação nativa. Processar ficheiros num PWA

Instalador do PWA

Um PWA que utiliza a API de Instalação Web para instalar outros PWAs. Também utiliza a Alvenaria CSS.

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

O instalador do PWA utiliza as seguintes funcionalidades:

Recurso Descrição Documentação
API de Instalação Web O instalador do PWA utiliza a navigator.install() API para instalar outros PWAs no dispositivo. API de Instalação Web
Alvenaria CSS Em vez de uma grelha estrita com intervalos abaixo dos itens mais curtos, os itens na linha seguinte são levantados para preencher as lacunas. Esquema de alvenaria

Consulte também:

Temporizador PWA

Tem um botão Definir temporizador e pode definir a duração do temporizador.

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

PWA To Do

Crie listas de tarefas localmente no browser ou instale a aplicação. Clique na ligação Acerca de na demonstração composta.

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

PWAmp

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

A aplicação PWAmp a mostrar botões de reprodução e uma lista de músicas

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

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 num PWA
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 num PWA
Partilha Web As músicas podem ser partilhadas com outras aplicações através da caixa de diálogo de partilha do sistema operativo. Partilhar 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. Apresentar um widget PWA no Windows Widgets Board
Barra lateral O PWAmp pode ser afixado à barra lateral no Microsoft Edge. Criar um PWA para a barra lateral no Microsoft Edge

Conversor de temperatura

Uma aplicação de demonstração PWA simples que converte temperaturas. Veja Exemplo de conversor de temperatura.

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

wami

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

A aplicação wami

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

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

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

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

Esta demonstração está no repositório webmaxru/bpm-counter .

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 (menus de premir ou clicar com o botão direito do rato)
Processamento de Ficheiros O BPM Techno processa nativamente ficheiros *.mp3 . Processar ficheiros num PWA
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 num PWA

Webboard

O Webboard é uma aplicação de desenho.

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

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

Esta demonstração está no repositório pwa-builder/web-whiteboard .

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. Partilhar conteúdo

Consulte também

  • Last updated on