Progressive Web Apps, PWA, é uma metodologia de desenvolvimento que busca transformar a experiência vivida pelo usuário em dispositivos mobile e desktop, fazendo com que soluções digitais apresentem características de aplicações nativas, consumindo menos dados e sem a necessidade de ser feita a instalação.
Em 2015, logo após a Google identificar que a maioria dos sites estavam sendo acessados por dispositivos móveis, surgiu uma oportunidade de oferecer funcionalidades parecidas com a de aplicativos nativos. E isso trouxe à tona o PWA, definido pela Google como confiável, engajante e rápido.
E a proposta é justamente essa, fazer com que seus usuários tenham uma melhor experiência com Web Apps e que conteúdos possam ser compartilhados de uma forma mais democrática, sendo acessíveis a pessoas com todos os tipos de dispositivos e conectividades.
Sendo considerado como o futuro do desenvolvimento Web, o PWA também é mais barato para ser desenvolvido do que aplicações nativas. Confira abaixo o que é e o por que você deve dar uma maior atenção a este tema.
O que é PWA?
PWA é uma metodologia de desenvolvimento que busca trazer para as soluções digitais, acessadas por navegadores em um dispositivo mobile e desktop, a mesma experiência vivenciada por um usuário em um aplicativo nativo.
Em um artigo da Microsoft, os autores definem brevemente o que seria o PWA:
[..] Progressive Web Apps são somente bons websites que podem se comportar como aplicativos nativos — ou, talvez, Progressive Web Apps são somente bons apps, alimentado pelas tecnologias Web e entregues com a estrutura Web.
Quais são as características de um PWA?
Para entregar experiência valorosa ao usuário, os PWAs possuem algumas características, listadas pelo Google Developers, que são definitivas na construção de sua metodologia:
- Progressivo: Qualquer usuário pode ter acesso ao conteúdo disponível, independente do navegador que ele esteja usando.
- Responsivo: Tem a capacidade de se adequar a qualquer dispositivo: desktop, celular ou tablet.
- Independente de conectividade: Possui tecnologias que garantem ao usuário o funcionamento das principais funcionalidades da aplicação sem a necessidade de conectividade. Também é otimizado para trabalhar em redes de baixa qualidade.
- Semelhante a aplicativos: A navegação e interação com o usuário é semelhante a de um App, já que utiliza a mesma estrutura visual e de percepção.
- Atual: Está sempre atualizado devido a um serviço que roda em plano de fundo.
- Seguro: Por conta do HTTPS (criptografia na conexão dos dados), as informações partilhadas em uma aplicação PWA não podem ser adulteradas e tem pouco risco de invasão.
- Descobrível: Devido ao manifesto W3C, as aplicações em PWA são reconhecidas pelos mecanismos de busca como um App, sendo facilmente encontrados.
- Reenvolvente: Com recursos como notificações push, entre outras, é possível engajar com o usuário e fazer com que ele se interesse em utilizar a sua solução.
- Instalável: Mesmo não tendo a necessidade de ser baixado em uma loja de aplicativos, um PWA garante com que o usuário possa colocar o ícone da aplicação em sua tela principal, se comportando de forma semelhante a um App depois disso.
- Linkável – Para que o usuário tenha acesso a ele, basta um link, reduzindo o atrito das lojas de aplicativos.
As tecnologias por trás do PWA
A proposta do PWA é fazer com que os websites possuam as funcionalidades dos apps nativos, como funcionamento offline, ícone na tela principal do dispositivo usado, atualização automática e notificações push, sem a necessidade de que o usuário baixe todos os dados da aplicação.
Falando de uma forma mais técnica, a metodologia PWA é um aperfeiçoamento das tecnologias Web. Ele também pode ser visto como uma combinação ou uma evolução híbrida entre sites e aplicativos mobile.
Existem algumas tecnologias Web por trás de toda metodologia PWA, elas são:
- Service Worker
- Cache API
- Notificações Push
- Web App Manifest
Mesmo que você não seja um desenvolvedor, ter noção do que essas tecnologias são e o saber como elas agem dentro do PWA é muito importante para conseguir compreender o potencial que ele apresenta. Abaixo irei explicar a vocês, de maneira resumida, como cada uma se comporta e o que ela influencia nessa metodologia.
1. Service Worker
O Service Worker é um sistema que intercepta as requisições da aplicação, e guarda os resultados no lado do cliente. Isso permite uma velocidade de consumo dos dados extremamente veloz, e permite que a aplicação funcione offline. Atua como uma espécie de cache, como já conhecemos.
2. Cache API
Cache API é uma forma de se armazenar as requisições feitas localmente, para que quando solicitadas novamente, elas sejam mais performáticas. Esse conceito consiste em salvar uma cópia de uma requisição ou uma rota específica de forma a utilizar ela novamente para que seja possível consumir posteriormente mais uma vez, sem a necessidade de fazer uma nova requisição.
3. Notificações Push
Provavelmente, esta seja a ferramenta na qual estamos mais familiarizados, visto que é usada por todos os Apps para nos alertar sobre atualizações, notícias, sinalizações de falta de uso do aplicativo e demais informações.
As notificações Push são usadas para notificar os usuários de determinados serviços sobre diversas funcionalidades. Elas são comuns em Apps mobile, e em sua maioria informam alguma novidade. Um exemplo dessa tecnologia são as mensagens de WhatsApp que são notificadas no seu celular ou quando alguém curte a sua foto no Instagram.
Recentemente, esta tecnologia vem sendo implementada em Web Sites, buscando criar uma maior interação com o público, sem que ele tenha a necessidade de baixar algum aplicativo em uma loja de aplicativos.
4. Web App Manifest
Segundo o Web Fundamentals da Google, o Web App Manifest é um documento que tem como finalidade padronizar as aplicações Web, o que possibilita que o usuário tenha como adicionar um ícone do site em sua tela inicial, sem ter a necessidade de baixar um aplicativo.
Ao incluir esta tecnologia em seu projeto, o seu usuário tem acesso mais rápido ao seu conteúdo, o que faz com que toda a sua experiência seja mais enriquecedora. Embora possa ser usada em qualquer site, o Web App Manifest é obrigatório dentro do PWA.
Confira 21 exemplos de Progressive Web Applications
Por que você deveria dar mais atenção ao PWA?
A metodologia PWA é enriquecedora não somente para o usuário, mas também para a empresa que a adota. Isso porque ela depende de ferramentas bastante utilizadas, como JavaScript, o que garante sua facilidade em ser adaptado para outras plataformas e navegadores.
Desde 2015 a Google vem mostrando um grande interesse na metodologia, e, recentemente, passou a disponibilizar aos usuários o acesso aos Web Apps pela Play Store. Além disso, algumas empresas conhecidas já começaram a utilizar PWAs e têm recebido retornos positivos.
O Pinterest, por exemplo, lançou em 2018 um PWA, melhorando o engajamento dos usuários com o site. Segundo as métricas do negócio, o tempo de permanência aumentou em 40% em comparação com o uso do App, e ainda melhorou em 44% a receita gerada por anúncios e em 60% os contratos principais.
Além de tudo isso, o PWA pode ser um forte aliado na inclusão digital e na democratização de conteúdos, visto que sua sua otimização e menor uso de dados garante que lugares onde a internet é de baixa qualidade tenham a capacidade de acessar soluções que usam a metodologia.
A característica Progressiva e Responsiva dos PWAs, fazem com que qualquer usuário tenha acesso ao conteúdo disponibilizado na solução, independentemente do navegador no qual ele está, e ainda se adequa a qualquer dispositivo móvel, sem ter a necessidade de uma estratégia de design.
Essa pode ser vista como uma das mais importantes consequências do PWA, já que a maior parte do mundo ainda possui uma qualidade ruim de internet e não tem acesso a dispositivos topo de linha. Por isso, o baixo uso de dados móveis e a não utilização de um grande espaço da memória são característica essenciais para valorização e democratização da experiência do usuário.
Para que você consiga visualizar ainda melhor e de uma maneira mais objetiva, confira abaixo as vantagens e desvantagens do uso dessa metodologia.
Vantagens
- O tempo e complexidade do desenvolvimento de um PWA é muito menor se comparado a um App. Isso porque é desenvolvido em tecnologias nativas da Web, o que facilita até mesmo na busca de profissionais qualificados, em detrimento de desenvolvimento mobile nativo.
- As tecnologias utilizadas facilitam o acesso do usuário, consequentemente, há um aumento do uso da sua aplicação, visto que não existe uma necessidade de ser instalada.
- Tem foco em performance e otimização, permitindo que pessoas em zonas de baixa qualidade de conexão consigam acessar a solução.
- O PWA trabalha com Cash Local, dessa maneira as pessoas podem acessar as principais ferramentas da aplicação, mesmo estando offline.
Desvantagens
- A principal desvantagem encontrada no PWA são consequências de limitações de permissões, pois, se for necessário o uso de muitas renderizações, o desenvolvimento de um App pode ser melhor indicado.
- Outra desvantagem está na resistência da Apple em aderir o PWA. Ela começou a dar pequenos passos de apoio a metodologia, mas ainda não se compara aos esforços feitos pela Google e Microsoft. Apesar disso, essa adoção lenta não atrapalha a experiência dos usuários no iOS.
Dados de Mercado
Cases de empresas que aderiram ao PWA
Embora seja uma metodologia muito nova, muitas empresas estão aderindo ao Progressive Web Apps, em busca de proporcionar uma melhor experiência ao seu usuário, e por poder tornar o engajamento com o site mais lucrativo.
Abaixo você pode conferir três cases do uso de PWA, e se você quiser conferir mais cases como esses é só conferir o nosso artigo: 21 Exemplos de Progressive Web Apps.
1. Twitter Lite
Em 2017 o Twitter lançou o Twitter Lite, uma aplicação PWA, que se tornou padrão para todos os usuários do mundo. Além de proporcionar uma melhor experiência ao usuário, aqueles que se encontravam em regiões de conexão de baixa qualidade foram beneficiados com uma aplicação mais leve e mais rápida.
Essa mudança acarretou em:
- Aumento de 75% nos Tweets enviados
- Diminuição de 20% na taxa de rejeição
- Aumento de 65% nas páginas por sessão
2. OLX
A OLX, página de classificados online, opera em mais de 40 países e possui mais de 90% de seus usuários em dispositivos móveis. Pensando nisso, em 2016, ela trouxe uma aplicação PWA para seus usuários na Índia, explorando as funcionalidades dos Apps nativos, como notificações Push, e criando uma experiência mais valorosa a quem estiver navegando em sua solução.
O uso do PWA acarretou em bons resultados:
- Aumento de 250% no reengajamento
- Redução de 80% nas taxas de rejeição
- Aumento de 146% na CTR (taxa de cliques) em anúncios
- Redução de 23% no tempo gasto dentro da página
3. Flipkart
Talvez você nunca tenha ouvido falar em Flipkart, mas este é o maior site de comércio eletrônico da Índia. Recentemente eles lançaram o Flipkart Lite, utilizando a metodologia PWA, para otimizar e criar uma experiência mais rápida ao seu usuário.
O interessante de tudo isso é que, em 2015, a Flipkart possuía somente um App Mobile, mas, por conta da maior parte da Índia possuir uma rede ruim ou ainda utilizar o 2G, tanto a empresa quanto os usuários acabavam saindo prejudicados.
A aplicação do PWA trouxe resultados incríveis:
- Aumento de 70% nas conversões
- Reengajamento 40% maior
- 3x mais tempo gasto no site
- 3x menor uso de dados
Conclusão
Como falamos durante todo o texto, o PWA, consequentemente, é uma forma de tornar o seu produto mais inclusivo, gerando uma experiência de alto valor ao usuário e fazendo com que o engajamento com a sua empresa seja ainda maior.
Como disse o desenvolvedor William Oliveira:
Na verdade, afirmar que a metodologia PWA é o futuro do desenvolvimento Web não é o bastante, pois ela já está se consolidando como o presente. Colocar o usuário como peça principal sempre foi um objetivo, mas as tecnologias existentes nos Progressive Web Apps transformam isso em realidade, levando rapidez, segurança e uma experiência engajante para as pessoas.
