Checklist definitivo para os PWAs


Appy pie
By Appy pie  | July 19, 2018 8:41 am
Como Criar um Aplicativo gratuito

Como criar um aplicativo com Appy Pie: Desde que o iPhone foi lançado em 2007, os desenvolvedores realmente estão fazendo tudo o que podem para desenvolver e implementar aplicativos puramente baseados na web para dispositivos móveis. No entanto, nos últimos dois anos, as coisas parecem estar se movendo na direção certa.

Os Progressive Web Apps ou PWAs são aplicativos puramente baseados na Web que se comportam e se parecem com aplicativos nativos. Estes podem ser adicionados como ícones às telas iniciais ou às bandejas de aplicativos. Eles abrem em tela cheia sem o navegador e oferecem a mesma experiência de um aplicativo nativo, e até gera notificação! Como não é amar?

Além de todas essas semelhanças com os aplicativos móveis nativos, os aplicativos da Web progressivos também têm certas vantagens. Eles ocupam pouco ou nenhum espaço em seu dispositivo móvel, são mais rápidos e eliminam o tedioso processo de obter atualizações e lançamentos para alterar um recurso ou ajustar a aparência do aplicativo. Além de tudo isso, eles podem trabalhar offline também!

Você está animado com o Progressive Web Apps agora? Ok, vamos dar mais! Os PWAs são aplicativos da web criados com a intenção de oferecer um aplicativo como experiência ao usuário e ter todos os recursos modernos da Web reunidos em um. Essa tecnologia tornou possível empacotar todas as funcionalidades do aplicativo diretamente do navegador e salvá-lo das dificuldades de pesquisa, download e atualização, o que é o incômodo quando você usa um aplicativo nativo no seu dispositivo móvel.

Embora tenhamos falado muito sobre os aplicativos da web progressivos no passado e discutido detalhadamente o quanto eles podem ser excelentes para o seu negócio. Aqui, vamos falar sobre a lista de verificação de testes que você deve ter à mão antes de decidir lançar seu novo PWA!

Checklist para testar seu PWA –

  1. O site está sendo exibido por HTTPS?

A segurança hoje é uma das maiores preocupações em um aplicativo da Web progressivo, e é por esse motivo que você precisa garantir que seu aplicativo da Web seja veiculado somente por HTTPS.

Como testar?

Você pode testar se o seu site está sendo veiculado por HTTPS ou não, usando qualquer uma das ferramentas a seguir, como o Lighthouse by Google Developer, o jitbit, o seositecheckup, o digicert, o ssl chopper, o ssl labs etc.

Consertar

Caso você descubra que o site ou seu aplicativo da Web progressivo não está sendo veiculado por HTTPS, é necessário implementar o HTTPS.

  1. As páginas da web são responsivas?

Você deve garantir que o seu aplicativo da Web progressivo seja responsivo em todos os dispositivos móveis e de área de trabalho, incluindo laptops, computadores, smartphones, tablets etc.

Como testar?

Você pode testar esse aspecto usando o Lighthouse para verificar se seu design é compatível com dispositivos móveis, mas também é possível fazer o check-out manualmente.

Consertar

Se os resultados indicarem que as páginas da Web em seu aplicativo da Web não são responsivas, você precisa trabalhar na implementação de um design responsivo, ou a outra maneira é adaptar de maneira adaptável um site compatível com a viewport.

  1. O carregamento offline está funcionando?

Quando você está criando seu aplicativo da Web progressivo, todas as suas páginas da Web ou, pelo menos, algumas delas funcionam mesmo quando o aplicativo está offline. Isso significa que, ao realizar o teste, você precisa garantir que seu aplicativo da Web responda com um número de 200 no momento em que estiver offline.

Como testar?

Você precisa carregar várias páginas no PWA enquanto mantém o modo de avião ligado. Quando o modo avião estiver ativado, verifique se o aplicativo exibe pelo menos algum conteúdo, mesmo quando o aplicativo está of-line. Você pode usar o Lighthouse para verificar se o URL inicial responde com um 200 quando estiver offline.

Consertar

Use um Service Workwer

  1. É compatível entre os navegadores?

Quando você tem um aplicativo da Web progressivo, precisa testá-lo para compatibilidade entre navegadores para garantir que seu aplicativo da Web ofereça uma experiência de usuário sem problemas para todos os usuários, independentemente do navegador que eles usarão.

Como testar?

Para testar a compatibilidade do seu aplicativo da Web progressivo em diferentes navegadores, você precisa tentar abri-lo no Chrome, no Edge, no Firefox e no Safari.

Consertar

Você teria que lidar com cada um dos problemas quando e quando eles surgissem e a correção fosse diferente para cada um deles.

  1. Os metadados de “Add to Homescreen” estão disponíveis?

