O que é uma PWA?

O que são as PWA?

Embora não seja uma tecnologia nova, elas ganharam importância devido ao fato de que cada vez mais programas, como Google Chrome, Firefox e Safari, as suportam. Além disso, a Microsoft já começou a incluir algumas PWA em sua loja, prontas para serem usadas após a última atualização do seu sistema operacional Windows 10. Cada vez mais empresas, como Twitter, Skyscanner, Trivago, Tinder ou Starbucks, estão explorando o potencial das progressive web apps.

Para entender melhor a que nos referimos quando falamos de uma progressive web app, começaremos indicando o que NÃO é uma PWA:

• Não é uma extensão de navegadores web
• Não é um plugin ou biblioteca para frameworks
• Não é um framework como React, Angular ou Vue.js
• Não é apenas Design Responsivo
• Não é parecido com React Native, Native Script ou Ionic

Uma PWA pode ser definida, em resumo, como um aplicativo móvel acessível através do navegador. Trata-se de um ponto intermediário entre os aplicativos web e os nativos, aproveitando as melhores características de cada um deles: design responsivo, possibilidade de instalá-la no dispositivo, acesso offline, sempre atualizada graças ao uso de Service Workers, indexável a partir do navegador e vinculável por meio de URL, acesso às funções nativas do dispositivo móvel…
Ilustração sobre as progressive web apps.

E por que ganharam grande importância?

Enquanto visitar os sites tradicionais é um processo rápido e simples, a verdade é que eles costumam oferecer uma experiência de usuário muito mais pobre do que os aplicativos. Por outro lado, os apps nativos, ou seja, aqueles que são instalados no telefone, proporcionam uma melhor experiência aos usuários, mas estão limitados pelas características do terminal e do sistema operacional. O fato de que é necessário baixá-los implica que os consumidores precisam fazer um esforço inicial maior, que depois se perde à medida que essa impulsividade diminui com o tempo.

É por isso que uma PWA é uma boa alternativa para desenvolver nossa aplicação, devido ao fato de que são capazes de oferecer as mesmas funcionalidades e experiência do usuário que as nativas, sendo mais eficientes ao ocupar menos espaço na memória do telefone e consumindo menos dados.

Para que serve uma Progressive Web Application?

Explicado de maneira simples, as PWA funcionam como os aplicativos habituais, pois se baseiam em um ambiente que permite o mesmo estilo de navegação e de interação gestual que essas ferramentas. A principal diferença é que não é necessário baixá-las de nenhuma loja de aplicativos, pois são executadas diretamente no navegador.

A seguir, detalhamos as principais características desta tecnologia:

• Progressiva: funciona para todos os usuários, independentemente da escolha do navegador, porque é construída com melhoria progressiva como princípio central.
• Adaptável: se adapta a qualquer fator de formulário, seja desktop, celular, tablet ou o que vier no futuro.
• Independente da conectividade: melhorada com service workers para funcionar offline ou com redes de baixa qualidade.
• Estilo app: ao usuário parece um app com interações e navegação estilo app, porque está construído com modelo de shell de app.
• Fresca: sempre atualizada graças ao processo de atualização do service worker.
• Segura: emitida via HTTPS para evitar intromissões e garantir que o conteúdo não tenha sido manipulado.
• Descobrível: pode ser identificado como «app» graças ao manifesto W3C e ao alcance de registro do service worker, o que permite que os motores de busca a encontrem.
• Possibilidade de voltar a interagir: facilita a possibilidade de voltar a interagir através de funções como notificações push.
• Instalável: permite aos usuários «manter» os aplicativos que consideram mais úteis na tela principal sem o incômodo de uma loja de aplicativos.
• Vinculável: pode ser compartilhado facilmente via URL, não requer instalação complexa.

