PWA do Facebook: o que você precisa saber

A plataforma de mídia social que mais cresce em todo o mundo se juntou oficialmente à transformação do PWA. Nosso artigo mais recente está chegando com um estudo de caso muito desejado do Facebook PWA.

Vamos detalhar por que o Facebook precisou mudar para um PWA e quais resultados o PWA trouxe para essa gigante empresa de tecnologia. Vamos entrar direto.

Uma visão geral do Facebook

Em 2004, Mark Zuckerberg, desistente de Harvard, fundou o Facebook com a missão de construir uma comunidade onde pessoas de todo o mundo possam se conectar, compartilhar opiniões e interagir umas com as outras por meio de postagens. E o resto é história.

Até hoje, o Facebook ajuda as pessoas a se manterem conectadas, receber atualizações diárias de seus amigos e familiares e descobrir o que está acontecendo no mundo.

Atualmente, é a maior plataforma de mídia social do planeta, com cerca de 2,93 bilhões de usuários ativos mensais, dados retirados do primeiro trimestre de 2022.

Ao contrário do LinkedIn ou Twitter com um segmento-alvo específico, o Facebook cresceu porque não se limita a nenhum grupo, mas atinge uma variedade de pessoas, atendendo a vários tipos de necessidades e conteúdos, incorporando vários aspectos de mídia diferentes.

O papel do PWA no futuro

O que devemos saber sobre o PWA quando ouvimos a história do Facebook lançando sua versão do PWA? Em primeiro lugar, trata-se da presença do PWA no futuro.

Não é uma questão de se, mas uma questão de quando os proprietários de sites começarão a integrar ou construir o PWA. Porque simplesmente, se Facebook, Twitter, Uber, Tinder, Starbuck, AliExpress e Alibaba adotam o PWA em sua estratégia digital, deve ser uma coisa.

Em segundo lugar, sabemos que o PWA ainda é relativamente novo, portanto, seu desempenho pode ser inferior em comparação aos aplicativos nativos. Mas 95% dos recursos nativos do Facebook podem ser recriados para o PWA, e os desenvolvedores estão otimistas com essa transformação.

Prevê-se que seja uma coisa de amanhã. Quase qualquer aplicativo já pode ser integrado a um PWA. A lista de recursos do PWA continua se estendendo a esses aplicativos nativos e muito mais.

Para cortar você de todo o ruído ineficiente em torno do PWA, com chavões e alegações bizarras, aqui está o valor que ele traz para o mundo.

O PWA nasceu sob o conceito de tornar a web um lugar melhor para se conviver, para torná-la significativa para os grupos de pessoas que importam.

Há uma grande tendência no aplicativo diário de usar hábitos para usuários finais. A maioria das pessoas usa no máximo 6 aplicativos e interage seriamente com 2-3 aplicativos apenas todos os dias.

Portanto, os usuários não precisam de mais aplicativos, pois os dados revelam que sua maior frustração com os aplicativos é consumir muito armazenamento. É por isso que ter usuários em uma única plataforma leve e ainda criar impactos duradouros com eles faz com que os aplicativos nativos fiquem aquém.

Quando os usuários preferem o PWA, isso economiza esforços e recursos de empresas e desenvolvedores para produzir uma presença online lucrativa.

Faz mais sentido ter uma experiência perfeita em todos os dispositivos do que ter que oferecer suporte a 2 aplicativos nativos separados mais um site.

Além disso, construir um PWA ainda funciona mesmo que as marcas já possuam um aplicativo nativo, só que é adequado para grandes nomes. Isso os ajudaria a atrair todas as perspectivas possíveis em meio à estreia da PWA.

Desafios do Facebook antes da integração com PWA

Para surpresa e deleite de muitas pessoas, o Facebook parou de desenvolver seu aplicativo da web móvel em 2020. Dizia-se que o aplicativo original não era amigável o suficiente, e o Facebook estava procurando uma chance de mudar para o PWA.

As duas situações divididas foram logo encerradas pela experiência de aplicativo do PWA em execução nos navegadores. Ele está evoluindo rapidamente, tornando-se uma alternativa viável aos aplicativos nativos para muitos nos últimos anos.

O Facebook também pode dizer que a tecnologia está a caminho de dominar o cenário digital, especialmente no comércio eletrônico. No entanto, como um aplicativo da web, o PWA ainda é novo e precisa de mais trabalho em suas funcionalidades.

Os resultados do Facebook PWA

Sobre o projeto

Há um pequeno ajuste no design do logotipo do Facebook PWA e não-PWA ao aparecer na tela inicial. Na área de trabalho, o normal é mostrado com um marcador do Chrome na parte inferior, enquanto o PWA se parece com um ícone de aplicativo nativo.

Com um não-PWA, você obtém a boa e velha visualização de novas guias com uma barra de menus e endereços principais. A experiência é diferente com o PWA quando você vê uma tela inicial antes que o site real surja e comece a carregar, exatamente como um aplicativo. Ainda é o navegador do seu dispositivo que lida com o trabalho, mas aparece de uma forma que mais se assemelha a um aplicativo sem a barra superior.

O Facebook PWA é executado de forma independente no switcher de visão geral para você continuar o negócio anterior. Fora isso, não há muitas diferenças no conteúdo ou no layout.

Sobre a experiência do usuário

• A velocidade de carregamento: rápido e suave
• A transição entre páginas e elementos: responsivo com emergência instantânea
• A experiência geral: fácil, direta e rápida

7 dicas para construir um PWA como o Facebook

O Princípio KISS (Mantenha Simples, Estúpido)

A tela do celular é muito menor e consome muito menos dados e energia do que o desktop. Isso significa que os desenvolvedores teriam menos conteúdo para trabalhar.

