Vida longa ao PWA
Tags: pwa, javascript, web, programming
Published: 2021-07-14 15:22:44

Hoje o assunto é sobre PWA. PWA (Progressive Web Application) é um tipo de aplicação construída com as tecnologias da web (HTML, CSS e JS) com objetivo de funcionar em qualquer plataforma ou dispositivo, dependendo apenas de um navegador de internet compatível.

Os PWAs são um marco da história da internet, pois possibilitam aos desenvolvedores proporcionar uma experiência de uso de um app utilizando o navegador. A web é muito utilizada para pesquisa de conteúdo e serviços, e nem todos esses estão instalados como apps no dispositivo do usuário.

### Por que construir um PWA

Vamos analisar os principais pontos que um PWA pode se diferenciar de um site comum.

![Vantagens PWA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eumn5ryj3zrn5b3o8zfi.jpg)

#### Velocidade

Sites rápidos aumentam a capacidade de captura de leads consideralmente.

#### Disponibilidade

Um PWA que segue os requisitos pode funcionar em diversos navegadores e atingir uma massa de clientes muito maior, escrevendo apenas um código para todas os mais diversos dispositivos.

#### Adaptabilidade

Uma aplicação adaptável e responsiva construída para funcionar em celulares, tablets ou computadores possibilita que mais usuários consumam seu produto/serviço.

#### Aplicativo instalável

Se o cliente desejar, pode instalar seu app com apenas um clique, durante a navegação na sua aplicação. Como a base de código é pequena e utiliza o browser do dispositivo, as instalações são pequenas (medidas em Kbs) e rápidas. Ao aproveitar bem os recursos do PWA, você pode construir aplicativos com excelente performance de resposta e execução.

#### Offline-first

Seu app pode ter funcionalidades que continuem atendendo determinadas demandas do cliente, mesmo que ele esteja com baixa velocidade ou mesmo sem internet.

#### APIs do dispositivo

Por vezes, sua aplicação demanda alguns recursos que precisariam de um aplicativo nativo. Funcionalidades que dependem de armazenamento de arquivos, controle de audio, acesso ao GPS, contatos ou mesmo notificações, são implementáveis numa aplicação PWA.

### Casos de sucesso

Os PWAs estão há um bom tempo no mercado, com resultados demonstráveis na prática. O google montou alguns estudos de casos, que você pode ver neste [link](https://web.dev/progressive-web-apps/#case-studies).

![Google photos](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sga0xybi2kupjdegd6nm.jpg)

O [Google Photos](https://photos.google.com) é um bom exemplo de PWA.

Muitos dos casos mostram como o percentual de conversão aumentou depois da mudança. As grandes e mais diversas empresas estão utilizando amplamente os recursos de PWA para tornar suas aplicações mais amigáveis ao usuário.

![Empresas que usam PWA](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xjbp41j1b53g55vrmvma.png)

### Por onde começar

Primeiro, você precisa entender que PWA não é uma linguagem de programação, mas uma metodologia de desenvolvimento. Os navegadores de internet adotaram algumas [APIs](https://blog.logrocket.com/project-fugu-5-new-apis-to-try-out-in-your-pwa/) e [padrões](https://www.w3.org/TR/appmanifest/) para estas aplicações.

Você pode começar utilizando um boilerplate com algumas configurações como o [Juggernaut](https://github.com/luizalabs/juggernaut), por exemplo.

Caso você já tenha uma aplicação rodando, também é possível ir migrando aos poucos e um bom parâmetro do que você pode melhorar é a ferramenta DevTools do Chrome. Ela aponta problemas no seu código e como corrigí-los.

![Chrome DevTools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qw9qzzsvj3revxvgyzlb.png)

Vale resaltar que a adoção dos PWAs só não é maior, devido a uma oposição forte da empresa Apple, que é muito fechada nos seus dispositivos. A preocupação deles no momento é de perder parte do lucro que é imposto de taxação sobre cada venda feita nos apps de sua loja (App Store).

---

Se você gostou, me segue para novos posts e deixa o like nesse post.

Obrigado pela leitura! Espero que possa ter ajudado. 🚀