Na verdade, uma progressive web app pode ser considerada uma evolução das aplicações web como as oferecidas pelo HTML5 e a tecnologia dos service workers, que permite executar serviços em segundo plano nos navegadores. Graças à combinação dessas ferramentas, as PWA podem ser carregadas quase instantaneamente, mesmo em áreas com pouca conectividade. Além disso, essas aplicações utilizam padrões abertos e são desenvolvidas com linguagens de programação e templates semelhantes aos utilizados em aplicações web tradicionais.

Assim, um dos pilares básicos de uma progressive web app é a conhecida como application shell architecture ou app shell, um modelo que permite criar uma PWA que carrega na tela rapidamente, de maneira semelhante aos aplicativos nativos. A app shell nada mais é do que o esqueleto ou estrutura básica do aplicativo, aquela que permite ativar a interface do usuário e na qual o conteúdo será carregado.

Uma vez que abrimos uma PWA, este pacote básico será armazenado na memória cache do navegador e utilizará um service worker para que funcione. A partir de então, como já teremos os componentes necessários para colocar em funcionamento o app, poderemos abrir novamente a progressive web app de forma rápida e sem necessidade de ter uma conexão à internet nas visitas seguintes, garantindo um maior desempenho e confiabilidade.

Graças a essas tecnologias que permitem sua execução em segundo plano, é possível não apenas usá-las no navegador, mas também adicioná-las ao celular como se fosse um aplicativo nativo, mas ocupando muito menos espaço no telefone do que esses. Afinal, o único que estamos instalando é o service worker encarregado de armazenar cache e garantir que a ferramenta continue funcionando mesmo que a conectividade seja instável.

Quais são as vantagens de uma PWA em relação a outras opções?

Uma progressive web app apresenta inúmeras vantagens em relação aos aplicativos nativos e aos aplicativos web tradicionais. Em relação aos primeiros, são muito mais eficientes ao ocupar menos espaço na memória do telefone e consumir menos dados, tudo isso oferecendo as mesmas funcionalidades e experiência de usuário que os aplicativos nativos.

Além disso, utilizar uma PWA permite testá-la antes de instalá-la (se assim desejar) e economizar o tedioso processo de download e a tomada de decisões relativas à instalação ou desinstalação da ferramenta, acelerando os trâmites e eliminando etapas desnecessárias.

Do ponto de vista dos desenvolvedores, a criação e manutenção de uma progressive web app resulta mais econômica e simples do que no caso das aplicações nativas. Tanto confeccioná-las quanto atualizá-las é muito mais rápido e não é necessário criar uma versão da PWA para cada tipo de dispositivo, uma só basta para ser executada e visualizada adequadamente em todo tipo de tela, por isso também demoram menos para carregar. Nem sequer precisam discernir entre Android ou iOS, pois funcionam em navegadores comuns aos dois sistemas operacionais.

Outros dos motivos para sua adoção é que oferecem uma maior segurança contra malware, pois os atacantes têm mais dificuldade para acessar certas partes do sistema, e que permitem enviar notificações push aos usuários que podem ser exibidas em tela cheia, fazendo com que o usuário perca de vista o navegador enquanto as utiliza.

Como garantir uma boa UX no desenvolvimento da nossa Progressive Web App?

Como mencionamos, uma PWA pode ser uma boa opção para desenvolver nosso aplicativo, mas se não levarmos em conta certos aspectos ao projetá-la com o objetivo de proporcionar uma boa experiência do usuário, é possível que nosso app não tenha o sucesso esperado.

Embora o processo de design de uma PWA possa ser semelhante ao de um aplicativo nativo, existem certas peculiaridades às quais devemos prestar atenção e que reunimos a seguir:

Abordagem nativa

É importante que o design de uma PWA tenha a aparência e sensação de um aplicativo nativo para que o usuário se sinta totalmente familiarizado.

Evitar transições lentas de tela por bloqueios na rede

Os problemas de transição entre telas em uma PWA podem ocorrer quando os usuários tocam em um elemento interativo, têm que esperar e olhar fixamente para a tela em que se encontram antes de serem redirecionados de repente para a nova tela desejada.

