PWA (Progressive Web App): O Que É e Como Criar o Seu (+3 Exemplos)

Você já ouviu falar em PWA?

O Progressive Web Apps representa uma das maiores apostas de empresas como Google e Microsoft para o futuro.

Com gigantes como essas investindo na tecnologia, é natural que o mercado volte seus olhos para ela.

E é por isso que é tão comentada nos dias de hoje.

A cada ano, as pessoas utilizam mais os dispositivos móveis para se conectar à internet.

Para se ter uma ideia, mais de 60% do uso da web ocorre apenas em smartphones, segundo dados do Statista, em 2019.

E a tendência é aumentar ainda mais.

Os custos de confecção ficam mais baratos, as conexões atingem maior alcance, a penetração de tecnologias alcançam diferentes classes.

Por conta disso, é essencial apostar na experiência do usuário no mobile.

E, se você deseja se adaptar às necessidades do consumidor digital, é uma boa ideia investir em inovação.

Por conta da preocupação acerca de novas soluções para atender as demandas dos internautas, resolvi criar este artigo.

Nele, você vai aprender o que é, como criar o seu e alguns exemplos de PWA para inspirá-lo.

Então, continue a leitura e vamos em frente.

O Que é PWA (Progressive Web App)?

Antigamente, as pessoas acessavam a web para interagir e tirar dúvidas.

No entanto, com o surgimento de novas tecnologias, suas funcionalidades foram atualizadas.

Hoje, é mais fácil responder o que não se pode fazer na internet, não é mesmo?

Uma das maiores revoluções pelas quais passamos foi o surgimento dos aplicativos.

Eles são práticos, dinâmicos e podem ser instalados em apenas alguns segundos.

Ótimo, certo?

Bom, não exatamente.

Com a expansão desse mercado, naturalmente, houve uma expansão rápida e crescente do surgimento de apps.

Com tantas opções no mercado, o ato de fazer um download pode ser trabalhoso e até mesmo sobrecarregar os dados de armazenamento do dispositivo.

E certamente ninguém quer perder oportunidades por conta disso.

É aí que entra em cena o PWA.

Ele é um site acessado via navegadores móveis e que faz com que o usuário se sinta em um aplicativo.

Para ele, essa pode ser uma melhor opção que a instalação de um novo programa.

Vamos combinar que é uma perda de tempo buscar e baixar um app que será utilizado uma única vez.

Já para desenvolvedores, representa uma maior facilidade na criação de funções, já que utilizam ferramentas padrões da internet, como CSS3 e JavaScript.

E ainda oferece novos recursos que melhoram o engajamento, as taxas de abertura de notificações e as conversões, auxiliando setores como marketing e vendas.

Mas não é apenas isso: PWAs também são multiplataforma.

Em vez de desenvolver uma aplicação para iOS, Android, Windows, macOS e Linux, a solução atende a todos os sistemas, incluindo Chromebooks, smartTVs e outras tecnologias vestíveis.

Como funciona o PWA?

Então, o seu cliente finalmente se aproxima do final de sua jornada.

Você certamente investiu bastante em links patrocinados, marketing de conteúdo, nutrição de leads e outras estratégias digitais.

Mas, no momento derradeiro, quando ele está a um passo de fechar o negócio, é exigida a instalação do app para a conversão.

Isso pode ser um sinal de alerta.

Afinal, as chances de desistência são grandes.

Nem sempre o usuário terá tanta paciência para realizar os processos exigidos.

Assim, uma compra é perdida.

No caso do PWA, ele terá apenas que acessar um link em qualquer plataforma que esteja.

Parece uma boa ideia, concorda?

Os aplicativos progressivos combinam apps tradicionais a uma experiência mais orgânica para os usuários.

Nesse novo modelo, algumas possibilidades se destacam.

• Notificações em push
• Ícone integrado na tela do dispositivo
• Rodagem em segundo plano
• Funcionamento em modo offline
• Acesso a recursos do mecanismo, como galeria de fotos, câmera, geolocalização e contatos.

É claro que existem muitas outras possibilidades.

Outras surgem neste exato momento, enquanto você lê este texto.

Em sua essência, um PWA funciona como um app nativo, mas com diferenças em interface, estrutura e usabilidade.

Na prática, para o usuário, a interface será muito semelhante à de um aplicativo, já elementos como a barra de endereço, botões e favoritos são removidos.

Mas, em um âmbito geral, isso significa menos etapas na jornada de consumo e um novo rol de possibilidades para desenvolvedores.

Vantagens e desvantagens do PWA