Ao testar o aplicativo da web progressivo que você desenvolveu, é importante testar se o aplicativo da web fornece metadados para “Adicionar à tela inicial”.

Como testar?

Isso pode ser feito usando o Lighthouse e confirmando que “o usuário pode ser solicitado a adicionar à tela inicial” está definido como Sim!

Consertar

Se tiver problemas com isso, você pode simplesmente adicionar um arquivo de manifesto de aplicativo Web ao seu projeto.

  1. As transições de página são suaves?

As transições de página são mais importantes para o desempenho percebido do aplicativo da web, portanto, elas nunca devem parecer irritadas quando você navegar por ele, nem mesmo quando a conexão com a Internet estiver lenta.

Como testar?

Este teste deve ser realizado manualmente em uma rede lenta, particularmente. Tente clicar em botões ou links diferentes e veja se ele responde imediatamente, fazendo a transição sem problemas para outra tela, e também deve mostrar uma tela de carregamento de espaço reservado ou ter um indicador de carregamento até o aplicativo aguardar alguma resposta.

Consertar

Caso seja um aplicativo de página única renderizado pelo cliente, você deve trabalhar para fazer a transição do usuário imediatamente para a próxima página e mostrá-lo uma tela de esqueleto e usar qualquer conteúdo, incluindo o título ou a miniatura que já esteja disponível enquanto aguarda o conteúdo para carregar.

  1. Cada página tem um URL?

Cada página do aplicativo da Web precisa ter um URL e todos esses URLs são exclusivos.

Como testar?

Você deve certificar-se de que as páginas individuais sejam vinculáveis por meio dos URLs e que cada um dos URLs seja exclusivo para que possam ser compartilhados facilmente nas mídias sociais, testando se páginas individuais podem ser abertas e acessadas diretamente por novas janelas do navegador.

Consertar

Caso você esteja criando um aplicativo de uma única página, verifique se o roteador do lado do cliente tem a capacidade de reconstruir o estado do aplicativo a partir de um determinado URL.

  1. O conteúdo é compartilhável?

Todo o conteúdo do seu aplicativo da web deve ser fácil de compartilhar, mesmo com o modo de tela cheia, e também deve formar cartões para todas as plataformas de mídia social.

Como testar?

Esse teste precisa ser realizado manualmente, compartilhando o conteúdo do seu aplicativo por meio do modo de tela inteira. O teste dos cartões pode ser feito das seguintes maneiras:

  • Facebook – Depure o URL inserindo a postagem a ser compartilhada e verificando se os cartões foram gerados ou não.
  • Twitter – Verifique se um tipo de cartão adequado para o seu conteúdo é adicionado ao cabeçalho da HTML da página

Consertar

Você pode resolver isso fornecendo botões de compartilhamento social ou um botão de compartilhamento genérico em sua Experiência do usuário. Se você estiver colocando um botão genérico, pode fazer uma provisão para copiar diretamente o URL para a área de transferência do usuário automaticamente quando tocado e, em seguida, oferecer a eles opções de diferentes redes sociais para compartilhar. Você pode até experimentar a nova Web Share API para incorporar o sistema de compartilhamento nativo no Android.

  1. Os metadados do Schema.org estão disponíveis sempre que necessário?

O aplicativo da Web que você cria deve ser capaz de criar um cartão valioso para você (se aplicável). Isso pode ajudar a melhorar a aparência do seu site ou do aplicativo da Web por diferentes mecanismos de pesquisa.

Como testar?

Para testar isso, você pode usar os dados estruturados do Google para garantir que imagens, descrições, títulos, etc. estejam disponíveis.

Consertar

Você pode corrigir isso se você marcar o conteúdo. Por exemplo:

  • Um aplicativo de receita deve ter a marcação de tipo de receita para Rich Cards
  • Um aplicativo de notícias deve ter a marcação de tipo NewsArticle para Rich Cards e / ou suporte a AMP
  • Um aplicativo de comércio eletrônico deve ter a marcação de tipo de produto para Rich Cards
  1. As notificações push estão disponíveis?

Se notificações push forem necessárias para seu aplicativo da Web, verifique se elas não são excessivamente agressivas. Embora as notificações por push não sejam um requisito, se você quiser um aplicativo da Web exemplar, mas implementá-las, se fizer sentido.

Se você incluir notificações por push em seu aplicativo da Web, forneça ao usuário um contexto sobre como as notificações serão usadas.

Como testar?

Para testar isso, você teria que visitar o site ou o aplicativo da Web e encontrar o fluxo de ativação das notificações push. Aqui, quando o navegador mostra a solicitação de permissão, você deve verificar se ele fornece algum contexto explicando para que serve a permissão. Quando o site solicitar permissão para carregar a página, verifique se o contexto é claro em relação ao motivo pelo qual o usuário deve ativar as notificações por push.

