O que é um PWA?

Autor: Evandro Grezeli

 

Progressive Web App (PWA) é uma aplicação WEB que progressivamente torna-se um aplicativo, independentemente do usuário instalar ou não.

Quanto maior a utilização da aplicação pelo seu usuário, maior será a impressão que ele terá sobre a velocidade com que ela é carregada, a resiliência dela a falhas de conexão e acima de tudo, partes dela poderão funcionar mesmo estando offline.

A história do PWA

A história por trás de PWA é interessante, pois está engajada fortemente com o time de desenvolvimento do Google assim como o W3C group,  que por perceber que a experiência do usuário, de forma global, não é tão boa em países de baixo desenvolvimento tecnológico ou com diferenças sociais, fazendo com que nem todos tenham acesso de qualidade a sites, aplicações ou que disponham de um bom recurso para navegação do dia a dia.

Em meados 2014, o conceito de PWA começou a surgir e atualmente ele pode ser considerado como o divisor de águas para HTTP/2.

Para uma PWA funcionar, ela depende de um motor que faz parte deste conceito, chamado Service Worker. Sendo o motor que faz com que tudo funcione e garanta a maravilha que este conceito de desenvolvimento pode entregar.

As aplicações Web comuns partem de uma premissa que indicam que existe alguma conectividade via internet. Desta forma, o clássico vai e vem de requisições HTTP e seus subsequentes, mantêm-se neste padrão, trazendo as vezes uma experiência ruim para o usuário, quando a conectividade é interrompida ou algum dos recursos solicitados não está disponível.

Service Worker

Service Worker foi construído para trazer o equilíbrio nesta experiência Web para o usuário, pois no momento em que a navegação inicia sob a perspectiva do usuário, este serviço registra a origem e o caminho da aplicação solicitada, fazendo com que ao ser consultado pela navegação, ele já possua o registro dessa informação.

Todo evento que corresponde a requisição da rede é despachado para o serviço e as respostas geradas pelo serviço podem sobrescrever o comportamento padrão da rede.

Conceitualmente, o Service Worker ficará entre a rede e a renderização, permitindo que ele promova o conteúdo da página solicitada, mesmo não havendo conectividade. Fantástico!

Em linhas gerais, o Service Worker é um proxy client side escrito em javascript, que realiza o cache das informações do caminho crítico que o servidor envia para o cliente.

É revolucionário?

Sim

Entendo que com isto, é possível transformar para o usuário a experiência de navegação de qualquer site, não apenas como rápida, mas também permitir que sua aplicação funcione mesmo offline!

Para exemplificar:

  1. Acesse esta URL AirHorner do seu celular (pode ser notebook).
  2. Aperte o grande botão vermelho. Sim vai fazer barulho!
  3. Agora coloque o celular em modo avião (ou desligue a placa de rede do notebook). Dessa forma, você estará offline e sem qualquer conectividade
  4. Acesse novamente a URL AirHorner
  5. Aperte de novo o grande botão vermelho.

Se tudo ocorreu conforme o esperado, você conseguiu fazer a iteração no site, mesmo estando offline!

Isto na prática é uma aplicação PWA!

Esse é exemplo simples e ilustrativo.

Porém, aplicando este conceito de forma corporativa, você pode colocar seu negócio muito à frente dos seus concorrentes e obter uma vantagem competitiva.

Um dos cases mais famosos deste tipo de conceito é o FlipKart.

Eles saíram na frente dos demais concorrentes na India, tornando seu portal, um e-commerce, um PWA e aumentando a conversão de vendas em até 70%!

Além deste, também existe o case do The Washington Post.

Um portal de notícias, que utiliza PWA. Acesse do seu celular e você verificará permanecerá um atalho de “aplicativo” na home screen sem ter “instalado” nada. Muito interessante!

Essa é uma revolução na maneira como navegamos na internet.

Você pode estar se perguntando: “- OK! Estou convencido, quero isto para o meu portal!”

Como começar?

Primeiro lembre-se, “um porco de batom continua sendo um porco”, apenas torna ele mais bonitinho (ou não).

Brincadeiras à parte! Não fique bravo!

Pois, antes de pensar em tornar a sua aplicação PWA, veja primeiro se você possui uma boa aplicação Web.

Para facilitar a sua vida e incentivar boas práticas de desempenho na Web, existe uma ferramenta disponibilizada no GitHub dos desenvolvedores do Google chamada Lighthouse, onde através desta ferramenta é possível extrair notas de qualidade da tua aplicação, possibilitando indicar quais são os pontos que devem ser melhorados para tornar a sua aplicação apta a começar a ser um PWA.

Abaixo, está o “Quadrante Mágico PWA”, que reúne as principais regras para ter uma aplicação pronta para ser PWA:

Quadro de Maturidade de PWA

Até a próxima!

Sobre o Autor

Evandro Grezeli

Evandro Grezeli

Evandro Grezeli está à frente das áreas de Inovação de TI, atual CTO da Yaman, sendo responsável pelo desenvolvimento do novo portfólio de produtos direcionados à TI Digital para a oferta de SaaS, de Produtos Digitais, desenvolvendo produtos com foco em automação para eficiência operacional e aprimoramento técnico da infraestrutura de TI dos clientes, e de Soluções de TI.

 

Home