Isso faz com que o usuário se sinta incomodado por não receber uma resposta imediata. Por isso, uma PWA deve evitar essa sensação, proporcionando ao usuário a percepção de que todo o aplicativo está armazenado localmente no dispositivo e que apenas o conteúdo é carregado dinamicamente. Para isso, devemos recorrer ao uso de telas esqueléticas.

As telas esqueléticas são basicamente telas vazias que são exibidas após uma interação do usuário e cujo conteúdo é carregado gradualmente como podemos observar no exemplo a seguir:

Mostrar interação

Quando o usuário interage com os elementos da interface do nosso app, deve ter a sensação imediata de que o toque foi reconhecido. Para isso, devemos destacar o elemento selecionado com outra cor diferente ou com alguma animação.

O conteúdo não deve pular enquanto a página carrega

Para que o navegador possa desenhar a tela corretamente mesmo que a imagem não tenha sido carregada, é importante que todas as tags img em nossa PWA tenham a dimensão da mesma definida. Caso contrário, o conteúdo da tela pulará quando as imagens forem baixadas, afetando negativamente a experiência do usuário.

Para evitar isso, podemos mostrar um marcador de posição onde a imagem será exibida através de um quadro cinza ou uma miniatura desfocada como mostrado a seguir:

Manter a posição exata de rolagem da lista

Quando um usuário seleciona um item de uma lista e visualiza seu detalhe, ao pressionar a opção "voltar" deve retornar à página da lista com a mesma posição de rolagem que estava antes de pressionar o item. Isso aumenta o nível de satisfação da experiência do usuário ao interagir, especialmente com listas grandes.

Fornecer opção de compartilhamento

Se a nossa PWA exibir informações que possam ser de interesse para compartilhar, é importante garantir que o usuário possa compartilhar facilmente o que está vendo naquele momento através de um botão que permita copiar a URL para a área de transferência ou compartilhá-la em redes sociais populares de forma simples e ágil.

Desfaça-se do rodapé

O rodapé é algo comum nas páginas web. No entanto, quando desenvolvemos uma PWA a partir de um dispositivo móvel, esse elemento ocupa muito espaço para conter sempre as mesmas informações em todas as páginas.

As aplicações nativas, por essas razões, não possuem rodapé e nossa PWA deve seguir o mesmo exemplo.

Podemos aproveitar esse espaço para adicionar uma barra de navegação com os elementos de navegação mais relevantes.

Usar fontes do sistema

Uma PWA é acessível a partir de muitas plataformas diferentes, as quais têm uma fonte recomendada à qual os usuários já estão acostumados. Fazer uso das mesmas em nossa PWA favorece uma experiência de usuário muito mais habitual e próxima.

Não ocultar entradas de texto pelo teclado

Quando um usuário toca um campo de entrada de um formulário, o teclado se abre para que ele possa inserir texto. Às vezes, o teclado ao abrir-se oculta essa entrada fazendo com que o usuário não tenha visível o texto que está escrevendo, o que é muito incômodo. Em nossa PWA devemos tentar deslocar-nos para diferentes posições na página e depois tocar o elemento de entrada de texto para que este nunca esteja oculto.

Auditando sua PWA com Google Lighthouse

E uma vez que desenvolvi minha PWA, como posso saber se todas as suas funções foram implementadas corretamente? O Google pode nos dar uma mão verificando isso através do Google Lighthouse.

Google Lighthouse é uma ferramenta de auditoria open-source de sites web lançada pelo Google no início de 2018. Utiliza um conjunto de 5 parâmetros para classificar um site web em uma escala de 0 a 100.

Em relação às PWAs, fornece um conjunto de métricas baseadas em requisitos relacionados com a velocidade, segurança, desempenho offline, armazenamento em cache, notificações push, indexação, design responsivo e a experiência do usuário, entre outros.

O Lighthouse testa se sua aplicação:

• Pode ser carregada em condições de rede offline ou instável
• É relativamente rápida
• É servida a partir de uma origem segura
• Utiliza as boas práticas em relação à acessibilidade