Afinal, o que são Progressive Web Apps?
Provavelmente nos últimos meses você já deve ter ouvido falar num tal de PWA. E se você pesquisou um pouco deve ter visto pessoas falando que este é o futuro da web ou até alguns mais radicais e empolgados falando que é o futuro de toda a existência humana. Mas afinal, o que significa este tal de PWA? Para que servem? Onde vivem? Do que se alimentam?
PWA é a abreviação de Progressive Web Apps. A ideia básica aqui é trazer uma experiência ao usuário de um aplicativo nativo para o mundo web. Aplicativos nativos hoje estão restritos às lojas, e hoje temos dois sistemas operacionais que competem no mercado (Android e iOS), onde o desenvolvedor precisa pensar em soluções para atender esses dois públicos.
“PWA não são entregues através de uma loja de aplicativos, eles são apenas websites que tomaram a dose certa de vitaminas.”
- ALEX RUSSELL, ENGENHEIRO DE SOFTWARE DA GOOGLE
Em uma pesquisa divulgada ano passado pelo IBGE foi mostrado que o acesso à internet pelo computador caiu de 88% em 2013 para 76% em 2014. Já o acesso via smartphone subiu de 53% em 2013 para 80% em 201⁴¹. Levando em conta que já fazem três anos desde o último dado divulgado e o panorama atual é fácil supor que o acesso à internet pelo computador deva ter caído ainda mais, sucedido pelo crescente acesso via smartphones — e isso apenas na esfera nacional, que podemos dizer que é um cenário ruim, imagine isso globalmente.
Como mencionado no início deste artigo, PWA prometem trazer para a web uma experiência de apps nativos. Já que sabemos que o uso de smartphones está cada vez mais forte, assim como o acesso à internet, a primeira ideia é a de que o ideal então é criar apps nativos ou híbridos para que o usuário tenha uma melhor experiência. Mas será que esta abordagem está correta? Vejamos por um exemplo já famoso e bem simples:
Suponhamos que você esteja chegando de carro em um shopping e vê um banner anunciando que ao pagar pelo aplicativo da empresa que administra o estacionamento você terá um desconto. A ideia é atrativa, mas ao entrar na loja de aplicativos você percebe que o aplicativo tem 30, 40 ou 50mb. Só isso já consome uma boa parte da banda do 3g de muitas pessoas. Agora imaginemos que para cada local que você vai, uma empresa diferente administra o estacionamento e elas possuem o mesmo esquema de desconto em seus respectivos pagamentos. Gerenciar a banda e o espaço interno do smartphone seria complicado.
Em cenários assim, podemos implementar facilmente um PWA, trazendo a usabilidade de um app nativo na web. Confiança, velocidade e engajamento são os princípios básicos para qualquer aplicação web progressiva. O usuário terá a sensação visual de estar utilizando um aplicativo, poderá usar a aplicação mesmo offline, poderá receber push notifications e adicionar um ícone customizado na área de trabalho do smartphone. E toda esta mágica acontece graças ao novo amigo do desenvolvedor: o Service Worker.
O Service Worker, escrito em JavaScript, é uma espécie de proxy no lado do cliente, que fica responsável por pré-cachear dados que sejam importantes para a aplicação. Isso elimina a dependência da internet, uma vez que depois de acessado uma vez, tudo fica salvo no smartphone e o usuário consegue acessar tais dados mesmo offline, dando a sensação de velocidade em acessar os dados. E é preciso pensar na velocidade a aplicação web precisa ser aberta, pois segundo um estudo, a cada 1s a mais, a taxa de desistência cai em 7%². Abaixo temos um pequeno exemplo de um Service Worker trabalhando. Ele basicamente registra o serviço, “instalando” os arquivos no cache e ativando o cache para que seja visualizado sempre que o usuário acessar a aplicação (existem outros controles no Service Worker como verificação e controle do cache caso exista dados novos, por exemplo):
Outro novo grande amigo do desenvolvedor é o Web App Manifest, um JSON que permite a “instalação” da aplicação web na tela inical do smartphone, além de instalar o ícone da aplicação e oferecer uma splash screen ao abrir a aplicação e mantê-la em fullscreen, tornando a aplicação visualmente igual a um app nativo sem a necessidade de uma loja e poupando megabytes de dados a serem baixados. Outros controles possíveis com o Web App Manifest incluem a rotação de tela e qual tela a aplicação é inicializada.
E como duas últimas dicas, vale a pena dar um confere primeiramente na extensão para Google Chrome, a Lighthouse. Com esta extensão é possível dar uma melhora significativa no seu web app e verificar os recursos que sua aplicação já utiliza dos PWA através de um relatório que é gerado. Para mais informações, basta acessar o site oficial da extensão³. Já a segunda dica você provavelmente já conhece, mas é algo que passa batido para desenvolvedores novatos, que é o site Can I Use⁴, que deve servir como um ajudante do desenvolvedor não só para PWA, mas para qualquer implementação de novas tecnologias web. Nele o desenvolvedor pode verificar se alguma feature nova já está sendo aceita pelos navegadores e quais versões estão aceitando, vale a pena conferir também.
Enfim, esses são apenas os primeiros passos de um Progressive Web App. É claro que num pequeno artigo não é possível cobrir todos os campos de um PWA, mas espero ter passado um overview e além disso deixo um pequeno exemplo de uma aplicação ToDo⁵, onde é possível você testar e ver como o Service Worker e o Web App Manifest se comportam pra valer. Se quiser, no github do Google Chrome temos uma amostra básica⁶ de um Service Worker com uma live demo, também vale conferir.
Links relacionados:
² https://www.wmorais.com.br/single-post/2016/08/16/O-tempo-de-carregamento-ideal-para-um-site
³ https://developers.google.com/web/tools/lighthouse/?hl=pt-br
⁵ https://github.com/fernando-barbosa/PWA-ToDo-Demo
⁶ https://googlechrome.github.io/samples/service-worker/basic/
