O que é PWA? De forma direta, PWA é uma sigla para Progressive Web Apps ou Aplicação Web Progressiva, numa tradução livre.
De uma maneira bem resumida, PWA visa proporcionar uma experiência de uso de uma página web pelo smartphone semelhante a de um aplicativo mobile.
Quer saber mais? Neste artigo abordarei tudo o que há de mais relevante sobre o universo de PWA, continue a leitura.
Por que precisamos de PWA?
É fato que houve um crescimento exponencial de usuários de smartphones na última década. Atualmente, mais de 60% da web acontece na palma de sua mão, via dispositivos mobile (Dados retirados da pesquisa de uso mobile do Statista).
E os motivos pela qual precisamos de PWA são dos mais variados:
- portabilidade
- limitações de hardware
- fácil acesso à web
- aumento do número de serviços on-line
Com mais usuários nos smartphones, a otimização da experiência do usuário nestes dispositivos é fundamental.
Para empresas menores, que geralmente não têm aplicativos nativos devido a restrições orçamentárias ou de tempo, o uso de PWA é uma grande oportunidade para conquistar clientes, oferecendo uma boa experiência dentro de suas possibilidades.
Alguns usuários podem preferir um aplicativo em versão Web para evitar o download e a instalação em função de restrições de hardware ou memória de seu aparelho.
Dependendo do setor de atuação da empresa, esse pode ser um fator relevante a ser levado em conta.
Características de um PWA
De acordo com o Alex Russell, do Google, um Progressive Web App deve ser:
Progressivo: Funcionar para qualquer usuário, independentemente do navegador, pois é criado com aprimoramento progressivo como princípio fundamental.
Responsivo: Se adequar a qualquer formato: desktop, smartphone, tablet ou o que for inventado a seguir.
Independente de conectividade: Aprimorado com service workers para trabalhar off-line ou em redes de baixa qualidade.
Semelhante a aplicativos: Parecer com aplicativos, com interações e navegação de estilo de aplicativos, pois é compilado no modelo de shell de aplicativo.
Atual: Deve estar sempre atualizado graças ao processo de atualização do service worker.
Seguro: Fornecido via HTTPS para evitar invasões e garantir que o conteúdo não seja adulterado.
Descobrível: Poder ser identificado como “aplicativo” graças aos manifestos W3C e ao escopo de registro do service worker, que permitem que os mecanismos de pesquisa os encontrem.
Reenvolvente: Facilitar o reengajamento com recursos como notificações push.
Instalável: Permitir que os usuários salvem os aplicativos mais úteis em suas telas iniciais sem precisar acessar uma loja de aplicativos.
Linkável: Compartilhado facilmente por URL, não requer instalação complexa.
Como funciona um PWA?
Um PWA possui alguns componentes técnicos que trabalham juntos para fazer o aplicativo web funcionar como deveria, são estes:
Service Worker
Nossos aplicativos web conversam diretamente com a internet e, se não houver rede, não tem aplicativo web.
No primeiro acesso, o service worker armazena os recursos necessários no cache do navegador e quando o usuário visitar o aplicativo novamente, o service worker verifica o cache e retorna com o resultado antes mesmo de verificar a rede.
Caso não saiba, um service worker é um componente de código JavaScript que funciona como um proxy entre o navegador e a rede.
Ele gerencia as notificações por push e ajuda a criar o aplicativo web offline usando a API de cache do navegador.
Isso pode turbinar o desempenho do seu aplicativo, esteja o dispositivo conectado ou não à Internet.
Manifest
O arquivo Manifest é um arquivo JSON que contém as informações do seu aplicativo, como o ícone a ser exibido quando adicionado à tela inicial, o nome abreviado do aplicativo, a cor do plano de fundo ou o tema.
Um exemplo do arquivo Manifest.json:
{
"short_name": "Gabba",
"name": "Gabba Hey",
"icons": [
{
"src": "/images/gabba.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "/images/icons-512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/home/?source=pwa",
"background_color": "#3367D6",
"display": "standalone",
"scope": "/home/",
"theme_color": "#3367D6"
}
HTTPS
Como os service workers interceptam as solicitações de rede e podem modificar os resultados, o PWA requer o uso de HTTPS.
Não há nada de especial aqui, mas é importante ressaltar a presença do protocolo HTTPS por motivos de segurança.
Quais as vantagens do PWA?
Existem inúmeros pontos positivos na utilização de ferramentas progressivas de web, como:
- Podem ser usados independente do navegador ou dispositivo;
- Funcionam offline graças ao service worker;
- Permitem o envio de push notifications;
- Permite adicionar um ícone na tela inicial do dispositivo;
- Atualiza automaticamente;
- Experiência similar a um aplicativo nativo.
Existe alguma desvantagem ao usar PWA?
Tudo depende da utilização, pode não ser o melhor uso quando você necessitar de algum requisito, como:
- NFC
- Bluetooth
- Suporte cross-browser (cada navegador é um universo diferente);
- Não estarão na loja de aplicativos dos sistemas operacionais
Como já dito, tudo depende de como será aplicado o PWA. E se você estiver trabalhando em um grande projeto, não há a necessidade de optar entre uma coisa ou outra.
Você pode utilizar tanto um aplicativo nativo quanto um PWA juntos, como fazem a Microsoft e o Facebook, por exemplo. São experiências similares, porém diferentes, para públicos diferentes conforme suas necessidades.
Onde encontrar bons exemplos de PWA?
Você pode encontrar bons exemplos de PWA para fins de estudo ou uso profissional aqui.
Quer saber mais sobre o mundo do desenvolvimento web? Confira este artigo sobre a origem e o futuro do front-end!
