Progressive Web Apps: uma alternativa aos aplicativos nativos

Se você costuma usar mais o seu smartphone do que o seu notebook, sabe como é chato precisar instalar cada vez mais aplicativos pesados e frequentemente gastar seu pacote de dados com atualizações.

Os browsers modernos têm trabalhando em suportar as PWAs (progressive web apps), aplicações web que se comportam como um aplicativo comum, mas abrindo mão da instalação no dispositivo do usuário.

Na visão das pessoas desenvolvedoras, PWAs são uma excelente alternativa aos aplicativos nativos, pois oferecem vantagens muito atrativas, como:

• Eliminar a necessidade de instalar aplicativos no dispositivo;
• Possibilitar atualizar automaticamente sem precisar da intervenção do usuário;
• Aproveitar o sistema de caching do browser, reduzindo o número de requisições ao servidor;
• Ter acesso a recursos do dispositivo como GPS, câmera, acelerômetro, etc, uma vez que o browser já possui tais permissões;
• Oferecer uma experiência de usuário igual ou muito semelhante aos apps nativos;
• Ser compatível com todos os principais sistemas operacionais;
• Também poder ser instalado em desktop como se fosse uma aplicação nativa,
• Reduzir absurdamente o tempo de desenvolvimento.

Quem está usando?

São muitas as possibilidades em desenvolvimento usando essa abordagem. Grandes players do mercado, como AliExpress, Uber, Instagram, Twitter, AirBnB, Spotify e muitas outras já migraram suas interfaces web para aplicações progressivas.

O Uber, por exemplo, permite solicitar corridas sem precisar instalar nenhum aplicativo nativo. Oferece menos recursos que o app oficial, mas torna possível acompanhar o trajeto via GPS, fazer microtransações, receber notificações push e manter o cadastro.

Gostei. Como começar?

Antes de começar a implementar de fato, é importante entender o que caracteriza uma aplicação web progressiva.

Confiável: A aplicação precisa ter alta disponibilidade, ser acessível em conexões lentas (2G, por exemplo) e usar protocolo HTTPS.

Prático: Deve oferecer uma navegação simples e interativa. Um grande exemplo é usar transições entre telas ao invés de forçar o scroll do usuário.

Responsivo: O aplicativo deve oferecer a mesma experiência em qualquer dispositivo.

“Uma aplicação progressiva deve ser como um líquido: se adapta a qualquer vaso em que for despejado.”

Mahesh Haldar, Bits & Pieces

Instalável: deve permitir ao usuário a mesma experiência que um app nativo. Logo, deve poder ser instalado na homescreen do dispositivo.

Engajável: deve fazer o usuário engajar no app. PWAs têm acesso a push notifications e recursos do dispositivo; funcionam offline, etc. Isso deve ser usado para engajamento.

Offline: uma PWA deve fazer uso do cache para promover interações sem a necessidade de manter conectividade ou depender de resposta do servidor.

Como transformar minha aplicação web em offline?

O grande segredo das PWAs são os service workers: recursos providos pelos navegadores que funcionam como um proxy entre o servidor e o cliente.

Basicamente, funciona assim:

1. O usuário acessa sua aplicação pela primeira vez. O cliente busca os arquivos no servidor.
2. O service worker intercepta essa requisição e verifica se esses arquivos devem ser cacheados. Se sim, verifica se já existe uma cópia cacheada desses arquivos.
   1. Se sim, devolve ao cliente a cópia cacheada.
   2. Se não, busca no servidor, armazena o resultado em cache e devolve ao cliente.

É essencial que todos os elementos de frontend sejam cacheados na aplicação por meio do service worker, permitindo ao usuário navegar de forma offline, justamente por não precisar consultar no servidor.

Vamos codar? Primeiro, precisamos criar o arquivo que registra o service worker e checa se o navegador suporta essa funcionalidade:

Na linha 1, iniciamos o registro de `serviceWorker` se estiver disponível na variável global `navigator` (recursos do browser).

Na sequência (linha 2 e 3), dizemos ao navegador que queremos registrar um service worker configurado no arquivo `service-worker.js`.

Caso o navegador consiga localizar, interpretar e registrar o worker, exibimos uma mensagem de sucesso no console (linhas 4 a 6). Caso contrário, exibimos uma mensagem de alerta (7 a 8).

Na linha 1, é onde setamos os arquivos que devem ser interceptados e cacheados pelo service worker. O caminho deve ser relativo ao caminho raiz do aplicativo. Por exemplo, se quisermos cachear www.impulso.network/assets/logo.svg, então adicionaremos ao array `assets/logo.svg`

Na sequência (linha 5), definimos um nome para nosso armazém de dados cacheados. Se uma mudança drástica for realizada, é importante alterar também esse nome.

Quando o navegador aciona o service worker pela primeira vez, é disparado o evento install. Nessa etapa (linhas 7 a 17), lemos o armazém e adicionamos os arquivos da variável `files` em cache. Em seguida, o navegador dispara o evento activate, que trataremos mais tarde.

Em seguida, é acionado o evento fetch, onde a mágica acontece. Nas linhas 19 a 25, interceptamos a requisição ao servidor e verificamos se a url é cacheada pelo service worker. Se for, devolvemos a versão armazenada. Senão, completamos a requisição e devolvemos ao cliente.

Por fim, caso haja qualquer modificação nesse arquivo, é disparado o evento activate. Segundo a documentação oficial do Chrome, se houver uma diferença de até mesmo um byte no arquivo do service worker em comparação ao que ele possui, ele o considera como novo. Tratamos esse evento nas linhas 27 a 39, onde deletamos do cache qualquer arquivo que tenha sido removido da variável `files`.

Dessa forma, possibilitamos que a aplicação funcione de forma offline, pois armazenamos em cache os arquivos que antes buscávamos no servidor a cada requisição.

Como o usuário vai instalar?

A aplicação, mandatoriamente, deve permitir ao usuário instalar em sua homescreen. Precisamos informar ao navegador a informação do nosso app e isso é feito através do arquivo manifest.json.

Nesse arquivo, indicamos o ícone do app, a url de início, as cores e o nome do app. Existem mais opções que você pode consultar aqui.

Dessa forma, o navegador irá sugerir a um usuário recorrente que instale a PWA (ao invés do aplicativo nativo).

Para finalizar, para que tudo funcione, precisamos chamar o nosso Manifest e o nosso script de registro no nosso index.html.

Bônus: Caso você tenha interesse em qualidade da sua PWA visando performance, segurança e usabilidade, recomendo utilizar a Lighthouse, ferramenta aberta do Google para auditoria de aplicações progressivas.

Dica do Luiz 😛