Sempre consideramos a opção de melhor desempenho no início de um projeto e os PWAs aparecem com frequência. Seu roteiro é mais do que apenas páginas bonitas e novos recursos; deve ser sobre infraestrutura moderna e vantagens competitivas que farão seus negócios crescerem.
Se você cria conteúdo ou desenvolve software para a web, provavelmente já ouviu falar de uma tecnologia chamada Progressive Web Apps (PWAs). Em termos práticos, um PWA é um tipo de software aplicativo entregue por meio de um navegador compatível com os padrões e construído usando tecnologias comuns da web, incluindo HTML, CSS e JavaScript.
A menos que você tenha implementado um PWA antes, você pode não compreendo totalmente a tecnologia e provavelmente tem algumas dúvidas ou preocupações. Principalmente, essa tecnologia pode expandir meus negócios e os usuários terão a experiência de aplicativo nativo que esperam de minha marca? Vou tentar responder a essas perguntas para que você possa tomar uma decisão informada. TL; DR; Pode.
Crescimento dos negócios por meio otimização
Vamos enfrentá-lo, você vai querer fazer suas teias ite um PWA porque faz sentido para os negócios . Para o Twitter, significou um crescimento explosivo no engajamento com o aplicativo Twitter Lite em 2017. Na verdade, A experiência principal do Twitter.com agora é também um PWA, que é um bom farol para seu roteiro de produtos de longo prazo.
“ O celular é responsável por mais de 80% do uso do Twitter, com muitos usuários do Twitter Lite acessando o site por meio de redes 2G ou 3G. Uma experiência de usuário rápida no primeiro carregamento e visualizações subsequentes é essencial para permitir que os usuários visualizem e criem Tweets o mais rápido possível. “
Paul Armstrong, o técnico Líder do PWA no Twitter, fez um trabalho muito completo documentando exatamente como o Twitter fez isso no estudo de caso “ Twitter Lite e High Performance React Progressive Web Apps at Scale ”, que descreve a importância de coletar dados enquanto ajusta seu PWA para maximizar as otimizações de desempenho. Não posso exagerar a importância do desempenho na web e como ele afeta seus negócios e, de forma mais prática, seus usuários.
Desempenho é a chave para o crescimento
Costumamos falar sobre crescimento dos negócios através das lentes do desempenho com nossos clientes na XWP. Normalmente, nossa colaboração visa mover significativamente as métricas de desempenho do cliente de forma a causar um impacto mensurável em sua receita. Quando se trata de editores e sua tecnologia de publicidade, buscamos implementar uma estratégia que renderize anúncios no menor tempo possível com algo como Prebid Server , que reduz a latência entre a solicitação de lance e a seleção de anúncios. A estratégia para um provedor de SaaS, no entanto, provavelmente será muito diferente e exigirá muitas otimizações que empurram os usuários por um funil de vendas, desbloqueando seu caminho.
Com um PWA que está desempenhando uma função dupla como seu site de negócios principal e potencialmente a substituição de seu aplicativo móvel nativo, você precisará de uma estratégia sólida para adoção e engajamento do usuário. E, dependendo se você é um editor ou oferece um produto digital, as maneiras de otimizar exigirão uma abordagem diferente que se alinhe à sua estratégia de negócios.
Um dos motivos pelos quais oferecemos uma análise de desempenho é um serviço no XWP ocorre porque cada caso de uso tem diferentes alavancas para puxar e não há uma abordagem única para a estratégia de negócios. Embora existam muitas maneiras de enquadrar a conversa sobre desempenho em torno da estratégia de negócios, a implementação na página é essencialmente a mesma. Todos os produtos da web exigem a otimização da maneira como o DOM prioriza o carregamento e a renderização de ativos no navegador e seu impacto em Core Web Vitals .
Vale a pena observar é Anúncio recente do Google de que, em maio de 2021, conteúdo não AMP será apresentado em seu carrossel de pesquisa de notícias principais se atender às expectativas de Core Web Vitals e outras páginas estabelecidas sinais de experiência. Isso torna o desempenho do site uma consideração ainda mais crítica para os editores. No estudo de pesquisa “ Milliseconds Make Millions ,” a Deloitte fornece dados que correlaciona o impacto significativo da velocidade da página nas métricas de negócios.
“… nos EUA, a latência é a razão número um pela qual os consumidores decidem abandonar sites para celular, com 10% culpando downloads lentos como um motivo para não comprar. ”
O estudo da Deloitte descreve uma correlação direta entre o desempenho e cada uma das métricas pesquisadas. A maior conclusão é que uma melhoria de 0,1s na velocidade do site para celular teve uma correlação direta com a progressão do funil aprimorada e um aumento nas visualizações de página, taxas de conversão e valor médio do pedido em todos os setores. Resumindo, don não deixe dinheiro na mesa com um aplicativo da web lento.
O envolvimento do usuário está fortemente vinculado ao desempenho
Voltando ao estudo de caso do Twitter Lite , podemos ver que o desempenho claramente desempenha um papel significativo no usuário noivado. Depois de implementar seu Twitter Lite PWA, a empresa viu várias mudanças extraordinárias em suas métricas, incluindo um:
- 65% aumento nas páginas por sessão
- 75% de aumento nos tweets enviados
- 20% de diminuição na taxa de rejeição
“ O Twitter Lite agora é a maneira mais rápida, econômica e confiável de usar o Twitter. O aplicativo da web rivaliza com o desempenho de nossos aplicativos nativos, mas requer menos de 3% do espaço de armazenamento do dispositivo em comparação com o Twitter para Android. ”
Isso é bonito conjunto impressionante de estatísticas; no entanto, no estudo de caso da Engenharia do Pinterest “ Uma retrospectiva de um ano do PWA ,” eles descreve a importância das métricas de desempenho para o envolvimento do usuário e fornece números ainda mais atraentes do que o Twitter. Em comparação com seu aplicativo para desktop, o aplicativo móvel do Pinterest teve um desempenho dramaticamente inferior-respondendo por apenas 10% do total de inscrições. Em resposta, eles reuniram uma equipe para reescrever o site para celular do zero como um PWA. Uma das maneiras de torná-lo mais eficiente foi reduzir o tamanho do pacote JavaScript, que também é uma técnica que o XWP usou para answers.com no início deste ano para acelerar seu site.
“ Embora o estudo de caso lide principalmente com o carregamento da página, também nos preocupamos profundamente com uma experiência rápida e nativa durante a navegação. O maior impulsionador do desempenho do lado do cliente foi nosso redux store normalizado, que permite mudanças de rota quase instantâneas. ”
Ao investir em um PWA cheio de recursos, o Pinterest teve suas expectativas superadas com alguns resultados bastante surpreendentes. Resumindo, todas as melhorias em sua experiência na web móvel resultaram em aumentos dramáticos no envolvimento do usuário:
- Usuários ativos semanais no celular aumentaram 103% no geral; O Brasil cresceu 156% ; e a Índia aumentou em 312%
- A duração da sessão aumentou em 296%
- O número de Pins vistos aumentou 401%
- alfinetes em um quadro aumentaram em 295%
- logins aumentaram em 370%
- Novas inscrições aumentaram em 843%
- A duração da sessão aumentou em 296%
Esses resultados não podem ser ignorados e destacam o valor de investir em um PWA. Além disso, se eles fossem all-in com uma fusão de suas bases de código nativas e da web e publicassem o PWA como um “ Trusted Web Activity ” (TWA) ou em uma visualização da web , eles provavelmente poderiam tirar proveito de um caminho mais indireto para o crescimento, reduzindo os custos e as complexidades de seu processo de desenvolvimento. Isso é feito com a simplicidade em mente, muitas vezes marchando em direção a uma única base de código que integra sua web e tecnologias nativas, o que significa que você pode implantar aplicativos de alto desempenho com facilidade e menos manutenção no futuro.
Crescimento dos negócios por meio da redução de custos
Os Progressive Web Apps podem ser descritos como“ a web do futuro é agora ”, onde um site e um aplicativo móvel nativo são combinados em um para fornecer uma solução superior para usuários, desenvolvedores, organizações e mecanismos de pesquisa. Ao combinar seus esforços de engenharia em uma única base de código, os PWAs têm o benefício colateral de não apenas agradar seus usuários, mas também criar eficiências para suas equipes de engenharia, o que economiza tempo e dinheiro.
Reduza custos com ganhos de eficiência
Um exemplo de possível redução de custos está no processo de recrutamento. Um engenheiro da web versus um engenheiro de aplicativos nativo é um grupo de talentos muito diferente e seus conjuntos de habilidades normalmente não se sobrepõem. Isso significa que você precisará contratar e manter duas ou três equipes separadas, uma para o aplicativo da web e uma ou duas para o (s) aplicativo (s) nativo (s). Ao simplificar os requisitos de sua plataforma, você pode encontrar talentos para todas as suas necessidades de engenharia no mesmo, e possivelmente muito maior, pool de talentos.
Outras áreas importantes de redução de custos incluem entrega e gerenciamento de projetos. Ter uma única equipe de engenharia e um roteiro de produto significa evitar cerimônias e processos Agile redundantes que criam software excelente ou a necessidade de manter dois pipelines de CI/CD separados para implantar software funcional, tornando um PWA mais fácil de gerenciar em longo prazo.
Menos complexo geralmente é menos caro
Os custos de desenvolvimento e manutenção são normalmente muito mais baixos para um PWA do que para um aplicativo nativo. Além disso, você pode reduzir o tempo de implantação de seu aplicativo ignorando o processo de aprovação tedioso e altos padrões para aceitação em lojas de aplicativos. Juntos, isso economiza tempo e dinheiro. Isso não quer dizer que você deve evitar construir um aplicativo nativo inteiramente, apenas que você deve saber quando não fazê-lo. Um aplicativo nativo pode ser uma solução melhor se o seu aplicativo depender da integração com outros aplicativos móveis nativos-como calendários ou aplicativos de mídia social como Facebook ou Instagram-ou compras no aplicativo que normalmente são feitas por meio de uma loja de aplicativos. Embora seja importante notar que as compras no aplicativo podem ser tratadas de algumas maneiras diferentes e não devem ser consideradas um bloqueador, mas uma decisão de negócios. Você terá que decidir se as recompensas superam os custos e qual a melhor forma de aproveitar seus recursos.
Se um PWA pode fornecer todos os recursos de que um aplicativo precisa, então construir duas ou três versões do mesmo aplicativo é uma tolice recado e ignora completamente o princípio DRY da engenharia de software. Todo o progresso feito nos últimos anos no suporte a novos recursos da web por meio de projetos como o Fugu do Chromium, que é um esforço para fechar lacunas nas capacidades da web, permitindo novas classes de aplicativos, abrirá as portas para uma nova web moderna. As soluções disponíveis para nós em 2021 fornecem opções prontas para produção para fazer nossos aplicativos da web parecerem mais como aplicativos nativos e reduzir a complexidade de manter uma web e um aplicativo nativo para iOS e Android.
Capacidades semelhantes a aplicativos nativos
Embora quase todos concordemos que um PWA é apenas um site de acordo com Frances Berriman e Alex Russell, e até mesmo Microsoft , ele também tem a capacidade de ser muito mais capaz do que um aplicativo da web tradicional por meio de aprimoramentos progressivos . Um PWA nem sempre deve parecer apenas um site, deve parecer um aplicativo nativo se você quiser e com recursos que funcionam como aplicativos nativos em plataformas de suporte.
“ Esses aplicativos não são empacotados e implantados em lojas, são apenas sites que tomaram todas as vitaminas certas. Eles mantêm o modelo de permissão para perguntar quando você precisa e adicionam novos recursos, como ser o nível superior no seu alternador de tarefas, na tela inicial e na bandeja de notificação. ”
Bem, então como é um aplicativo nativo? Ao examinar os muitos exemplos de PWAs na natureza, existem alguns que se destacam e fornecem a sensação de um aplicativo nativo. Aqui estão alguns para referência:
- Starbucks construiu um PWA que se parece muito com seu aplicativo nativo e dobrou os usuários ativos diários e mensais.
- Spotify construiu um novo player da web e o implantou como um PWA no Chrome OS e o web player mais simples e rápido superou o antigo em todas as principais métricas.
- Compatível com todos os navegadores modernos, m.uber (pronuncia-se moo-ber) oferece uma experiência semelhante à de um aplicativo para usuários em dispositivos de baixo custo, incluindo aqueles não suportados pelo aplicativo nativo-também é minúsculo chegando a 50kB, o que significa que pode carregar rapidamente até mesmo em redes 2G.
- Twitter e Pinterest também são ótimos exemplos, que discuti anteriormente neste artigo.
Além desses aplicativos da web sociais e de consumo extremamente fortes, também existem alguns PWAs interessantes no contexto de publicação, incluindo Smashing Magazine e o Financial Times . Mas o que faz todos esses exemplos parecerem aplicativos nativos?
É tudo sobre os recursos
Service Workers e todas as várias APIs da web que são fornecidos em navegadores compatíveis com os padrões ou por meio de bibliotecas de terceiros, são um amálgama incrível de tecnologia moderna. Está muito longe do início de meados de 2000, quando os navegadores ainda estavam lutando para implementar adequadamente CSS e as pessoas usavam tabelas para layouts visuais.
Há uma longa lista de recursos que farão com que seu aplicativo pareça mais nativo. Vou cobri-los em um alto nível, mas se você quiser ler mais sobre o assunto, com exemplos de como implementar a tecnologia, dê uma olhada em “ Faça seu PWA parecer mais com um aplicativo ”, por Thomas Steiner em web.dev . Existe um rico ecossistema de ferramentas, técnicas e APIs de PWA para construir quase a paridade com os aplicativos nativos. No entanto, para fazer seu PWA se destacar e parecer um aplicativo, você vai querer dar aos usuários algumas coisas básicas.
- Ofereça uma experiência offline e ganhe uma porção do conteúdo disponível quando o WiFi e Ne twork sai, incluindo mídia reproduzível como vídeo, áudio ou mesmo mapas. Você sabia que os serviços de GPS não exigem uma conexão com a internet?
- Um recurso muito fácil de implementar é o Modo escuro, que ajudará a fornecer uma aparência nativa junto com o uso de fontes do sistema e esquemas de cores, ou mesmo implementação de um comportamento pull para atualizar.
- Também podemos adicionar download e atualização em segundo plano com o API de busca em segundo plano e a API de sincronização em segundo plano periódica .
- Configuração animações rápidas usando O modelo do App Shell é provavelmente uma das melhores maneiras de torná-lo mais parecido com um aplicativo.
- Adicionar controle de mídia de tela de bloqueio garantirá que seu conteúdo reproduzível continue a ser atraente, mesmo quando o telefone está bloqueado com API de sessão de mídia .
- O que realmente impulsiona o crescimento e a receita, e deve estar no topo da sua lista, notificações push usando a API Push e a API de gatilhos de notificação , onde você pode envolver seu público diretamente em eventos específicos em tempo real ou futuros. Implementamos a notificação no PWA desenvolvido para heavy.com e o envolvimento do usuário foi às alturas-todas as otimizações de desempenho que fizemos provavelmente também ajudaram.
E se você estiver usando WordPress, como o heavy.com, você deve saber sobre um dos projetos em que fizemos parceria com o Google, que foi construir o plugin PWA para WordPress junto com sua incrível equipe de engenheiros. O plugin torna a configuração de um PWA para publicação muito simples e pode, mesmo com uma implementação básica, ajudar no desempenho. O plug-in também pode ser usado para criar uma experiência de aplicativo nativo, uma vez que você tenha uma estratégia sólida pronta para implementar.
Você deve se concentrar em desenvolver e entregar um PWA confiável primeiro e, em seguida, adicionar melhorias progressivas com seu serviço e trabalhadores da web . Todos os dispositivos, mesmo os mais simples, terão uma experiência significativamente melhor. Atualize os recursos com base em seu roteiro e estratégia de negócios, colete muitos dados, otimize suas métricas de desempenho, enxágue-repita e documente o crescimento de seu negócio. Em seguida, escreva um estudo de caso incrível sobre o sucesso da sua organização com os PWAs para que o mundo possa ler tudo sobre isso.
