O que é PWA? Saiba quando e como utilizar essa tecnologia

PWA, sigla para Progressive Web App (aplicativo web progressivo), é um site desenvolvido para parecer e se comportar como um aplicativo nativo independente da plataforma em que é utilizado.

Neste texto, apresentamos quais são as principais características dos Progressive Web Apps, suas vantagens e desvantagens tanto para desenvolvedores quanto para empresas e usuários, sua compatibilidade e principais frameworks para desenvolvimento.

Navegue pelo conteúdo:

- Progressivo: funciona para todos os usuários, independente do navegador escolhido, já que são construídos com base nos princípios de melhoria progressiva (vale destacar que navegadores mais antigos ou desatualizados podem não ter suporte para instalação de progressive web apps; ainda assim, permitem que o usuário navegue normalmente na página);

- Responsivo: pode ser desenvolvido para se adaptar a qualquer formato de tela;

- Offline: a partir do momento em que o PWA é baixado para um dispositivo, parte de seu conteúdo pode ficar disponível ao usuário independente de conexão com a internet (as funcionalidades e conteúdos que podem ser armazenados para uso offline dependem da natureza do aplicativo);

- Semelhante a aplicativos nativos: estética e usabilidade muito parecidas com as de aplicativos nativos;

- Atualizado: graças ao uso dos Service Workers (voltaremos a falar deles abaixo), o PWA é automaticamente atualizado, sem depender da ação do usuário;

- Seguro: utiliza protocolo HTTPS;

- Descobrível: é indexado por ferramentas de busca (como o Google);

- Reenvolvente: por conta de permitir elementos como notificações push, aumenta as chances de que o usuário se lembre do conteúdo e o acesse novamente;

- Instalável: pode ser baixado e instalado nos dispositivos a partir do navegador, sem nenhum processo envolvendo lojas de aplicativos;

- Linkable: é facilmente compartilhável por meio de links.

O usuário pode encontrar seu progressive web apps seguindo exatamente os mesmos passos utilizados para encontrar um site comum:

• Por meio de uma pesquisa em mecanismos de busca (como o Google);
• Pelo endereço (URL) direto;
• Através de um link compartilhado.

Após encontrar o PWA, os usuários podem continuar o acessando como se fosse um site responsivo comum. Mas caso desejem – se for uma página que acessem com muita frequência, por exemplo, ou se precisarem utilizar o conteúdo mesmo estando offline –, têm a opção de baixar o PWA (o que acontece através do próprio navegador) e passar a utilizá-lo como se fosse um app, acessando-o a partir de um ícone em sua tela inicial.

Leia também: Portfólio para desenvolvedores – dicas de recrutadores

‍

O Service Worker é o que torna a tecnologia de PWA possível. Ele consiste em scripts que possuem ciclo de vida próprio e que o navegador executa em segundo plano, independente da Web ou de ações do usuário.

Os service workers são proxys de rede programáveis e, por isso, possibilitam controlar como as solicitações de rede da página são gerenciadas. Entre as funcionalidades possibilitadas por eles estão a notificação push, a sincronização em segundo plano e as experiências offline.

Para empresas

- Economia: os custos de produção, distribuição e manutenção são muito menores quando comparados aos de apps nativos;

- Desenvolvimento rápido;

- Menos etapas (e, portanto, barreiras) para download;

- Não depende de lojas de aplicativos.

Para desenvolvedores

- Depende basicamente de HTML, CSS e JavaScript;

- Permite reutilização de mesmo código-fonte para plataformas diferentes;

- Desenvolvimento mais rápido.

Para usuários

- Responsivo;

- Download facilitado;

- Usabilidade muito semelhante à de aplicativos nativos;

- Acesso a conteúdos offline;

- Ocupa menos espaço de armazenamento que aplicativos comuns;

- Sempre atualizado.

- Descoberta descentralizada (não está em lojas de apps);

- Altamente isolados: difícil compartilhamento de conteúdo (integrações) entre diferentes PWAs ou entre PWAs e aplicativos;

