Práticas recomendadas para PWAs

Este artigo lista as práticas recomendadas para tornar seu PWA um ótimo aplicativo para seus usuários. Quando os usuários instalam aplicativos, eles têm certas expectativas sobre o que esses aplicativos podem fazer, como trabalhar offline, integrar-se profundamente ao sistema operacional ou executar tarefas de computação não triviais.

Leia as práticas recomendadas nesta página para saber como fazer com que seu PWA tenha a aparência que os usuários esperam.

Esta página presume que você já tenha um PWA. Para saber mais sobre como criar um PWA simples primeiro, consulte Introdução ao desenvolvimento de um PWA.

Fornecer uma instalação personalizada

Seu aplicativo já pode ser instalado usando o botão Aplicativo disponível na barra de endereços do navegador se você seguir as etapas em Introdução ao desenvolvimento de um PWA.

Uma experiência de instalação personalizada, na interface do usuário do aplicativo, pode ser mais óbvia para os usuários e levar a mais instalações.

Para criar uma experiência de instalação personalizada, use o evento beforeinstallprompt e forneça seu próprio botão de instalação em seu aplicativo.

Para ver um exemplo de código do beforeinstallprompt evento, marque o código-fonte de demonstração do PWAmp. Para testar a instalação personalizada, abra a demonstração do PWAmp e clique em Mais ferramentas (...) >Sobre>Instalar aplicativo no aplicativo.

Enviar para lojas de aplicativos

Muitos usuários procurarão seu aplicativo na loja de aplicativos de seus dispositivos. Baixar de uma loja de aplicativos oficial oferece uma experiência confiável e familiar para seus usuários.

Você pode publicar seu PWA na Microsoft Store para Windows, na App Store para iOS ou na Play Store para Android, usando o PWA Builder.

Para saber como usar o PWA Builder e publicar na Microsoft Store, consulte Publicar um PWA na Microsoft Store.

Criar um ótimo ícone de aplicativo

Muitos usuários encontram aplicativos em seus dispositivos por seus ícones. Para ajudar os usuários a encontrar seu aplicativo com mais facilidade, escolha um ícone reconhecível, verifique se ele se destaca e se ele se adapta aos dispositivos em que o aplicativo está instalado.

No Windows, o ícone do seu aplicativo aparece em muitos lugares, como na barra de tarefas, no menu Iniciar ou no alternador de tarefas Alt+Tab . Forneça vários tamanhos de imagem para garantir que o ícone do seu aplicativo seja facilmente reconhecível nesses locais.

Para saber qual tamanho de imagem é necessário no Windows, consulte Tamanhos de imagem de ícone em Definir ícones e uma cor de tema.

Usar uma janela do aplicativo autônoma

Os aplicativos nativos têm suas próprias janelas dedicadas. Os PWAs podem definir como eles aparecem no sistema operacional do host.

Para exibir seu PWA em uma janela autônoma sem interface do usuário de navegação do navegador, use o membro de exibição no arquivo de manifesto do aplicativo Web e defina-o como standalone.

Se o aplicativo tiver várias páginas HTML, verifique se os usuários podem navegar entre as páginas usando botões ou links dentro do aplicativo. Use o valor do membro manifesto minimal-uidisplay para permitir que os usuários naveguem entre as páginas usando os botões anterior e seguinte renderizados pelo navegador na barra de título do aplicativo.

Para criar uma experiência mais imersiva e nativa, os PWAs de desktop também podem optar por ocultar a barra de título padrão do sistema operacional e exibir seu próprio conteúdo. Exibir conteúdo onde a barra de título normalmente está pode ajudar os PWAs a se sentirem mais como aplicativos nativos. Muitos aplicativos da área de trabalho, como o Visual Studio Code, o Microsoft Teams e o Microsoft Edge já fazem isso.

Para substituir a barra de título, consulte Exibir conteúdo na área da barra de título usando a sobreposição de controles de janela.

Integrar no sistema operacional

Os usuários esperam que os aplicativos instalados se integrem ao sistema operacional do host de alguma forma.

Seu aplicativo pode fornecer uma experiência mais familiar, envolvente e perfeita usando recursos de integração do sistema operacional, como atalhos, compartilhamento entre aplicativos, selos, manipulação de arquivos ou manipulação de links.

Atalhos

Os atalhos possibilitam definir links diretos para a funcionalidade do seu aplicativo clicando com o botão direito do mouse no ícone do aplicativo.

Consulte Definir atalhos de aplicativos (menus de toque longo ou clique com o botão direito do mouse).

Compartilhamento de aplicativos

Os PWAs podem compartilhar conteúdo com outros aplicativos e receber conteúdo de outros aplicativos por meio da caixa de diálogo de compartilhamento do sistema operacional.

Consulte Compartilhe conteúdo com outros aplicativos.

Selos de ícone

Os PWAs podem exibir emblemas de status em seus ícones de aplicativos para alertar os usuários sobre a presença de novo conteúdo no aplicativo.

Confira Exibir um selo no ícone do aplicativo em Reengajar os usuários com selos, notificações e mensagens por push.

Manipulação de arquivos

Você pode registrar seu PWA para ser um manipulador de arquivos para determinados tipos de arquivo.

Use o recurso manipulador de arquivos PWA para iniciar automaticamente seu aplicativo quando determinado arquivo for aberto pelo usuário no sistema operacional.

Consulte Manipular arquivos em um PWA.

Registrar seu aplicativo é um manipulador de link ou protocolo para iniciar automaticamente seu aplicativo quando determinados links são usados em outros aplicativos.

Consulte Manipular links para um PWA e Manipular protocolos em um PWA.

Widgets

Recurso experimental

Crie seus próprios widgets de aplicativos para exibir no dashboard de widgets do sistema operacional, como o Windows 11 Widgets Board.

Consulte Exibir um widget do PWA no Windows Widgets Board.

Cenários offline de suporte

Quando conectado a uma rede lenta ou não confiável, ou mesmo sem acesso à Internet, os aplicativos instalados geralmente ainda podem ser abertos e usados. Os usuários de aplicativos instalados esperam que eles continuem trabalhando nessas condições. Eles também esperam que as partes dependentes da rede de um aplicativo lidem normalmente com a falta de conexão com uma mensagem personalizada e recursos de cache local.

Para melhorar a retenção, adicione um trabalho de serviço ao seu PWA. Você pode usar o trabalho de serviço, as APIs e Cache o Fetch acesso ao armazenamento de dados local para fornecer uma boa experiência offline para seus usuários.

Você pode fornecer uma boa experiência offline em várias etapas:

  1. Armazene em cache todos os recursos estáticos de que seu aplicativo precisa para iniciar, exibir conteúdo e permitir que os usuários executem as tarefas mais comuns.
  2. Redirecione para uma página offline personalizada para as páginas que não podem ser armazenadas em cache.
  3. Lide normalmente com as tarefas do seu aplicativo que não podem ser usadas sem acesso à Internet.
  4. Implemente cenários avançados, como permitir que os usuários baixem dados para exibição offline.

Veja também:

Armazenar dados localmente

Para fornecer uma experiência avançada e rápida aos usuários, use as diferentes opções de armazenamento de dados persistentes disponíveis para PWAs, como:

  • Armazenamento em cache, para armazenar recursos estáticos para seu aplicativo.
  • Armazenamento local e de sessão, para armazenar pequenas quantidades de dados do usuário.
  • IndexedDB, para armazenar dados de usuário maiores e estruturados.
  • API de Acesso ao Sistema de Arquivos para armazenar arquivos em disco.

Para saber mais, consulte Armazenar dados no dispositivo.

Usar recursos avançados

Os aplicativos instalados normalmente executam cenários de computação avançados que os sites geralmente não dão suporte.

Para fornecer uma experiência semelhante à de um aplicativo, use recursos avançados da Web, como:

Certifique-se de que as tarefas mais importantes do seu aplicativo possam ser feitas em todos os navegadores e dispositivos. Consulte Teste em vários navegadores e dispositivos.

Faça com que seu aplicativo se pareça com um aplicativo real

Os usuários instalam aplicativos em seus dispositivos para realizar tarefas específicas e têm certas expectativas sobre como essas tarefas são apresentadas na interface do usuário e como elas se integram ao sistema operacional host.

Para permitir que os usuários realizem as tarefas mais importantes do seu aplicativo com facilidade e de maneira familiar, faça escolhas de design, como:

  • Não use uma área de cabeçalho grande como os sites fazem para navegar para outras páginas. Em vez disso, use uma metáfora de menu.
  • Não use uma grande área de rodapé como os sites fazem para obter mais links e informações.
  • Use a system-ui fonte para deixar seu conteúdo mais nativo e carregar mais rápido.
  • Use menos links e prefira alvos de sucesso maiores.
  • Dê suporte aos temas claro e escuro do sistema operacional usando o recurso de mídia CSS prefers-color-scheme .
  • Forneça um background-color e theme-color no manifesto do aplicativo Web para personalizar a janela do aplicativo. Consulte Manifestos do aplicativo Web.
  • Concentre-se nas tarefas mais importantes, organize o conteúdo e simplifique a interface do usuário.
  • Reorganize a interface do usuário com base no fator forma do dispositivo usando o layout de grade CSS, o layout de caixa flexível CSS (flexbox), consultas de mídia CSS e imagens responsivas.
  • Melhore o desempenho percebido registrando as interações do usuário imediatamente.
  • Considere o uso de telas de esqueleto, se a renderização da próxima tela demorar. Consulte Construindo telas de esqueleto com propriedades personalizadas CSS.

Teste em vários navegadores e dispositivos

Com os Aplicativos Web Progressivos, você fornece um aplicativo para todos os dispositivos, a partir de uma base de código. Para garantir que seu aplicativo funcione em qualquer lugar, teste-o em vários navegadores, sistemas operacionais e dispositivos.

Certifique-se de que os cenários mais importantes do seu aplicativo funcionem em qualquer lugar e aprimore progressivamente a experiência em dispositivos de suporte.

Para testar seu aplicativo em vários ambientes, considere as seguintes técnicas:

Suporte a links diretos

Para melhorar a descoberta e o compartilhamento do seu aplicativo pela Web e pelas mídias sociais, roteie cada página do aplicativo para uma URL exclusiva e dê suporte a links diretos.

Confira também

Local: PWA:

Local: DevTools:

MDN:

Wikipédia:

GitHub:

Outros:

  • Last updated on