Melhores práticas para PWAs

Este artigo lista as melhores práticas para tornar o seu PWA uma excelente aplicação para os seus utilizadores. Quando os utilizadores instalam aplicações, têm determinadas expectativas sobre o que estas aplicações podem fazer, como trabalhar offline, integrar-se profundamente no sistema operativo ou realizar tarefas de computação não triviais.

Leia as melhores práticas nesta página para aprender a fazer com que o seu PWA pareça e sinta o que os utilizadores esperam.

Esta página pressupõe que já tem um PWA. Para saber mais sobre como criar um PWA simples primeiro, consulte Introdução às Aplicações Web Progressivas.

Fornecer uma instalação personalizada

A sua aplicação já pode ser instalada com o botão Aplicação disponível na barra de endereço do browser se seguir os passos em Introdução às Aplicações Web Progressivas.

Uma experiência de instalação personalizada, na interface de utilizador da aplicação, pode ser mais óbvia para os seus utilizadores e levar a mais instalações.

Para criar uma experiência de instalação personalizada, utilize o evento e forneça o beforeinstallprompt seu próprio botão de instalação na sua aplicação.

Para ver um exemplo de código do beforeinstallprompt evento, verifique o código fonte da aplicação de demonstração PWAmp. Para testar a instalação personalizada, abra PWAmp e, em seguida, clique em Mais ferramentas (...) >Acerca> deInstalar aplicação na aplicação.

Submeter para lojas de aplicações

Muitos utilizadores irão procurar a sua aplicação na loja de aplicações do respetivo dispositivo. A transferência a partir de uma loja de aplicações oficial proporciona uma experiência fidedigna e familiar para os seus utilizadores.

Pode publicar o seu PWA na Microsoft Store para Windows, na App Store para iOS ou na Play Store para Android com o PWA Builder.

Para saber como utilizar o PWA Builder e publicar na Microsoft Store, consulte Publicar uma Aplicação Web Progressiva na Microsoft Store.

Criar um excelente ícone de aplicação

Muitos utilizadores encontram aplicações nos respetivos dispositivos através dos respetivos ícones. Para ajudar os utilizadores a encontrar a sua aplicação mais facilmente, escolha um ícone reconhecível, certifique-se de que se destaca e certifique-se de que se adapta aos dispositivos nos quais a sua aplicação está instalada.

No Windows, o ícone da sua aplicação é apresentado em vários locais, como a barra de tarefas, o menu Iniciar ou o comutador de tarefas Alt+Tecla de Tabulação. Forneça vários tamanhos de imagem para garantir que o ícone da aplicação é facilmente reconhecível nestes locais.

Para saber que tamanho de imagem é necessário no Windows, consulte o artigo Tamanhos de imagem de ícones em Definir ícones e uma cor do tema.

Utilizar uma janela de aplicação autónoma

As aplicações nativas têm as suas próprias janelas dedicadas. Os PWAs podem definir a forma como aparecem no sistema operativo anfitrião.

Para apresentar o PWA numa janela autónoma sem interface de utilizador de navegação no browser, utilize o membro de apresentação no ficheiro de manifesto da aplicação Web e defina-o como standalone.

Se a sua aplicação tiver várias páginas HTML, certifique-se de que os utilizadores podem alternar entre as páginas através de botões ou ligações na sua aplicação. Utilize o minimal-ui valor do membro do manifesto para permitir que os display utilizadores entre páginas utilizem botões anteriores e seguintes compostos pelo browser na barra de título da aplicação.

Para criar uma experiência mais envolvente e nativa, os PWAs de ambiente de trabalho também podem optar por ocultar a barra de título predefinida do sistema operativo e apresentar os seus próprios conteúdos. Apresentar conteúdo onde a barra de título é normalmente pode ajudar os PWAs a sentirem-se mais como aplicações nativas. Muitas aplicações de ambiente de trabalho, como o Visual Studio Code, o Microsoft Teams e o Microsoft Edge, já o fazem.