O PWA oferece muitas vantagens aos utilizadores, tanto desenvolvedores quanto usuários.

Alguns exemplos de benefícios são:

• Utilização de linguagens de programação como HTML/JasvaScript/CSS: desenvolvedores não precisam aprender novos códigos para criação
• Envio de notificações: as notificações surgem na tela de descanso do usuário como em um aplicativo regular
• Sem necessidade de download: as funções são executadas pelo navegador, sem que o usuário precise baixar um app
• Facilidade de alterações: modificações são realizadas diretamente no código do site
• Acesso a aplicações nativas: p PWA dialoga com funções do dispositivo, como câmera, microfone, GPS, entre outras
• Aplicação responsiva: funciona em diferentes telas como desktop, notebook, tablet, smartphone, smartTV, etc.

Por outro lado, nem só de vantagens vive a tecnologia.

Veja alguns pontos fracos relacionados a ela:

• Ausência nas lojas de aplicativos: as lojas de cada sistema são importantes meios de divulgação, mas os os apps progressivos não estão presentes por lá
• Sem integração com o sistema de vibração e toque: os PWAs não podem ser associados a tais funcionalidades do dispositivo
• Sem integração com outros apps: como são utilizados pelo navegador, não apresentam sincronia com outras aplicações
• Cross-browser: podem apresentar diferentes reações em diferentes sistemas de navegação
• Aplicações dependentes de performance: algumas funcionalidades mais pesadas podem causar lentidão ou travamento do browser
• Legitimidade: nem todos os usuários estão acostumados com o formato, o que pode gerar desconfiança.

Vale lembrar que podem existir diferenças de acordo com o sistema de navegador escolhido pelo usuário.

Qual a diferença entre AMP e PWA?

É muito frequente que as pessoas confundam os acrônimos AMP e PWA.

Mas, na realidade, são coisas muito diferentes.

AMP é a sigla para Accelerated Mobile Pages (ou Páginas Aceleradas para Dispositivos Móveis, em português).

Basicamente, são páginas na internet que são otimizadas para garantir um carregamento acelerado e simples quando acessadas via tecnologias mobile.

Já os PWAs, Progressive Web Apps, são componentes híbridos que flutuam entre páginas da web e aplicativos móveis, exercendo funções úteis por meio de navegadores e sem a necessidade de instalação.

Benefícios dos PWAs em relação aos apps tradicionais

Há uma série de benefícios que os PWAs oferecem quando comparados aos aplicativos tradicionais.

O maior e mais importante é o aumento das taxas de conversão.

Quando o usuário se aproxima da venda, inscrição ou qualquer que seja o objetivo, ele não é direcionado a uma página de download.

Em vez disso, pode seguir seu trajeto ali mesmo, o que evita chateações, desistências e a desinstalação do aplicativo.

Mas há mais.

A seguir, vamos conhecer algumas vantagens do PWA em relação aos apps nativos.

Praticidade

Como não há necessidade da realização do download, essa solução é um facilitador para o usuário.

Nesse caso, um único clique é suficiente para levá-lo a completar a ação desejada.

Agilidade

Pela mesma razão, o usuário ganha em agilidade.

Afinal, não será necessário esperar até que o arquivo seja baixado para completar sua jornada.

Engajamento

Quando o usuário baixa uma nova aplicação, existem recursos limitados e ele precisa se adaptar a uma nova interface.

Por conta disso, nos PWAs, onde há uma estrutura conhecida, o engajamento se torna uma atividade simplificada.

Acessibilidade

O acesso a aplicações progressivas é outro elemento facilitado.

Ele funciona com quaisquer tipos de conexões, sejam elas fixas, móveis e até mesmo offline.

Responsividade

Como possuem design responsivo, adaptam-se a diferentes tipos de tela.

Isso inclui tablets, smartphones, notebooks, desktops e outros tipos de aparelhos conectado, no mais clássico conceito de IoT, a Internet das Coisas.

Exemplos de PWAs

Agora que você já sabe como funcionam os PWAs, deve estar ansioso para conhecer sua funcionalidade na prática, não é mesmo?

A boa notícia é que, provavelmente, você já lidou com aplicativos progressivos, mesmo que não saiba disso.

Existem muitas empresas, grandes e pequenas, que se beneficiam da tecnologia.

A seguir, vamos conhecer alguns cases populares.

Twitter

O Twitter foi um dos pioneiros na utilização da tecnologia PWA.

A novidade foi aplicada em dispositivos de sistemas Android e Windows, nos quais apresentou boa performance.

Assim, os usuários passaram a utilizar a aplicação sem a necessidade do aplicativo instalado, facilitando o acesso.

Uber

O Uber está presente em mais de 60 países (segundo dados da própria empresa em 2019), inclusive no Brasil.

Por aqui, são mais de 22 milhões de usuários, o que mostra uma taxa de penetração realmente satisfatória.

Tanto sucesso não se dá à toa.

A empresa, que atua como uma facilitadora no ramo de transportes, beneficiou-se do PWA para atingir diferentes regiões do planeta.

Os padrões de seu app progressivo exigem o carregamento em menos de três segundos, inclusive em conexões de menor velocidade, como o 2G.

Pinterest

A rede social Pinterest é muito popular ao redor do mundo.

Com quase 300 milhões de usuários (conforme o Statisa em 2019) e uma taxa de penetração de quase 50% entre os millenials (segundo a Omnicore Agency), é uma das preferidas do público.

Seu PWA foi lançado quando foi percebido que muitas pessoas desinstalavam o aplicativo.

Assim, houve aumento de 50% nos cliques de publicidade e 40% no tempo de permanência no site.

Essa experiência foi muito positiva para a empresa, já que superou os números adquiridos pelo app nativo.

Como criar seu PWA

Agora, é hora de colocar as coisas para funcionar.

Para conseguir rodar um PWA, existem algumas exigências e processos que devem ser seguidos.

A seguir, vamos conhecê-los.

Requisitos

Há requisitos básicos para o PWA, que muitas vezes são similares aos definidos como padrões na web.

O seu aplicativo progressivo deve ser:

• Seguro, com conexão HTTPS
• Controlado por um manifesto WC3
• Independente da rede para funcionamento offline e em redes inexistentes ou não confiáveis
• Capacitado para respostas em todos os formatos de tela
• Funcional em múltipolos navegadores (Chrome, Internet Explorer, Firefox, Safari, Edge, Opera, etc.)
• Indexado com uma URL exclusiva para cada página.

Manifest

Para criar o seu PWA, é preciso manter os padrões do arquivo manifest.json na raíz do sistema.

Esse arquivo aplica o nome, cor do browser e modo de execução, além de outras informações relevantes para o funcionamento.

Não é preciso criar o json manualmente, já que existem geradores de arquivo automáticos.

Garanta que sua instalação sejá realizada corretamente, pois você não poderá prosseguir sem esse requisito.

Neste link, você pode realizar o teste gratuitamente.

Imagens

O seu app deve conter imagens, incluindo o ícone clicável presente na interface.

Como padrão, eles oferecem medidas iguais em altura e largura, no formato quadrado.

Como são visualizados em escalas pequenas, o ideal é que seja elaborado no padrão de 512 px x 512 px.

Outra imagem normalmente associada é a splash screen, a tela que aparece quando o usuário inicia a aplicação.

Ambiente Seguro com Certificado SSL

É requisito obrigatório que o seu PWA esteja dentro dos padrões https.

Isso significa que a hospedagem precisa ser cadastrada em um servidor confiável.

Uma dica interessante é inserir um .htaccess para redirecionar para o https automaticamente e fugir de potenciais problemas.

Service Worker

Você também precisará instalar um SW (Service Worker).

Basicamente, é um script que executa em segundo plano, alheio à página.

Assim, são permitidos a utilização de recursos que seriam impossíveis sem conexões estáveis.

Com isso, o usuário pode realizar ações offline, um grande diferencial da tecnologia PWA.

Meta Tags

Já as meta tags são etiquetas que indicam e facilitam o rastreamento do seu PWA entre as páginas da web.

Elas apontam para as imagens inseridas anteriormente, então, não há nenhum grande mistério.

Inspeção

Depois de tudo isso, é necessária a inspeção do seu Progressive Web App.

Existem várias ferramentas disponíveis, como a popular Lighthouse.

Tudo que você precisa fazer é instalar uma dessas intenções e clicar nos botões de ação desejados.

Conclusão

Se você se preocupa com seus clientes – e estou certo que sim -, deve considerar a implementação de um PWA.

Afinal, são as empresas que se adequam aos consumidores, e não o contrário.

Neste artigo, você aprendeu tudo sobre essa tecnologia.

O que é, como funciona e as principais diferenças entre PWA e AMP.

Além disso, viu quais são seus benefícios em vantagens em relação aos aplicativos tradicionais.

Por fim, descobriu quais são os principais requisitos para criar o seu próprio app progressivo.

Restou alguma dúvida?

Em caso positivo, deixe um comentários.

Você já teve alguma experiência com a tecnologia PWA?