Progressive Web Apps (PWA): O Que São e Como Implementar

O que são as Progressive Web Apps ou PWAs?

As Progressive Web Apps são a combinação tecnológica entre aplicações nativas e as aplicações web baseadas em HTML5 que conhecemos. As PWAs chegaram para fechar a lacuna tecnológica entre apps e páginas web.

O Google tem sido um dos principais defensores em incentivar o desenvolvimento desse tipo de tecnologia. Para entender melhor suas características, precisamos falar de aplicações que devem ser confiáveis, rápidas e envolventes.

Características que as Progressive Web Apps devem ter

Para tornar o conceito de PWA suficientemente claro e explicado, vamos mergulhar nas características essenciais que essas tecnologias devem ter.

Claro, estamos falando em termos gerais. A partir daí, cada modelo de negócio/serviço adaptará seus objetivos às necessidades do seu próprio público-alvo.

Velocidade

Tempo é dinheiro, não apenas para o Google, mas para todos aqueles negócios onde o carregamento lento de seus produtos pode fazer com que os usuários abandonem uma compra potencial.

O Google vem enfatizando essa premissa há muito tempo. O nascimento do projeto AMP tinha esse objetivo, e agora as PWAs se juntam à necessidade de acesso rápido à informação a partir de aplicações.

Os usuários hoje não têm paciência; não esperam que um site carregue completamente. 53% dos usuários não esperarão mais de 3 segundos para que um site carregue, segundo o Think with Google

Confiável

Quando falamos de confiabilidade, nos referimos às garantias de funcionamento do site. Graças aos chamados Service Workers, problemas de conexão de rede não devem impedir que a PWA carregue.

Instalável

As PWAs podem ser instaladas sem precisar ir à Chrome Store, Apple Store ou qualquer uma das lojas de aplicativos existentes. Lembre-se que não são aplicações nativas, então podemos acessá-las sem passar por essas lojas.

A instalação se comporta simplesmente como um atalho; não precisa de espaço para armazenar os diferentes arquivos.

Diferentes dispositivos: Mobile e Desktop

A base de código é unificada entre ambos os dispositivos, o que significa que técnicas de design responsivo se aplicam tanto a mobile quanto a desktop.

Vantagens e desvantagens das PWAs

Algumas vantagens já foram mencionadas acima ao explicar as características das aplicações progressivas. Mas há muitas mais razões para considerar usar essa tecnologia em nosso negócio.

• ›Economia de recursos
• ›Não requer instalação
• ›Velocidade de carregamento muito alta
• ›Notificações push diretamente para smartphones
• ›Funciona em todos os sistemas operacionais
• ›Segurança aprimorada
• ›Menos trabalho de desenvolvimento e manutenção do que um app nativo.
• ›Mais econômico do que um app nativo.

Desvantagens

• ›Requer conexão com a internet.
• ›Nem todos os navegadores suportam PWAs.
• ›Alto consumo de bateria

O que é um Service Worker?

Voltando brevemente ao lado técnico, precisamos falar de certos aspectos sem os quais as aplicações progressivas não poderiam funcionar. Service workers são scripts que rodam em segundo plano, fazendo solicitações a aplicações web, cache ou à própria rede.

Uma coisa importante que devemos saber é que os Service Workers só podem funcionar se você tiver um certificado SSL e servi-los via https.

Agora vamos ver tudo com um exemplo: o site da BMW e sua PWA.

Exemplo de PWA: BMW

Tentei escrever um artigo sem aprofundar-me em aspectos técnicos, e agora vamos ver um exemplo de uma aplicação que ajudará a entender melhor o conceito de PWA.

Se entrarmos no site da BMW, podemos ver que eles têm um design muito atraente, priorizando o visual, mas além de falar de design, vamos ver com que tipo de site estamos lidando.

Aparentemente é um site "normal", mas se você se aprofundar no código teremos nossa primeira surpresa. De fato, é um site inteiramente desenvolvido em AMP, não apenas a versão mobile.

Mas vamos ao assunto de hoje.

Uma vez dentro do site, vamos à barra "personalizar e controlar" do Chrome.