Para substituir a barra de título, consulte Apresentar conteúdo na área da barra de título através da Sobreposição de Controlos de Janela.

Integrar no sistema operativo

Os utilizadores esperam que as aplicações instaladas se integrem com o sistema operativo anfitrião de alguma forma.

A sua aplicação pode proporcionar uma experiência mais familiar, envolvente e totalmente integrada ao utilizar funcionalidades de integração do sistema operativo, tais como atalhos, partilha entre aplicações, badging, processamento de ficheiros ou processamento de ligações.

Atalhos

Os atalhos permitem definir ligações diretas para a funcionalidade da aplicação ao clicar com o botão direito do rato no ícone da aplicação.

Veja Definir atalhos de aplicação.

Compartilhamento de aplicativos

As PWAs podem partilhar conteúdos com outras aplicações e receber conteúdos de outras aplicações através da caixa de diálogo de partilha do sistema operativo.

Veja Partilhar conteúdo com outras aplicações.

Distintivos de ícones

As PWAs podem apresentar distintivos de estado nos respetivos ícones de aplicação para alertar os utilizadores sobre a presença de novos conteúdos na aplicação.

Consulte Apresentar um distintivo no ícone da aplicação em Voltar a envolver os utilizadores com distintivos, notificações e mensagens push.

Processamento de ficheiros

Pode registar o seu PWA para ser um processador de ficheiros para determinados tipos de ficheiro.

Utilize a funcionalidade de processador de ficheiros PWA para iniciar automaticamente a sua aplicação quando determinado ficheiro for aberto pelo utilizador no sistema operativo.

Veja Processar ficheiros em Aplicações Web Progressivas.

Processamento de ligações e protocolos

Registar a sua aplicação é uma ligação ou processador de protocolos para iniciar automaticamente a sua aplicação quando determinadas ligações são utilizadas noutras aplicações.

Veja Processar ligações para a Aplicação Web Progressiva e Processar protocolos em Aplicações Web Progressivas.

Widgets

Crie os seus próprios widgets de aplicação para apresentar no dashboard do widget do sistema operativo, como o Quadro de Widgets do Windows 11.

Veja Build PWA-driven widgets (Criar widgets baseados em PWA).

Cenários offline de suporte

Quando ligadas a uma rede lenta ou pouco fiável, ou mesmo sem acesso à Internet, as aplicações instaladas podem, normalmente, continuar a ser abertas e utilizadas. Os utilizadores das aplicações instaladas esperam que continuem a trabalhar nestas condições. Também esperam que as partes dependentes da rede de uma aplicação lidem corretamente com a falta de ligação com uma mensagem personalizada e capacidades de colocação em cache locais.

Para melhorar a retenção, adicione uma função de trabalho de serviço ao seu PWA. Pode utilizar as APIs e Cache a função de trabalho de Fetch serviço, bem como o acesso ao armazenamento de dados local, para proporcionar uma boa experiência offline aos seus utilizadores.

Pode proporcionar uma boa experiência offline em vários passos:

1. Coloque em cache todos os recursos estáticos de que a sua aplicação precisa para iniciar, apresentar conteúdo e permitir que os utilizadores executem as tarefas mais comuns.
2. Redirecionar para uma página offline personalizada para as páginas que não podem ser colocadas em cache.
3. Processe corretamente as tarefas da sua aplicação que não podem ser utilizadas sem acesso à Internet.
4. Implemente cenários avançados, como permitir que os utilizadores transfiram dados para visualização offline.

Para saber mais, veja Utilizar uma função de trabalho de serviço para gerir pedidos de rede.

Armazenar dados localmente

Para proporcionar uma experiência avançada e rápida aos seus utilizadores, utilize as diferentes opções de armazenamento de dados persistentes que estão disponíveis para PWAs, tais como:

• Armazenamento em cache, para armazenar recursos estáticos para a sua aplicação.
• Armazenamento local e de sessão, para armazenar pequenas quantidades de dados de utilizador.
• IndexedDB, para armazenar dados de utilizadores maiores e estruturados.
• API de Acesso ao Sistema de Ficheiros, para armazenar ficheiros no disco.

Para saber mais, veja Armazenar dados no dispositivo.

Utilizar capacidades avançadas

Normalmente, as aplicações instaladas executam cenários de computação avançados que os sites normalmente não suportam.

Para proporcionar uma experiência semelhante a uma aplicação, utilize capacidades Web avançadas, tais como:

• Acesso a hardware com as APIs Web Bluetooth, WEB USB ou WEB NFC .
• Acesso à área de transferência com a API da Área de Transferência.
• Integração de contactos de dispositivos com a API do Seletor de Contactos.
• Interações multimédia avançadas com as APIs Canvas, WebGL ou WebAudio .
• Autenticação e pagamento seguros e fidedignos com as APIs WebAuthn e Pedido de Pagamento .
• Tarefas de computação não triviais com o WebAssembly.
• Ler e escrever em ficheiros com a API de Acesso ao Sistema de Ficheiros.

Certifique-se de que as tarefas mais importantes da sua aplicação podem ser feitas em todos os browsers e dispositivos. Consulte Testar em vários browsers e dispositivos.

Fazer com que a sua aplicação pareça uma aplicação real

Os utilizadores instalam aplicações nos respetivos dispositivos para alcançar tarefas específicas e têm algumas expetativas sobre a forma como estas tarefas são apresentadas na interface de utilizador e como se integram no sistema operativo anfitrião.

Para permitir que os seus utilizadores alcancem as tarefas mais importantes da sua aplicação de forma fácil e familiar, faça escolhas de estrutura como:

• Não utilize uma área de cabeçalho grande, como os sites fazem para navegar para outras páginas. Em vez disso, utilize uma metáfora de menu.
• Não utilize uma área de rodapé grande, como os sites fazem para obter mais ligações e informações.
• Utilize o tipo system-ui de letra para tornar os seus conteúdos mais nativos e carregar mais rapidamente.
• Utilize menos ligações e prefira alvos de sucesso maiores.
• Suporte para os temas claros e escuros do sistema operativo através da funcionalidade de suporte de dados CSS prefers-color-scheme .
• Forneça um background-color manifesto e theme-color na sua aplicação Web para personalizar a janela da aplicação.
• Concentre-se nas tarefas mais importantes, desorganize o conteúdo e simplifique a interface de utilizador.
• Organize novamente a interface de utilizador com base no fator de forma do dispositivo ao utilizar grelha CSS, Flexbox, Consultas de multimédia e Imagens reativas.
• Melhore o desempenho percebido ao registar imediatamente as interações do utilizador.
• Considere utilizar ecrãs de estrutura se a composição do ecrã seguinte demorar algum tempo.

Testar em vários browsers e dispositivos

Com as Aplicações Web Progressivas, fornece uma aplicação para todos os dispositivos, a partir de uma base de código. Para garantir que a sua aplicação funciona em todo o lado, teste-a em vários browsers, sistemas operativos e dispositivos.

Certifique-se de que os cenários mais importantes da sua aplicação funcionam em todo o lado e melhore progressivamente a experiência em dispositivos de suporte.

Para testar a sua aplicação em vários ambientes, considere as seguintes técnicas:

• Testes entre browsers.
• Emular e testar outros browsers a partir do Microsoft Edge com o DevTools.
• Crie uma sessão de depuração remota no Windows ou Android.
• Teste e automatização no Microsoft Edge para automatizar os testes.
• Teste em máquinas virtuais.

Suporte para ligações avançadas

Para melhorar a deteção e partilha da sua aplicação através da Web e das redes sociais, encaminhe cada página da sua aplicação para um URL exclusivo e suporte a ligação profunda.