- Performance pode ser inferior à de apps nativos (embora ainda existam poucos estudos sobre o impacto disso em relação à percepção do usuário);

- Compatibilidade parcial com Safari, navegador da Apple.

O número de navegadores compatíveis e a amplitude dessa compatibilidade têm crescido bastante nos últimos anos – especialmente de 2018 para cá. Hoje, Chrome, Edge, Firefox e Opera são os que oferecem maior suporte aos service workers (base técnica para funcionalidade do PWA).

Todos os detalhes e atualizações relacionados à compatibilidade – além de outras informações e documentações – podem ser vistos neste site.

- Vue.js: possui código e conceitos simples, o que diminui a curva de aprendizagem.  Além disso, sua adoção poder ser progressiva – como descrito no próprio site do framework, o Vue é um ecossitema que pode ser adotado de forma incremental, progredindo de uma biblioteca até um framework completo, com grande variedade de features;

- React: possui uma grande comunidade, ecossistema extensivo, uma curva de aprendizagem moderada e oferece alto grau de flexibilidade e escalabilidade;

- Angular: é um dos maiores frameworks para frontend e, a partir da versão 5, passou a incluir elementos que facilitam o desenvolvimento de Progressive Web Apps.

Qual a diferença entre um progressive web app e um site responsivo?
Um Progressive Web App funciona como um site responsivo caso o usuário o acesse apenas pelo navegador e nunca instale-o em seu dispositivo. Mas diferente de um site responsivo, ele pode ser baixado e, assim, ficar disponível como um ícone na página inicial dos dispositivos.

A partir do momento em que é baixado, o PWA possibilita envio de notificações, acesso offline aos conteúdos e outras funcionalidades descritas nos tópicos Características e Vantagens.

Progressive Web Apps são indexáveis por mecanismos de busca?
Sim! Por isso, é importante empregar técnicas de SEO em sua construção.

Em quais casos o PWA não é recomendável?
Os Progressive Web Apps não são sua melhor escolha quando:

- A presença em lojas de aplicativos é importante;

- O funcionamento do aplicativo depende muito do acesso a elementos de hardwares dos dispositivos (como microfone, câmera e geolocalização – lembrando que PWAs conseguem SIM acessar tais elementos na maioria dos casos, mas isso ainda pode variar de acordo com sistemas operacionais);

- Se o seu negócio for baseado em custo por download;

- Se o aplicativo precisar de integração com aplicativos de terceiros e/ou com funcionalidades da plataforma, tanto iOS quanto Android (como meio de pagamento e FaceID).

Em quais casos o PWA é a melhor opção?
As características e vantagens do PWA apresentadas acima já dão uma ótima base para responder essa questão. Ainda assim, conhecer alguns exemplos específicos em que os Progressive Web Apps se mostram como a melhor opção pode ajudar a tomar essa decisão.  As situações mais propícias são:

- O orçamento disponível é pequeno (aqui, vale a ressalva de que a relação entre investimento necessário e tipo de tecnologia sempre depende de muitas variáveis, como especialidade da equipe envolvida e tipo de app a ser criado);

- O aplicativo precisa conseguir chegar a um número amplo de pessoas (como os PWAs são, antes de mais nada, páginas web, podem ser encontrados através de pesquisas em mecanismos de busca como o Google, exigem menos etapas para serem baixados e ocupam pouca memória nos dispositivos – por isso, têm mais chances de chegar a um público maior mesmo com pouco investimento e sem um nome já conhecido);

- Ser indexado pelos mecanismos de busca é importante;

- Compatibilidade em variadas plataformas é essencial;

- Vários updates são necessários em um curto período de tempo;

- É desejável que o download do app possua poucas etapas, evitando desestimular os usuários.

Se tiver mais alguma dúvida ou comentário sobre Progressive Web Apps, compartilhe com a gente nas redes sociais!

Na Caiena unimos grandes mentes e autonomia para criar soluções de alto nível. Com tecnologia, design e entusiasmo melhoramos a vida de nossos talentos e das pessoas para quem criamos. Quer fazer parte desse time? Fique de olho nas nossas vagas.