Como você pôde ver, uma janela foi aberta com o conteúdo do site da BMW. Comparando ambos os conteúdos, vemos que são praticamente idênticos.

Imagem do site no navegador (Chrome)

Imagem do site em PWA desktop

Os desenvolvedores da BMW conseguiram manter uma aparência visual idêntica. Quando aceitamos a "instalação" da PWA em nossa pasta de aplicativos do Chrome ou mesmo na área de trabalho (dependendo do SO, atualmente estou usando MacOS), um atalho para a PWA foi baixado.

Se estivermos sobrecarregados por instalar apps e quisermos desinstalar, basta ir à nossa janela da versão PWA, clicar no lado direito assim como no Chrome, e selecionar desinstalar.

Na versão mobile é praticamente similar. Quando entramos no site com versão PWA, recebemos uma notificação para "criar um atalho".

Ao entrar em um site com PWA; veremos uma opção para criar um atalho.

Se aceitarmos, veremos um ícone PWA na nossa área de trabalho mobile.

DevTools para aprender mais sobre PWAs

Neste ponto, quero mergulhar em exemplos para explicar conceitos e características desse tipo de aplicação.

Para isso vamos usar a ferramenta de desenvolvedor que o Chrome fornece (DevTools). Abrimos o inspetor com o botão direito e vamos a Application.

Chrome Devtools

App Manifest (Web Application Manifest)

O manifest é um pequeno arquivo JSON com aspectos básicos de estilo que ele fornece ao navegador para evitar mudanças abruptas.

Exemplo de Manifest (JSON)

Service Workers

Como explicamos anteriormente, agora podemos ver do que se trata. Vemos o arquivo JS e nele os scripts que ele usa. O Service Worker é instalado no navegador. Teremos vários de outras aplicações web.

Uma das principais funções desse tipo de código é garantir que a mesma versão seja sempre servida (ele controla o cache) mesmo se abrirmos outra aba.

Como implementar PWA no WordPress?

Embora se tivermos desenvolvido nosso site com nosso próprio código teremos que fazer bastante trabalho manual, a situação será muito diferente se tivermos desenvolvido nosso site no WordPress. Se for esse o caso, teremos vários plugins à nossa disposição que nos permitirão habilitar a tecnologia PWA com alguns cliques. A versão PWA do SEO Alive, na verdade, é o resultado deste plugin que recomendamos.

Plugins mais populares para implementar PWA no WordPress.

PWAs no Marketing

Para nós que trabalhamos em marketing, as Progressive Web Apps podem nos ajudar a alcançar objetivos que todo departamento de marketing tem em mente para fazer crescer uma marca.

Fidelização e Vendas

Um dos objetivos pior trabalhados por algumas marcas. Todos sabemos do baixo envolvimento que as marcas de telefones celulares têm ao tratar seus clientes, para dar um exemplo.

As notificações push em PWAs são uma das ações que estão funcionando melhor e contribuindo para a geração de vendas.

Um estudo realizado pela Gartner sobre PWAs nos dá uma série de estatísticas muito interessantes sobre Lancome e Alibaba; a Lancome relata um aumento de 17% nas conversões, 51% nas sessões de dispositivos móveis e 52% no iOS. A Alibaba (o grupo ao qual o Aliexpress pertence) melhorou sua taxa de conversão em 76%.

Embora tenhamos falado de 2 gigantes globais, ter um app no seu celular onde o tempo de carregamento e execução não é um obstáculo, além de respeitar o bom design, demonstrou aumentar a taxa de conversão.

Em conclusão, podemos dizer que as PWAs estão cada vez mais se espalhando, principalmente entre grandes marcas. Na Espanha, provavelmente levaremos um pouco para perceber o enorme potencial dessa tecnologia, mas mais cedo ou mais tarde será implementada.

Qualquer tecnologia que facilite a navegação mobile tem grande importância; passamos muitas horas com nossos smartphones, e em última análise, o acesso tanto a conteúdo quanto a produtos é negócio.

Referências

• ›Documentação do Google sobre PWAs