Progressive Web Apps For The Win
Tags: progressivewebapp, codelab, frontenddev, webdev
Published: 2020-04-20 18:27:33

![](https://cdn-images-1.medium.com/max/1024/1*eCP6r_VKfqxIeZhaf7_yig.jpeg)

A palavra **progresso** , do latim _“pro” =_ **_para frente_** _+ “ gressus” =_ **_passo_** _,_ está intimamente ligada à tecnologia. Desde o [ENIAC](https://medium.com/eniacvc/how-eniac-continues-to-inspire-our-team-72-years-later-17b767103bd6) até os dispositivos móveis atuais, os componentes e sub-componentes das mais variadas tecnologias estão cada vez mais empoderados e independentes.

Isso não é diferente com os navegadores de internet. Os _browsers_ estão cada vez mais robustos e funcionais. Por consequência dando mais **poderes** aos desenvolvedores e melhores **experiências** de utilização para os usuários.

Você já deve ter ouvido falar de **PWA** , **_Progressive Web App_** …ou _“olha só, que aplicativo leve”._ Vamos entender porque essas aplicações são progressistas em relação às aplicações web comuns.

> Mas, afinal, o que são Progressive Web Apps ?

Progressive Web apps proporcionam experiências que até então eram exclusivas de aplicativos mobile/desktop como: instalação, funcionamento offline e notificações _push_.

![](https://cdn-images-1.medium.com/max/597/1*DYjPm6A9VuxueEU7mD_lPQ.gif)<figcaption>Instalação de um Progressive Web App</figcaption>

Fundamentalmente um Progressive Web App é:

- **Resiliente** : Deve funcionar com conexões offline, seja provendo ao usuário uma experiência offline completamente funcional na aplicação, ou exibindo intencionalmente o aviso de inoperabilidade do aplicativo, diferente do cotidiano aviso offline em navegadores.
- **Rápido** : Responda rapidamente às interações do usuário sem delays. Assim como em um aplicativo nativo no celular ou desktop, a conexão com a internet não deve fazer diferença no tempo de abertura da página. Um PWA deve fornecer esse desempenho confiável, que é o que os usuários esperam de qualquer experiência instalada.
- **Cativante** : Deve proporcionar uma experiência imersiva, tela cheia, sem qualquer traço de navegação cotidiana dos navegadores, assim como um aplicativo mobile ou desktop.

Traduzindo esses princípios em um [checklist](https://developers.google.com/web/progressive-web-apps/checklist) com especificações técnicas:

1. HTTPS é necessário.
2. Paginas responsivas em dispositivos móveis como variados celulares e tablets.
3. Ser _cross-browser._ Deve funcionar no Chrome, Edge, Firefox e Safari.
4. Cada página deve ser acessível por uma URL.
5. Carregamento rápido até no 3G.

De novo, a responsividade na aplicação é **fundamental.** Seja em dispositivos móveis ou aplicações desktop, ela deve estar presente.

![](https://cdn-images-1.medium.com/max/665/1*4WGyJF-e-W3uDg1eTNX0ow.png)<figcaption>Responsividade, Responsividade Everywhere. Fonte: Google.</figcaption>

### Isso é a morte dos aplicativos nativos ?

**NÃO** , calma!

![](https://cdn-images-1.medium.com/max/320/1*sDffB5yjKLGWMA86JIFunA.gif)

**O negócio é que deve dizer que tecnologia precisa ser implementada** , **sempre**. Vai depender do que o usuário precisa fazer, como vai fazer e quando vai fazer. _Claro que ninguém vai reclamar se seu sistema for mobile friendly._

Inclusive, um PWA e um aplicativo não necessariamente se anulam. O Twitter, Outlook, Pinterest, dentre muitos outros possuem ambos, e tá tudo bem por lá.

Alguns cases de sucesso de grande empresas ao implementar um PWA:

- [Aumentos de 370% e 843% de logins e novas inscrições respectivamente, em um ano no Pinterest](https://medium.com/dev-channel/a-pinterest-progressive-web-app-performance-case-study-3bd6ed2e6154)
- [Depois de implementar seu PWA, a taxa de conversão do AliExpress para novos usuários aumentou em 104%](https://litefy.com/blog/aliexpress-com-and-alibaba-com-upgrade-into-a-progressive-web-app/)
- [Engajamento de usuários que adicionaram o Trivago na sua home screen aumentou 150%](https://www.thinkwithgoogle.com/intl/en-gb/consumer-insights/trivago-embrace-progressive-web-apps-as-the-future-of-mobile/)

### Como é por debaixo dos panos

Primeiramente, na sua aplicação web, deve existir um arquivo _manifest.json._ É um arquivo que possibilita ao desenvolvedor controlar como o aplicativo se mostrará ao usuário, como: nome, ícone, dimensões das imagens e cor. Segue abaixo um exemplo:

{% gist https://gist.github.com/JulianoGTZ/44b5800de7a8ca982e0d5f764e018035 %}

Outro personagem fundamental desse tipo de aplicação é o [**Servicer Worker**](https://developers.google.com/web/fundamentals/primers/service-workers/?hl=pt-br) **.** Se trata de um [Javascript Worker](https://www.html5rocks.com/en/tutorials/workers/basics/), que executa em segundo plano na aplicação, separado da página web, lidando com notificações push ou interações com o usuário online ou offline.

Sendo um proxy, com um ciclo de vida totalmente separado da página web em si, ele possibilita ao desenvolvedor controle total sobre as requisições, podendo redirecionar para uma página estática em caso de ausência de conexão à internet, ou através de alguma informação registrada no [banco de dados do navegador](https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API) prover ao usuário alguma funcionalidade que normalmente não seria possível sem internet.

![](https://cdn-images-1.medium.com/max/733/1*CWY3TFk5iTru4rWnXTkpwg.png)<figcaption>Exemplo de funcionamento do Service Worker como um HTTP Interceptor</figcaption>

Há muitas manipulações de promises na utilização do serviceWorker, logo o conhecimento de Javascript é importante. Há muito [conteúdo](https://developers.google.com/web/fundamentals/primers/service-workers/) sobre isso, além de ferramentas robustas de gerenciamento offline da aplicação como o [Workbox](https://developers.google.com/web/tools/workbox/). [Há também geradores de arquivos manifest.json](https://app-manifest.firebaseapp.com/), para facilitar o desenvolvimento.

### Validando sua aplicação

Para saber se está no caminho certo na implementação, o Google disponibiliza uma ferramenta open-source que inspeciona a qualidade da sua PWA chamado Lighthouse. Pode ser instalado facilmente como [extensão do Google Chrom](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=pt-BR)e. **Você pode até usar o Lighthouse em sistemas de integração contínua para capturar regressões**.

![](https://cdn-images-1.medium.com/max/1024/1*fCJ62ApjmZ_F3dtLjKxveQ.png)<figcaption>Lighthouse no Google Chrome</figcaption>

Ao final de sua análise o _Lighthouse_ avalia importantes aspectos da aplicação como performance, acessibilidade e melhores práticas de implementação.

**Esse é o resultado que precisa ser buscado** :

![](https://cdn-images-1.medium.com/max/912/1*4jY0GhmI5v1GzFVj0N3I2A.png)

Dependendo do tamanho da aplicação, a transformação para PWA pode ser um verdadeiro _rebranding_. Vale muito a pena ponderar isso para não causar refatorações absurdas sem necessidade imediata. Por outro lado, nem sempre é necessário ter um aplicativo nativo. O _Trade-Off_ deve ser analisado com cautela.

Fato é que Progressive Web Apps enriquecem a experiência do usuário e a qualidade do produto, sendo um concorrente direto aos aplicativos nativos, saindo muito na frente de sistemas Web que ainda estão limitados a navegação em computadores.

Bora implementar ?

### Links Importantes

[Curso de Progressive Web Apps no Google Codelabs](https://codelabs.developers.google.com/codelabs/your-first-pwapp/#0)

[Portal com vários Progressive Web Apps](https://pwa.rocks/)

[Portal atualizado em tempo real com cases de sucesso com Progressive Web Apps](https://www.pwastats.com/)

* * *