Portanto, mantenha-o simples, essencial e útil. Deixe o espaço para determinados espaços em vez de levá-los a ficar sobrecarregados com o seu design. Faça um teste A/B para remover elementos desnecessários, resultando em pontos de engajamento baixos.

O uso de fontes complicadas pode custar ao seu site muita energia para carregar, tornando o processo mais lento. Uma regra geral é priorizar as fontes padrão quando possível.

O Facebook acertou em cheio com a boa e velha fonte Helvetica para que a atenção pudesse chamar a atenção para as postagens das pessoas sem perder elementos de identidade da marca.

Garanta uma navegação suave

Uma boa prioridade de antemão é evitar todos os fatores de interação baseados na web, como cabeçalhos ou rodapés de uma só vez. Usando o Facebook em qualquer aplicativo ou navegador móvel, você descobrirá que tudo permanece o mesmo onde você espera que eles estejam.

Em vez de funcionalidades do navegador, faça-o transbordar com um modo sem bordas e trate seu PWA da mesma maneira que criar um aplicativo nativo.

Embora os gestos de toque devam ser usados ​​com peças sobressalentes, eles não são necessariamente desejados, embora sejam difíceis de executar.

Funcionalidade entre navegadores

Vale a pena considerar a capacidade de cada navegador com recursos do PWA para avaliar sua compatibilidade na fase de design.

O Chrome e o Firefox são os dois navegadores que mais suportam as funcionalidades do PWA, enquanto o Safari ainda se recusa a oferecer suporte total aos service workers no PWA.

A falta dessa tecnologia principal do PWA levou à falta de recursos primários, como notificações por push e navegação offline. Você ainda pode ver o Facebook PWA em todos os produtos da Apple, mas não é otimizado como em outros navegadores.

Mantenha uma espionagem no modo offline

Todos nos lembramos do infame Google Dinosaur que nos mantém ocupados e entretidos sobre o motivo de a conexão com a Internet estar desligada. O mesmo truque pode ser aplicado aqui quando o conteúdo precisa de um pouco mais de tempo para carregar.

Substituir o spinner de carregamento por outra coisa menos frustrante, algo que os mantenha esquecendo da carga os fará pensar que o site é mais rápido do que é.

Outro ótimo uso para fazer o carregamento parecer muito mais curto são as telas Skeleton, que dão aos usuários uma prévia do que e o que não esperar, ao mesmo tempo, orientando-os para cada ponto de interesse na página. No entanto, não deixe de fora os Service Workers, que permitem que seu site armazene dados gerados pelo usuário e os armazene em cache adequadamente sem uma conexão com a Internet.

Otimizar para SEO

Quando o Google atualiza os algoritmos, há um novo conjunto de regras a serem seguidas para classificar pelo mecanismo de pesquisa. Portanto, projete sua página tanto para o rastreamento da máquina quanto para os visitantes reais por trás da tela. Cada um deve estar disponível por meio de um URL.

Sem a ajuda do PWA, as postagens do Facebook dificilmente podem aparecer em todos os mecanismos de pesquisa para as palavras-chave relevantes. Eles tendem a ser altamente apresentados nas primeiras posições.

Aqui estão alguns pontos a serem observados para um site amigável para SEO:

• O conteúdo renderizado do lado do servidor é necessário para a onda de indexação inicial e use-o sempre que possível. Quando não for, você pode contar com serviços de renderização dinâmica fornecidos por terceiros.
• Especifique o URL canônico por tags canônicas em cada página.
• Evite camuflagem por bots de pesquisa ou veiculação do mesmo conteúdo.
• Certifique-se de que seu site seja carregado rapidamente em 5 segundos, aumentando o tempo na página e altamente seguro.

Funciona com diferentes tipos de entradas

Se você pretende projetar o gatilho para uma interação com um efeito de foco, certifique-se de que os usuários cliquem ou toquem para ativá-lo. Não se esqueça de usar os elementos semânticos precisos e o HTML não semântico, e você terá tudo coberto.

Outra coisa é manter a área do teclado longe da sala de mensagens, o que é comum quando o PWA está em modo paisagem. O Facebook PWA fez um trabalho fantástico ao garantir que seus usuários recebessem as interações exatas em diferentes dispositivos.

Valide seu PWA com a ferramenta Lighthouse do Google

Quando você precisa avaliar o desempenho do seu PWA durante o processo de criação ou após o lançamento, pode contar com o Lighthouse, um site de auditoria de ferramentas de código aberto do Google. O Lighthouse classifica os sites com base em 5 parâmetros em uma escala de 1 a 100.

Grandes nomes sempre testam à medida que seu desenvolvimento avança para garantir que tudo seja coberto. O PWA também é um fator usado para classificar se um site é PWA.

E quando for certo, o PWA será medido em vários termos de velocidade, segurança, design responsivo, cache, desempenho offline, indexação, notificações push e experiência do usuário.

Principais conclusões

Trazer à tona o melhor dos dois mundos, adotando o melhor dos aplicativos nativos para os sites, permitindo assim ao PWA uma enorme vantagem em um futuro próximo. O futuro do cenário online compromete o impacto do PWA.

O papel pioneiro do Facebook PWA certamente acelerou a revolução do PWA, trazendo de volta a eles uma experiência leve e uma plataforma robusta para usuários de todo o mundo participarem da conversa, apesar da diferença na capacidade de conexão com a Internet.

Se você está procurando um nome de especialista que lhe dê total confiabilidade para ajudá-lo a cuidar da transformação do PWA, Tigren é o que você precisa.

Fale conosco hoje para serviços PWA de comércio eletrônico premium de alta qualidade chegando até você por um preço razoável. Comece a ganhar dinheiro mais cedo e aumente seu ROI hoje.