Consertar

Crie um fluxo de permissões de notificações que seja amigável ao usuário e forneça clareza.

Você deve certificar-se de que a interface do usuário incentive os usuários a ativar as notificações por push e não se torne excessivamente agressiva.

Como testar?

Vá para o aplicativo da web e encontre o fluxo de entrada para as notificações por push. Aqui, você precisa verificar e certificar-se de que, no caso de descartar as notificações por push, o site ou o aplicativo da Web não seja solicitado novamente da mesma maneira na mesma sessão.

Consertar

Quando você estiver criando o fluxo de inclusão, certifique-se de que, quando os usuários disserem que não desejam um tipo específico de notificação, eles não serão solicitados novamente por alguns dias.

A próxima coisa a testar é se o site diminui a tela no momento em que a solicitação de permissão aparece.

Como testar?

Vá para o fluxo de entrada para as notificações push no seu aplicativo da web ou no site. Quando o navegador estiver exibindo a solicitação de permissão, verifique se a página está diminuindo o restante do conteúdo no site, o que não é relevante para a solicitação de permissão, colocando uma sobreposição escura nela.

Consertar

Dim a tela no momento de chamar Notification.requestPermission. No entanto, lembre-se de soltá-lo após a resolução da promessa.

O teste deve ser realizado para garantir que as notificações push sejam entregues de maneira precisa e oportuna e que sejam relevantes para o usuário.

Como testar?

Ative a notificação por push do site e verifique se os casos de uso para os quais as notificações push estão sendo usadas se encaixam nos critérios abaixo:

  • Perfeito perfeitamente – uma notificação por push deve chegar ao usuário no momento exato em que ele deseja e quando é mais importante para ele.
  • Preciso – uma notificação por push deve ter as informações específicas que podem ser processadas no mesmo instante.
  • Relevante – uma notificação por push deve ser sobre pessoas ou sobre tópicos em que o usuário estaria interessado.

Consertar

Caso chegue ao seu conhecimento de que o conteúdo da sua notificação por push não é pontual, precisa ou relevante para o usuário, você pode enviar o mesmo por meio de um email para melhor efeito.

Uma das coisas mais importantes para testar aqui é se o usuário tem controle sobre como ativar e desativar as notificações push do seu site ou aplicativo da web.

Como testar?

Vá para o site e ative as notificações push do site. Agora, é importante que você tenha um lugar no site ou no aplicativo da web em que o usuário possa ir e gerenciar as permissões de notificação por push e desativá-las ou ativá-las à vontade.

Consertar

Crie uma interface do usuário que permita que os usuários gerenciem facilmente suas notificações para que eles possam ativá-las ou desativá-las conforme necessário.

  1. A primeira carga é rápida (mesmo em 3G)?

A velocidade é uma das maiores vantagens que são anunciadas às pessoas quando elas criam ou usam um aplicativo da Web progressivo. Portanto, é de suma importância testar seus aplicativos da Web e verificar a primeira carga nas conexões 3G.

Como testar?

Isso pode ser feito usando o Lighthouse em um Nexus% ou algo comparável para verificar o tempo para interativos <10s para a primeira visita em uma rede 3G simulada.

Consertar

Há muitas maneiras de melhorar o desempenho da primeira velocidade de carregamento do seu aplicativo da web. No entanto, primeiro você precisa entender o desempenho do seu site um pouco melhor e, para isso, pode usar ferramentas como o Pagespeed Insights e o SpeedIndex no WebPageTest.

Uma coisa que você pode fazer é concentrar-se em carregar menos scripts, garantir que a quantidade máxima de script seja carregada de forma assíncrona por meio de <script async> e garantir que o CSS de bloqueio de render seja marcado adequadamente. Além disso, você também pode tentar usar o padrão PRPL e ferramentas como o PageSpeed ​​Module no servidor.

Qual é o próximo?

Agora que você terminou de testar seu aplicativo da Web, você teria em mãos os resultados que declarariam se seu aplicativo é realmente progressivo ou não. Se os resultados indicarem um “não”, você deve voltar a trabalhar nele. Se a indicação for um “sim”, simplesmente sente-se nu e veja a conversão se elevar e veja a magia do PWA para o seu site.

Nós perdemos algo que precisa ser testado aqui? Informe-nos, adoraríamos saber de você!

Appy pie
About The Author

App Builder

Nós utilizamos cookies para oferecer a melhor experiência online. Ao usar nosso site, você concorda com o uso de cookies de acordo com nossa política de cookies.. OK Saiba Mais Aqui.