Compartilhar via

Melhores práticas para PWAs

  • Artigo

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 a criação de um PWA simples primeiro, veja Introdução às PWAs.

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 PWAs.

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 beforeinstallprompt e forneça o seu próprio botão de instalação na sua aplicação.

Para ver um exemplo de código do beforeinstallprompt evento, marcar o código fonte de demonstração PWAmp. Para testar a instalação personalizada, abra a demonstração 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 um PWA 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 (menus de premir ou clicar com o botão direito do rato).

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 status distintivos 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 num PWA.

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 um PWA e Processar protocolos num PWA.

Widgets

Funcionalidade experimental

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

Consulte Apresentar um widget PWA no Windows Widgets Board.

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.

Veja também:

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:

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. Veja Manifestos de aplicações Web.
  • 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, utilizando o esquema de grelha CSS, o esquema de caixa flexível CSS (flexbox), as consultas de multimédia CSS e as 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. Veja Building Skeleton Screens with CSS Custom Properties (Criar Ecrãs de Estrutura com Propriedades Personalizadas do CSS).

Testar em vários browsers e dispositivos

Com a Aplicativos Web Progressiva, 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:

Suporte para ligações avançadas

Para melhorar a deteção e a 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 para ligações profundas.

Confira também

Local: PWA:

Local: DevTools:

MDN:

Wikipédia:

GitHub:

Outro: