Progressive Web Apps: O que você precisa saber para sua empresa

Aplicativos da web progressivos.

Se você ouviu falar dele e depois mergulhou em seu banho-maria, então você deu aos seus rivais um grande alívio! Eles têm um competidor a menos para se preocupar!

Apesar de sua eficácia impressionante, ainda é uma palavra da moda na maioria dos setores. É por isso que estaríamos falando sobre isso em detalhes para que você possa utilizar seus benefícios para impulsionar o crescimento do seu negócio.

Antes de começarmos a contar a história do PWA, deixe-nos mostrar uma coisa:

(Fonte da imagem)

Observamos algo muito interessante nos dados acima. A observação é:

As pessoas passam cerca de 7 vezes mais tempo em aplicativos móveis do que no navegador da web móvel.

Os dados também revelaram algo que nos deixou bastante perplexos!

Mesmo que os navegadores da web para celular recebam menos tempo de uso, o volume de tráfego de visitantes únicos que eles recebem é mais do que o dobro dos aplicativos para celular!

Você agora deve estar se perguntando se poderia obter o melhor dos dois mundos: maior duração da sessão de aplicativos móveis e o impressionante volume de tráfego dos navegadores da web móveis.

É aqui que entram os PWAs. A tecnologia que pode agravar a conversão do seu site e, eventualmente, engordar sua conta bancária!

Vamos cobrir:

• O que é PWA.
• Por que sua empresa precisa de um site baseado em PWA.
• Quais são as melhores práticas ao projetar seu site PWA?
• Desafios que você precisaria superar ao desenvolver seu site PWA.
• Como você pode oferecer uma excelente experiência do usuário por meio de um site PWA.
• Como você incentivaria as pessoas a instalarem seu site PWA.
• Desvantagens do PWA e como você pode superá-los.
• Perguntas adicionais relacionadas ao PWA para as quais você precisa saber as respostas.

Curioso? Bem, então vamos começar o tour!

O que exatamente é um PWA?

PWA é uma sigla. Significa aplicativo da web progressivo.

Em termos gerais, é basicamente um site que reproduz a sensação de suavidade de um aplicativo nativo em seu smartphone. Você poderia acessá-lo por meio do navegador da web do seu celular da mesma forma que visita qualquer site.

O que é tão legal nisso é que você pode adicionar um PWA à sua tela inicial e usá-lo da mesma forma que usa o Facebook, Messenger, Instagram ou qualquer outro aplicativo em seu smartphone.

Dar uma olhada:

(Fonte da imagem)

(Fonte da imagem)

Deixe-nos agora ser técnicos.

PWA é uma tecnologia da web baseada em JavaScript.

Requer o desenvolvimento dos seguintes componentes:

• Service Worker
• Manifest.json
• HTTPS

1. Service worker é um elemento de código JavaScript que permite que um PWA seja acessível mesmo quando você estiver offline. Além disso, ele gerencia o recurso de “notificações push” pelo qual os sites PWA são famosos.

2. Manifest.json é um arquivo JSON (é um formato de arquivo como pdf ou jpg) que contém informações que seu site PWA precisaria quando você o adicionasse à tela inicial e o usasse como um aplicativo nativo.

(Fonte da imagem)

Como você pode ver na imagem de demonstração acima, o ícone e o nome curto do aplicativo React PWA aparecem automaticamente quando o botão azul “Adicionar à tela inicial” é tocado. Isso acontece porque o arquivo manifest.json do React PWA contém todas as informações, incluindo o ícone do aplicativo, o nome abreviado, a cor de fundo, o tema e outras informações sobre sua interface.

3. HTTPS é o meio de comunicação por meio do qual o Service Worker busca com segurança seu site para ser exibido no dispositivo de uma pessoa.

Por que sua empresa precisa de um site PWA

Os três componentes mencionados acima juntos fornecem os seguintes benefícios:

• Seu site funciona mesmo no modo offline
• Ele oferece uma experiência semelhante à de um aplicativo
• É capaz de autoatualização
• É facilmente detectável pelos motores de busca

Como esses recursos se traduzem em benefícios para seus negócios? Bem, prepare-se!

Seu site funciona mesmo no modo offline

Em primeiro lugar, os sites PWA são acessíveis mesmo quando uma pessoa está offline.

Isso significa que seus clientes potenciais (e existentes) seriam capazes de navegar em seu site e realizar ações como solicitar um produto ou serviço.

Isso não apenas torna seu site mais utilizável, mas também oferece uma experiência mais agradável ao cliente e gera conversões!

Ele oferece uma experiência perfeita como a de um aplicativo

Quando se trata da abordagem mobile-first, é seguro dizer que os PWAs frequentaram a melhor universidade e a dominaram com louvor!

Isso soa muito? Garantimos que não!

Os sites PWA têm uma tela perfeita e idêntica em todos os dispositivos, seja smartphone, tablet ou desktop, ocupando menos espaço do que um aplicativo nativo! O Twitter aproveitou ao máximo seu PWA, o que o levou a um aumento colossal de 75% no número de tweets feitos! Ele também os abençoou com um corte de 20% na taxa de rejeição!

Embora a obtenção de resultados tão impressionantes como os do Twitter possa não ser tão fácil, é possível fornecer uma experiência de usuário muito melhor com a interação e o conforto de navegação que um PWA oferece!

Assim, seus visitantes podem acabar sendo seus clientes habituais, ficar encantado com outros recursos interessantes que seu PWA oferece e, por sua vez, aumentar sua conta bancária.

É capaz de autoatualização

Imagine não precisar atualizar manualmente os aplicativos em seu smartphone. Até mesmo pensar nisso o relaxa (até o âmago, possivelmente)! Esse é um dos muitos recursos interessantes de um site PWA!

Com seu recurso de pré-cache, ele pode se atualizar automaticamente. E não para por aí!

Se você lançar qualquer atualização do seu site PWA para o servidor do seu site, a versão do aplicativo do seu site também será capaz de buscar o conteúdo atualizado! Assim, você evita o trabalho de lançar um arquivo de atualização separado para o aplicativo, poupando seus clientes do trabalho de se lembrar de atualizar seu aplicativo PWA.

É facilmente detectável pelos motores de busca

Um aplicativo PWA, ao contrário de sua contraparte nativa, pode ser indexado por mecanismos de pesquisa. Isso permite que você obtenha tráfego orgânico para o seu site PWA (desde que seja classificado no SERP), que é basicamente gratuito!

Como mais de 9 em cada 10 experiências online começam com uma pesquisa, não seria sensato não tirar proveito do tráfego potencialmente massivo que você pode obter ao se classificar no SERP.

(Fonte da imagem)

Como você pode ver claramente no gráfico acima, quanto mais pessoas encontrarem seu site, maiores serão as chances de clicarem nele e, eventualmente, converterem! Combinado com uma experiência de usuário tranquila, capacidade de implantação de atualização única (se você atualizar seu site PWA, a versão do aplicativo também é atualizada) e recurso de atualização automática, seria muito mais fácil impulsionar o crescimento de sua empresa!

Quais são as melhores práticas ao projetar seu site PWA?

Portanto, você decidiu desenvolver um site PWA para sua empresa ou converter o site existente em um PWA.

Ótima decisão! Você vai fazer um grande favor ao seu negócio!

Mas antes de entrar em contato com uma agência de desenvolvimento (ou fazer você mesmo), existem alguns fatores que você deve ter em mente para um site PWA excepcional.

Uso de fontes do sistema

Cada sistema operacional (Android, iOS, Windows) tem sua própria fonte de texto. Se o seu PWA exibir seu conteúdo usando a fonte nativa de um sistema, os clientes o achariam mais envolvente e, portanto, prestariam mais atenção ao seu conteúdo.

Permitir que o conteúdo seja compartilhado facilmente

Nesta era de mídia social, a facilidade de compartilhamento de conteúdo na web é obrigatória para qualquer conteúdo da web. Portanto, é extremamente importante que você forneça a opção de compartilhar o link do site do PWA facilmente.

Sugerimos que você coloque um botão do tipo hambúrguer na parte inferior do seu PWA para que seja fácil para o polegar do usuário alcançá-lo na tela do celular. E como todos os seus botões de compartilhamento social estariam escondidos no botão de hambúrguer, a interface pareceria muito mais limpa.

Mantenha-o organizado e leve

Um site de PWA organizado e leve proporcionaria uma experiência muito melhor, semelhante a um aplicativo. Na verdade, um dos principais recursos do PWA é que ele traz a experiência semelhante a um aplicativo para a web.

Uma das melhores maneiras de proporcionar essa experiência é usar uma boa quantidade de espaço em branco. Essa prática ajudaria seu site PWA a adotar a interface elegante e minimalista que seus clientes achariam mais alinhada com o que estão acostumados.

Reter a rolagem na página da lista anterior

Quando seus visitantes clicam no botão “voltar”, eles não devem ser apenas direcionados para a página anteriormente visitada, mas para o segmento específico que estavam olhando. Isso pode parecer muito simples, mas oferece um grande conforto, pois as pessoas não precisam rolar a tela para descobrir onde estão.

Tema escuro

Como as pessoas passam cerca de um terço de suas horas de vigília em seus smartphones, é fundamental que você ofereça a opção de visualizar seu site PWA também em tema escuro.

Isso atinge duas coisas.

Primeiro, as pessoas associariam seu site a outras plataformas populares, como Twitter, FB messenger.

Em segundo lugar, seu site seria bom para os olhos, o que ajuda a impulsionar a experiência do usuário!

Desafios que você (provavelmente) enfrentaria ao desenvolver seu site PWA

Alto uso de bateria

Como os PWAs geralmente são desenvolvidos usando JavaScript (que não é o idioma nativo do iOS ou Android), eles exigem uma bateria de smartphone para funcionar melhor. Assim, a bateria do dispositivo se esgota mais rápido ao executar um aplicativo PWA.

Como superá-lo: esteja você desenvolvendo seu próprio PWA ou tenha escolhido um farm de desenvolvimento para fazer isso por você, certifique-se de que o backbone do código JavaScript esteja otimizado até o limite!

Restrição no acesso aos recursos do dispositivo

Como os aplicativos PWA não são aplicativos “nativos”, eles não podem acessar muitos recursos domésticos de um dispositivo, como Bluetooth, sensores de proximidade, controles avançados de câmera, altímetros e outros. Isso restringiria a forma como seu conteúdo é percebido pelos usuários.

Como superá-lo: leve sua aptidão inovadora ao limite ao projetar conteúdo para seu site PWA, de modo que possam ser consumidos com o mínimo de recursos domésticos de um dispositivo.

Integração com dispositivos Apple mais antigos ou versões iOS

Embora os PWAs possam ser executados desde o iOS 11.3, eles não podem ser executados na maioria dos dispositivos Apple mais antigos. Como os dispositivos Apple são relativamente caros, nem todos os usuários sempre adquirem o dispositivo mais recente ou atualizam seu sistema operacional.

Como você promoveria seu site PWA

Agora que você desenvolveu seu site PWA, é hora de avisar as pessoas sobre ele para que possam acessar e serem beneficiadas por seu serviço.

Falando em promover seu PWA, existem dois aspectos.

Esses são:

• Você deseja promover a instalação da versão do aplicativo do seu PWA
• Você deseja promover seu site PWA para aumentar o volume de tráfego que ele obtém

Vamos discuti-los um por um.

Promover a instalação do aplicativo PWA

Existem várias maneiras de promover a instalação do seu PWA. Aqui, cobriríamos a promoção em seu site PWA.

Inicialmente, falaríamos sobre as melhores práticas quando se trata de promover seu aplicativo instalado em seu site.

Aqui estão eles:

Coloque a promoção do aplicativo fora do fluxo de jornada do usuário

Por exemplo, na página de login do seu site PWA, coloque o CTA de instalação do aplicativo abaixo do formulário de login e o botão “Enviar” . Dessa forma, as pessoas seriam menos distraídas ao concluir a ação de login.

Mantenha a opção de recusar ou dispensar a promoção intuitiva

Algumas promoções requerem o clique no botão de cruz. Os usuários do Windows estão acostumados a ter o botão “cruzado” no lado direito, enquanto o botão “cruzado” fica no lado esquerdo para os usuários do Apple MacBook. Portanto, onde quer que você o coloque, certifique-se de que seja grande e facilmente visível.

Use a promoção do aplicativo com moderação

Muito disso afetaria negativamente a experiência do usuário em seu site PWA.

A promoção só deve ser exibida quando o beforeinstallprompt for detectado

Este BeforeInstallPrompt é um trecho de código JavaScript que você precisa incorporar à estrutura de código do seu site PWA. Ele detecta certa interação do usuário (alcançando uma determinada parte do seu site, clicando em um determinado botão) que aciona a promoção do aplicativo.

Com as práticas recomendadas abordadas, vamos agora passar para a colocação de promoção de aplicativo em seu site PWA.

Existem vários lugares em seu site PWA onde você pode colocar a promoção de aplicativo. Estes são:

1. Menu de navegação

(Fonte da imagem)

Este é um lugar eficaz para a promoção de seu aplicativo PWA. Isso ocorre porque abrir o menu de navegação indica um alto nível de envolvimento do usuário.

O que você precisa lembrar:

• Conforme mostrado na imagem acima, coloque a promoção abaixo dos itens de menu para evitar interromper o tópico de atenção do usuário.
• Exiba uma proposta curta e relevante informando como o usuário se beneficiaria com a instalação de seu aplicativo PWA.

2. Página de destino

A página de destino é usada para promover um produto ou serviço. Portanto, é um lugar ideal para promover a instalação de seu aplicativo PWA.

O que você precisa lembrar:

• Certifique-se de que sua proposta de valor exclusiva seja incrivelmente cativante e relevante para os pontos fracos do usuário.
• Informe as pessoas sobre o que elas obterão do aplicativo.
• Inclua palavras-chave no conteúdo da página de destino que trouxeram as pessoas à sua página de destino em primeiro lugar.
• Torne o CTA atraente e coloque-o em um local estratégico na página de destino.

3. Cabeçalho fixo no topo da página

Como o cabeçalho é a parte mais visível de um site, este é um lugar altamente desejável para promover seu aplicativo.

O que você precisa lembrar:

• Nem todos os usuários reagiriam positivamente a esse método de promoção. Portanto, certifique-se de que seja exibido apenas para pessoas que mostram indicações específicas de engajamento.
• Antes de correr para esse método de promoção de aplicativo, compare-o com outros elementos que você pode colocar no cabeçalho. Seu objetivo final é obter mais leads qualificados para vendas, não apenas obter mais usuários de aplicativos.

4. Banner de instalação descartável aderente na parte superior / inferior da página

A maioria das pessoas encontrou banners de instalação ou banners em geral em um site ou outro. O que significa que eles estão familiarizados com as promoções exibidas dessa forma.

O que você precisa lembrar:

• Esses banners podem ser extremamente perturbadores. Portanto, certifique-se de que seja exibido depois que um usuário acionar um evento de conversão cuidadosamente escolhido que indica um envolvimento mais profundo com seu conteúdo.
• No banner, inclua um breve texto informando aos usuários o valor que seu aplicativo forneceria, como: “leia nosso conteúdo mesmo quando estiver offline”. Ao escolher este texto, certifique-se de que seja altamente relevante para a parte do site PWA em que o usuário está, o conteúdo e o tema geral do seu site, o nível de envolvimento do usuário detectado, a localização do usuário (se relevante para o conteúdo do site), o comportamento do usuário etc.

5. Entre lista de informações ou artigos

Como o título diz, esse tipo de promoção aparece entre artigos em seu site ou blocos de informações. Se um usuário atingiu um ponto específico em um artigo, isso implica um envolvimento significativo e esse é o lugar na promoção do artigo que provavelmente terá o melhor desempenho. O objetivo dessa promoção geralmente é informar aos usuários maneiras mais fáceis de acessar o conteúdo que estão desfrutando no momento.

O que você precisa lembrar:

• Não abuse. Isso apenas irritaria seus usuários.
• Mantenha os meios de dispensar a promoção disponíveis e certifique-se de que a escolha do usuário de dispensá-la seja lembrada.
• Como mostra a imagem acima, o texto da promoção deve ser altamente relevante, ao mesmo tempo que promove o benefício de obter o aplicativo.

Promover o seu site PWA

Promover seu PWA não é diferente de promover qualquer site nesse sentido. Além disso, a promoção do site envolve toda uma discussão em si. Portanto, estaríamos falando sobre alguns meios-chave de promoção aqui.

1. Usando a mídia social como um trampolim

A mídia social não é apenas poderosa, mas uma plataforma extremamente eficaz para transmitir conteúdo e interagir com o público-alvo. Assim, o colocamos no número um.

Mencionemos rapidamente algumas dicas que muitos de nossos clientes foram beneficiados por:

• Coloque links para várias seções de seu site PWA correspondentes à sua postagem recente em seu perfil do Instagram. Isso não apenas oferece uma experiência rica e perfeita para o usuário, mas também ajuda a aumentar a conversão.
• Solicite que sua base de seguidores existente compartilhe a URL do seu site PWA para obter pontos de fidelidade. Isso fornece a eles o incentivo para promover seu site, aumenta seu envolvimento com o público e aumenta o tráfego do site.
• Crie concursos e brindes adequados ao seu nicho, nos quais as pessoas possam participar, compartilhando sua URL PWA.

2. Obter referências

Essa é uma das maneiras mais verdadeiras e eficazes de trazer tráfego para seu site. Isso pode ser feito de várias maneiras, como troca de links, links na biografia do autor de postagens de convidados, etc.

Seja qual for o método que você escolher, tente obter o máximo de links Dofollow, pois eles ajudam a transmitir o link juice. Recompensa? Um aumento significativo na sua classificação SERP e, por sua vez, no tráfego orgânico!

3. Registro em diretórios

Os diretórios têm a confiança dos clientes quando se trata de soluções de negócios. Isso inclui, mas não está limitado ao Yelp, Google My Business e FourSquare. A maioria deles é gratuita e expõe seu site PWA ao tráfego local e global como uma solução confiável.

4. Utilizando display onipresente

Esses imóveis de exibição geralmente não passam pela sua mente ao fazer um brainstorming para um espaço promocional, mas podem ser significativamente eficazes na construção de uma presença digital mais forte e tráfego direto para o seu site. Alguns exemplos fantásticos são assinatura de e-mail, cartões de visita, banners físicos que você exibe em eventos, etc.

PWA builder software vs. contratando uma agência

Existe uma grande variedade de ferramentas que permitem criar um site PWA a partir do seu site existente. Como você pode imaginar, todas são ferramentas pagas. No entanto, eles oferecem uma gama atraente de benefícios. Esses são:

• Não há necessidade de encontrar equipes de desenvolvedores
• Faturamento fixo mensal / anual
• Entrega rápida do site PWA

Vamos agora falar sobre alguns dos benefícios de contratar uma agência para desenvolver seu PWA personalizado.

• Você pode ter recursos personalizados que o ajudam a se destacar entre os rivais.
• Obtenha sugestões em tempo real de profissionais de PWA.
• Tem a opção de escolher entre um grande número de modelos de PWA que foram bem-sucedidos.
• Poupe-se da dor de cabeça de manutenção e atualização.
• Atendimento instantâneo (quase sempre) ao cliente.

Um grande contratempo de contratar uma agência de desenvolvimento de PWA é que custaria mais do que uma ferramenta de criação de PWA. Portanto, você deve fazer a escolha que melhor se adapta à sua capacidade financeira e às suas necessidades de negócios.

Testando seu site PWA

Se você tem seu site PWA desenvolvido, por favor, não abra a garrafa de champanhe …… .ainda! Ainda há trabalho a fazer!

Existem vários aspectos do site PWA que você deve verificar antes de iniciar a campanha de marketing do site. Esses aspectos são cruciais para o desempenho infalível e consistente do seu site.

Aqui estão os aspectos do seu site PWA que você precisa testar:

1. ADICIONE AO prompt de HOME

Como seu PWA não é um aplicativo nativo, ele não estará disponível na App Store da Apple ou na Google Play Store. A única maneira de os visitantes do site obterem o aplicativo PWA em seus smartphones é por meio do prompt ADICIONAR À CASA. Portanto, sugerimos que você verifique antes de mais nada.

2. Carregamento offline

Uma característica importante dos sites PWA é que eles são capazes de carregar elementos funcionais mesmo em conectividade fraca (modo avião para um). Como esse recurso dos sites do PWA seria um dos pilares de sua estratégia de marketing, é fundamental que você verifique a capacidade de carregamento offline do seu PWA.

3. Capacidade de resposta

A capacidade de resposta não é mais considerada um recurso interessante de um site ou aplicativo. Foi dado como certo em uma escala massiva e não vai reverter. Assim, qualquer pessoa que visite seu site de um smartphone, tablet ou desktop vai esperar que seu site se ajuste ao tamanho da tela. O que significa que não existe na terra esse fator que possa acabar na sua lista de “checar mais tarde”.

Gorjeta

Uma ferramenta competente e gratuita que você pode usar para esse fim é o navegador Mozilla Firefox.

• Basta abrir o Mozilla em sua área de trabalho.
• Digite a URL do seu site PWA na barra de endereço.
• Pressione Ctrl + Shift + M e seu site será aberto no ambiente de teste de capacidade de resposta.

Na imagem acima, há uma captura de tela com o site do Sydney Morning Herald aberto em uma janela do iPad dentro do ambiente de teste do Mozilla.

Se você olhar com atenção, verá várias guias logo abaixo da barra de endereço.

O mais à esquerda permite que você escolha um dispositivo no qual deseja ver a visualização do seu site. Você também pode verificar o tempo de velocidade de carregamento em vários tipos de conexões, como 2G, 3G, etc.

4. Teste entre navegadores

Não há como dizer de qual navegador seus usuários podem estar se conectando ao seu site PWA. Portanto, não é apenas importante, mas obrigatório, que você garanta que seu site tenha um desempenho ideal em todos os navegadores!

5. Teste de rede

Nem todos os visitantes chegariam ao seu site via conexão 5G ou banda larga. Alguns podem até estar usando 3G! Para garantir uma experiência de usuário tranquila, independentemente da rede do cliente, é altamente recomendável que você teste seu site em várias conexões.

Você pode usar o recurso de teste do navegador Mozilla Firefox para essa finalidade. Junto com o teste de rede, você também pode verificar a capacidade de resposta do seu site PWA por meio deste recurso.

6. Teste de tempo de carregamento

Com a atenção das pessoas caindo, é crucial que seu site carregue em 2 segundos (quanto mais rápido, melhor)! Mesmo que os sites PWA sejam conhecidos por seu baixo tempo de carregamento, é melhor ficar do lado seguro e testar o tempo de carregamento do seu site.

GTmetrix é uma ferramenta gratuita e extremamente popular que você pode usar para testar com precisão o tempo de carregamento do seu site. Ele também fornece um relatório detalhado mostrando qualquer elemento que possa estar deixando seu site lento.

Deixe a PWA conduzir o seu negócio para o futuro

Já que meninos grandes de vários setores, incluindo Twitter, Uber e Pinterest adotaram o PWA em sua presença digital, é apenas uma questão de tempo que outros o sigam. E antes que você saiba, provavelmente seria um dado adquirido (assim como a capacidade de resposta móvel).

Portanto, se estiver ganhando uma vantagem competitiva sobre seus concorrentes e fornecer seu valioso serviço / produto para uma base de clientes em constante expansão, desenvolva seu site PWA! Deixe-o abrir o caminho para sua presença digital!