O melhor guia para aplicativos da Web progressivos em 2022 - com 50 exemplos de PWA

Interessado em criar um aplicativo da Web progressivo? Este guia vai contar tudo o que você precisa saber – junto com 50 exemplos dos melhores PWAs do mercado!

Há anos pregamos sem parar: você precisa de um aplicativo nativo. Havia boas razões para isso, e ainda mantemos isso.

Nossas plataformas News, Canvas e Canvas para comércio eletrônico ajudaram nossos clientes a melhorar muito o UX móvel, aumentar o tráfego, criar mais fidelidade e aumentar a receita. Os aplicativos nativos funcionam de maneira excelente para construir um relacionamento mais profundo com sua base de usuários principal e são essenciais para qualquer marca que valorize fidelidade, engajamento e retenção.

No entanto, nada é perfeito. Aplicativos nativos não substituem ótimas experiências na web.

Aplicativos nativos são relevantes apenas para quem, bem, tem o aplicativo instalado. Eles não fazem nada para novos visitantes que o acessam na web pela primeira vez, usuários casuais que aparecem de vez em quando e ainda não estão comprometidos o suficiente para instalar o aplicativo ou clientes que estão no desktop.

Esses clientes em potencial também são absolutamente cruciais para o sucesso. As primeiras impressões importam muito, e os aplicativos nativos sempre ajudam nos estágios iniciais do funil. Você precisa fornecer uma experiência rápida e suave para toda a jornada. Como?

Insira aplicativos da web progressivos (PWAs). Se você tem um site e é remotamente importante para você ou sua empresa, você precisa de um PWA.

Neste artigo, vamos definir aplicativos da Web progressivos, discutir seus benefícios mais importantes e compartilhar 50 exemplos dos melhores PWAs da Internet.

Vamos encerrar com algumas dicas sobre como criar um PWA e como eles funcionam com aplicativos móveis nativos para criar uma combinação de UX móvel vencedora. Vamos nos aprofundar. Ao final deste artigo, você saberá tudo o que precisa saber para começar seu projeto de aplicativo da Web progressivo.

Começaremos com a pergunta fundamental – o que é um PWA?

O que exatamente é um Progressive Web App? Vamos definir um PWA

Os aplicativos da Web progressivos combinam o melhor da Web com recursos que antes só eram possíveis em aplicativos nativos.

Os PWAs vivem no navegador como um site tradicional e estão totalmente conectados à infraestrutura de links e índices do mecanismo de pesquisa da web. Como os aplicativos nativos, eles podem ser iniciados a partir de um ícone da tela inicial, enviar notificações push para o dispositivo do usuário, carregar em uma fração de segundo e ser criado para funcionar offline.

Os aplicativos da web progressivos não são separados do seu site. Eles são um aprimoramento do seu site que o atualiza com as práticas recomendadas atuais e aproveita a tecnologia da Web de ponta, como trabalhadores de serviço, para fornecer uma experiência semelhante a um aplicativo em um navegador móvel.

Talvez você ainda não tenha certeza exatamente o que eles são.

Isso é compreensível, pois o termo é muito usado, mas definições sólidas são indescritíveis. Vamos olhar para a história do termo para esclarecer as coisas.

A definição original de um aplicativo da Web progressivo

O termo “Progressive Web App” foi cunhado em 2015 por Francis Berriman e pelo engenheiro do Google Alex Russell. Eles estavam observando o surgimento de uma nova classe de aplicativos da Web e, durante o jantar, decidiram defini-los e nomeá-los.

Eles criaram os seguintes critérios:

• Responsivo: para caber em qualquer formato
• Independente de conectividade : progressivamente aprimorado com Service Workers para permitir que eles trabalhem offline
• Interações semelhantes a aplicativos: adote um modelo de aplicativo Shell + Content para criar navegações e interações de aplicativos
• Fresh : Transparente sempre atualizado graças ao processo de atualização do Service Worker
• Seguro : Servido via TLS (um requisito do Service Worker) para evitar espionagem
• Detectáveis : São identificáveis ​​como "aplicativos" graças aos Manifestos W3C e ao escopo de registro do Service Worker, permitindo que os mecanismos de pesquisa os encontrem
• Reengajamento : pode acessar as UIs de reengajamento do sistema operacional; por exemplo, notificações push
• Instalável : para a tela inicial por meio de prompts fornecidos pelo navegador, permitindo que os usuários “mantenham” os aplicativos que consideram mais úteis sem o incômodo de uma loja de aplicativos
• Linkable : o que significa que eles são de zero atrito, instalação zero e fáceis de compartilhar. O poder social dos URLs é importante.

Você pode ver como esses critérios atendem à parte "aplicativo da web" da definição.

Por muitos anos, empresas como nós e outras criaram plataformas que permitiam às empresas criar experiências de aplicativos com tecnologias da web. Isso funciona muito bem até hoje, mas há compensações. Para criar uma ótima experiência de aplicativo nativo , você perde a capacidade de descoberta e vinculação da web.

Novas tecnologias da web, como service workers (falaremos sobre elas mais tarde), surgiram e mudaram as coisas – permitindo que os desenvolvedores construíssem experiências que pegassem o melhor do UX de aplicativo nativo e o colocassem no navegador, mantendo assim todos os benefícios da web.

Você não precisa mais aceitar um UX da web móvel medíocre, enquanto pressiona as pessoas a baixar seus aplicativos nativos para obter o negócio real. Você pode fornecer uma ótima experiência móvel nas App Stores e na Web para todos que interagiram com sua marca online.

Isto é o que Berriman e Russell observaram. Eles não inventaram nada, notaram uma mudança na web e a nomearam.

E a parte “progressiva”?

Nesse contexto, significa que os aplicativos são construídos com aprimoramento progressivo . Esta é uma técnica de design focada na construção de uma experiência de “linha de base” que funcione para todos, mas que seja atualizada e aprimorada em dispositivos mais avançados. A experiência de um aplicativo da Web progressivo não é necessariamente a mesma para todos os usuários, ela se adapta com base na potência do dispositivo e nas permissões que concedem.

Então, a definição de Berriman e Russell é suficiente? O problema é que poucos PWAs realmente cumprem todos esses critérios. Eles são mais como uma lista de desejos, ou um alvo a ser almejado, ou um caso modelo.

Definição do Google de um aplicativo da Web progressivo

A Microsoft está entusiasmada com os PWAs há algum tempo. A Apple convenceu e agora está (principalmente) dentro. Entre as grandes tecnologias, porém, foi o Google que realmente defendeu os PWAs desde o início.

Dito isto, o próprio Google não parece ter 100% de certeza sobre a definição. Em 2015, eles publicaram uma lista de 10 características, depois reduziram para seis e adicionaram três novas.

Atualmente, a definição do Google de um aplicativo da web progressivo inclui três pilares. Em sua página de introdução, eles afirmam que os PWAs são:

“Aplicativos da Web que foram projetados para serem capazes, confiáveis e instaláveis . Esses três pilares os transformam em uma experiência que parece um aplicativo específico da plataforma”

Isso é mais útil, mas não tão útil, pois é tão amplo. Isso sugere o ponto-chave, porém, que os PWAs estão trazendo experiências para a web que eram tradicionalmente associadas exclusivamente a plataformas nativas.

A definição técnica de um Progressive Web App

Uma terceira maneira de definir um PWA é especificando os critérios puramente técnicos, em vez de UX.

Isso é o que o desenvolvedor da Web e autor Jeremy Keith tentou em sua postagem no blog de 2017 O que é um Progressive Web App? .

Keith acha que a confusão sobre as definições de PWA é infundada e que basicamente três critérios devem ser atendidos:

1. HTTPS – os PWAs devem ser executados em servidores seguros que empregam HTTPS. Os service workers são essenciais para seu potencial e só podem ser usados ​​se você tiver HTTPS em vigor.
2. Um Service Worker – essencialmente um arquivo JavaScript que é executado separadamente do “thread” do navegador principal e permite ao desenvolvedor controlar como o aplicativo lida com solicitações de rede e armazenamento em cache. Isso ajuda a impulsionar a velocidade impressionante e os recursos offline dos PWAs.
3. Um manifesto de aplicativo da Web – um arquivo JSON que fornece uma descrição do aplicativo ao navegador, incluindo detalhes como nome, autor, ícone, descrição e recursos para executá-lo. Isso garante que o aplicativo seja detectável.

Keith continua observando que esta é uma definição mínima e básica. Os PWAs são capazes de muito mais, mas devem cumprir esses três critérios técnicos para fazer o corte.

Então, vimos a definição original observacional/aspiracional, a definição orientada para o UX do Google e uma definição técnica minimalista. O que podemos supor? Embora ainda possa haver um pouco de ambiguidade, agora temos uma boa ideia do que é um aplicativo da web progressivo.

Um PWA é um site moderno, seguro e de carregamento rápido que utiliza tecnologias web de ponta para atingir essas características. Ao contrário dos sites tradicionais, ele funciona e parece ao usuário como um aplicativo nativo – e “escapa” da guia do navegador no processo.

Como diz Alex Russel:

“Esses aplicativos não são empacotados e implantados em lojas, são apenas sites que tomaram todas as vitaminas certas”

Esta é uma ótima maneira de colocá-lo. Os PWAs são a última geração da web. São aplicativos da web capazes de aproveitar o potencial da tecnologia de navegadores modernos. Ao transformar seu próprio site em um PWA, você fornece as “vitaminas” necessárias para que ele funcione de maneira ideal.

Agora vamos passar para os benefícios de criar um aplicativo da Web progressivo, antes de analisar 50 exemplos de PWA para inspirar seu projeto.

Benefícios do Progressive Web App

Afirmamos anteriormente que se você tem um site e está de alguma forma ligado ao sucesso do seu negócio – você precisa construir um PWA.

Isso pode parecer uma afirmação ousada, mas é a verdade. Por quê?

Em poucas palavras, ao não construir um PWA, você provavelmente está deixando clientes, receita e crescimento na mesa. Como Pete LePage e Sam Richard da equipe de web do Google colocaram:

“Os números não mentem! As empresas que lançaram Progressive Web Apps obtiveram resultados impressionantes. Por exemplo, o Twitter teve um aumento de 65% nas páginas por sessão, 75% mais Tweets e uma redução de 20% na taxa de rejeição, tudo isso reduzindo o tamanho do aplicativo em mais de 97%. Depois de mudar para um PWA, o Nikkei viu 2,3 ​​vezes mais tráfego orgânico, 58% mais assinaturas e 49% mais usuários ativos diários. O Hulu substituiu sua experiência de desktop específica da plataforma por um Progressive Web App e teve um aumento de 27% nas visitas de retorno”

Isso apenas arranha a superfície.

Vamos dar uma olhada nos resultados que outras marcas conhecidas alcançaram como consequência direta do lançamento de PWAs.

• Alibaba aumentou as conversões da web móvel em 76%, viu 14% mais usuários ativos no iOS e 30% no Android
• A Debenhams teve um aumento de 40% na receita móvel, um aumento de 20% nas conversões e um crescimento online acima do mercado
• O Pinterest viu um aumento de 40% no tempo total gasto, 44% de crescimento na receita de anúncios gerada pelo usuário e 60% mais engajamento principal
• A Forbes obteve um aumento de 43% nas sessões por usuário, uma melhoria de 20% na visibilidade do anúncio e 100% mais engajamento
• A BMW viu um aumento de 30% na CTR de seu site de vendas, tempos de carregamento 4X mais rápidos, crescimento de 50% em usuários móveis e 49% mais tráfego orgânico
• MakeMyTrip aumentou a velocidade da página em 38%, triplicou as taxas de conversão e teve um aumento de 160% nas sessões de compra
• O AliExpress aumentou as taxas de conversão para novos usuários em 104% (+82% no iOS) e teve um aumento de 74% no tempo gasto por sessão com 2x mais páginas visitadas por sessão
• A Housing.com teve 38% mais conversões, uma sessão média 10% mais longa, uma taxa de rejeição 40% menor e um tempo de carregamento de página 30% mais rápido.
• A Wego triplicou a CTR do anúncio e obteve 26% mais visitantes e 95% mais conversões em geral. No iOS, eles obtiveram um impressionante aumento de 50% na conversão e um aumento de 35% na duração da sessão
• Treebo viu um aumento de 4x nas conversões ano a ano. Usuários repetidos converteram 3x mais.
• O Tinder reduziu pela metade os tempos de carregamento de 11,91 segundos para 4,69 segundos e viu o engajamento em geral com um PWA 90% menor que seu aplicativo nativo

Como todos esses resultados incríveis são possíveis? Muito disso se resume ao fato de que os PWAs fornecem uma experiência de usuário muito melhor, e ótimos resultados de negócios fluem disso.

Há mais do que isso embora. Vamos dar uma olhada mais detalhada em alguns dos principais benefícios do Progressive Web App, começando com o mais importante – velocidade.

PWAs são extremamente rápidos

Os consumidores modernos esperam carregamento instantâneo. Se algo não carregar em um piscar de olhos, muitos perderão o interesse, talvez permanentemente. Isso é autoexplicativo e apoiado por uma tonelada de dados:

• Quase 50% dos usuários dizem que sua maior frustração no celular é esperar o carregamento de páginas lentas (fonte)
• Páginas que carregam em 2 segundos têm uma taxa de rejeição de 9%, páginas que levam 5 segundos têm uma taxa de rejeição de 38% (fonte)
• Um “declínio acentuado na taxa de conversão” está associado a tempos médios de carregamento aumentando de 1 a 4 segundos (fonte)
• A cada 1 segundo de melhoria no tempo de carregamento aumenta a taxa de conversão em 2%, enquanto uma melhoria de 100 milissegundos gera até 1% mais receita incremental (fonte)

Essencialmente, quanto mais rápido seu site carregar, melhor. Se você fizer com que seus clientes/leitores/usuários esperem, uma porcentagem decente deles será rejeitada e não lhe dará o dinheiro deles.

Melhorar a velocidade do site gera melhores resultados em geral. Isso é tudo o que há para isso.

Então, como um PWA pode ajudá-lo a conseguir isso? Os aplicativos da web progressivos são rápidos. Muito depressa.

O Pinterest, por exemplo, conseguiu reduzir o tempo de carregamento do “tempo para interação” de lentos 23 segundos para apenas 5,6 segundos. Este foi, em média, o hardware Android em uma conexão 3G lenta. Isso teve um impacto bem-vindo nas principais métricas.

Nada mal. Os resultados do Pinterest não são incomuns.

A plataforma de streaming ZEE5 triplicou a velocidade do site e reduziu pela metade o tempo de armazenamento em buffer criando um PWA. O PWA da Uber carrega em menos de 3 segundos em redes 2G. A Forbes reduziu o tempo de carregamento móvel de 6,5 segundos em seu site móvel anterior para apenas 2,5 segundos com seu PWA.

As melhorias de velocidade são garantidas quando você cria um aplicativo da Web progressivo bom e bem projetado.

Por que os Progressive Web Apps são tão rápidos?

Os PWAs são tão rápidos graças aos importantíssimos service workers. Como Jason Grigsby coloca em seu excelente livro Progressive Web Apps:

“Aplicativos da Web progressivos usam service workers para fornecer uma experiência excepcionalmente rápida. Os service workers permitem que os desenvolvedores definam explicitamente quais arquivos o navegador deve armazenar em seu cache local e em quais circunstâncias o navegador deve verificar se há atualizações nos arquivos armazenados em cache. Os arquivos armazenados no cache local podem ser acessados ​​muito mais rapidamente do que os arquivos recuperados da rede”

Grigsby continua explicando que:

“Quando alguém solicita uma nova página de um aplicativo da web progressivo, a maioria dos arquivos necessários para renderizar essa página já está armazenada no dispositivo local. Isso significa que a página pode carregar quase instantaneamente porque tudo o que o navegador precisa baixar são as informações incrementais necessárias para essa página”

Uma das vantagens tradicionais dos aplicativos nativos é que eles podem ser extremamente rápidos. Eles fazem isso de maneira semelhante – todos os arquivos necessários para executar o aplicativo são baixados quando você o instala e só precisa recuperar novos dados. Service workers permitem que aplicativos da web progressivos tragam um desempenho impressionante semelhante para a web!

PWAs fornecem uma experiência de usuário semelhante a um aplicativo na Web

A velocidade, que já discutimos, é obviamente uma grande parte do UX. Existem outros fatores importantes e os PWAs também ajudam aqui.

Os aplicativos móveis nativos foram por muito tempo o padrão-ouro para UX móvel. Eles ainda são (pelo menos em alguns aspectos), mas os PWAs agora podem corresponder a grande parte de sua sensação e funcionalidade diretamente do navegador.

Por exemplo, os PWAs podem:

• Trabalhe offline ou em más condições de rede (mais sobre isso a seguir)
• Ser instalado no dispositivo do usuário e acessado por meio de um ícone na tela inicial como um aplicativo nativo
• Envie notificações push para a tela de bloqueio do dispositivo (infelizmente apenas no Android)
• Ser desenvolvido para oferecer uma experiência “imersiva” em tela cheia com uma estrutura de navegação que imita um aplicativo nativo
• Faça uso de animações como um aplicativo nativo
• Ser desenvolvido para acessar o hardware do dispositivo como a câmera e o GPS

A web móvel inicial era bastante áspera. O velho paradigma de um navegador de desktop foi “parafusado” em smartphones onde realmente não se encaixava. A era do design responsivo melhorou isso significativamente, mas sempre faltava algo.

Os aplicativos nativos foram criados inequivocamente para smartphones. Eles sempre se encaixavam melhor na experiência do dispositivo. Os PWAs confundiram essa linha, porém, a distinção em termos de experiência pode ser difícil de identificar.

Por exemplo – você já usou Instagram Lite, Google Maps Go ou Twitter Lite?

Você pode baixá-los na Google Play Store e verificá-los – e ver como eles se parecem com qualquer outro aplicativo nativo.

Você seria perdoado por supor que essas são versões mais leves e enxutas de seus principais aplicativos nativos. Como você deve ter adivinhado - eles são aplicativos da web progressivos.

Isso mostra o potencial dos PWAs para recriar as experiências de aplicativos nativos que todos conhecemos e amamos. Quando chegarmos aos exemplos um pouco mais tarde, você verá exatamente o que queremos dizer!

Observação: você deve ter notado que esses PWAs estão ativos na Google Play Store. O Google abriu a Play Store para PWAs no início de 2019! Isso mostra como eles estão confiantes sobre o futuro dos PWAs como aplicativos verdadeiramente multiplataforma. Você tem que passar por alguns aros para colocar seu PWA lá, mas certamente é possível. A partir de agora, não há informações da Apple sobre se isso será possível na iOS App Store.

PWAs são confiáveis

Todos nós já tivemos a experiência de tentar usar um site ou aplicativo da Web em uma conexão móvel instável. Não é divertido.

Obrigado novamente aos trabalhadores de serviço, que definem especificamente o que o navegador deve armazenar em cache localmente – os PWAs podem ser criados para oferecer uma experiência rápida e completa, mesmo quando o usuário tem pouca conectividade.

Isso pode ser levado um passo adiante também. Através do “precaching”, que é quando todo o aplicativo é baixado e armazenado na primeira visita, os PWAs também podem funcionar completamente offline!

Isso é realmente importante, quando você considera quantas pessoas ainda vivem em áreas rurais e mal servidas, e os bilhões ou mais de pessoas que estarão online pela primeira vez nos próximos anos – muitas das quais não terão conectividade perfeita.

PWAs são seguros, eficientes e adaptáveis

Para que os trabalhadores de serviço façam suas coisas, seu site deve ser completamente seguro com HTTPS.

Espero que isso já aconteça, mas se não construir um PWA irá forçá-lo a fazer todo o trabalho necessário para tornar seu site 100% seguro.

PWAs também são muito eficientes . Um fator-chave que impede as pessoas de baixar aplicativos móveis nativos é o espaço de armazenamento disponível em seus dispositivos. Como os autores do The PWA Book colocaram:

“Eles tratam seus dispositivos móveis como câmeras, computadores, blocos de notas, assistentes e – o mais importante – como um tesouro de memórias. Se baixar um aplicativo significa que eles têm que sacrificar fotos ou mensagens preciosas, eles pensam três vezes antes de clicar em sim.”

Os PWAs não forçam as pessoas a tomar decisões tão difíceis. Eles são muito mais leves que os aplicativos nativos, e o processo de instalação tem menos atrito (um toque em um botão e um atalho é criado na tela inicial). O PWA ocupa um pouco de espaço no dispositivo, mas é insignificante em comparação.

Os service workers que impulsionam essa eficiência também são responsáveis ​​por reduzir a carga do servidor e minimizar o risco de desempenho lento e travamentos durante períodos intensos.

Os aplicativos da web progressivos também são muito adaptáveis. Como eles são baseados na web, eles podem ser mantidos, atualizados com mais facilidade do que os aplicativos móveis nativos.

Quando você deseja alterar ou atualizar algo que pode ser rápido, não há necessidade de lidar com os gatekeepers da App Store, exigir que o usuário atualize manualmente ou contratar desenvolvedores de aplicativos nativos especializados.

É tão fácil quanto atualizar seu site hoje – e as atualizações (implantadas em um servidor) estão disponíveis quase instantaneamente para o usuário.

PWAs permitem que você envolva usuários com notificações push

Há anos falamos sobre o poder das notificações push. Eles são a melhor maneira de se envolver e se comunicar com seu público em dispositivos móveis – sem exceção. Você pode usá-los para atualizar os usuários, levá-los de volta aos aplicativos, promover ofertas e produtos e, geralmente, ficar em mente em suas vidas ocupadas.

Aqui estão alguns exemplos de como diferentes empresas podem usar notificações push:

• Editores de notícias

“Últimas notícias, X e Y acabaram de acontecer!”

As notificações push funcionam muito bem para editores digitais e permitem que eles direcionem o tráfego de volta para suas principais notícias e alertem os usuários com notícias urgentes.

• Lojas de comércio eletrônico

“Oferta especial / você abandonou seu carrinho / seus itens foram despachados”

Push funciona maravilhosamente para eCommerce. Os aplicativos de compras enviam notificações regularmente para alertar os usuários sobre ofertas e novos produtos, mantê-los atualizados com o processo de entrega e fornecer códigos de cupom especiais somente para aplicativos.

• Plataformas sociais e comunidades

“Seu amigo acabou de enviar uma mensagem/solicitação de amizade/respondeu a você”

Todos nós provavelmente já experimentamos mensagens push de plataformas sociais antes. Eles são o ingrediente secreto que os aplicativos sociais usam para trazer você de volta à plataforma deles, engajados e interagindo com outros usuários.

Esses são alguns dos casos de uso. Mas as notificações push realmente podem ser um grande impulso para qualquer negócio. Eles foram (e ainda são) um dos motivos mais fortes para criar aplicativos nativos.

Obrigado novamente aos nossos funcionários do serviço de amigos - você não precisa mais de aplicativos nativos para enviar notificações push. Você pode enviá-los do seu site (se você o transformar em um PWA).

As notificações push precisam ser usadas corretamente e não abusadas, mas podem trazer muitos benefícios e são um grande benefício da construção de um PWA.

Por exemplo, depois de criar um PWA, a Lancome viu que 8% dos consumidores que tocam em uma notificação push fazem uma compra e melhorou as taxas de conversão em carrinhos recuperados em 12% por meio de notificações push.

Outra é a eXtra Electronics, a maior varejista de eletrônicos da Arábia Saudita. A eXtra fez 100% mais vendas de usuários que chegaram através do web push e notou que aqueles que optaram por notificações push retornaram 4X mais vezes e gastaram 2X mais tempo no site. O diretor de desenvolvimento de negócios Mujeed Hazzaa disse que:

“As notificações push são uma grande parte da nossa estratégia de engajamento móvel. É uma maneira mais pessoal de se comunicar com nossos clientes. Isso é incrivelmente valioso para nossos resultados.”

Ao transformar seu site em um aplicativo da web progressivo, você também pode obter bons resultados para o seu negócio. Há uma grande ressalva – você só pode usá-los no Android. O iOS não os suporta, e ninguém sabe se algum dia será. Se as notificações por push forem importantes para você e você quiser enviá-las para todos os usuários , será necessário criar aplicativos móveis nativos.

Progressive Web Apps vão fazer o seu negócio crescer

Passamos por alguns dos benefícios mais importantes de transformar seu site em um aplicativo da web progressivo.

A linha inferior é que eles fazem todo o sentido para qualquer negócio com um site. Eles permitem que você atualize todo o seu UX da Web e ofereça uma experiência rápida e moderna que é praticamente garantida para melhorar as principais métricas.

Quais são as desvantagens de construir um PWA?

Nenhum realmente, exceto o tempo e o dinheiro que você precisa investir para construir um. Mesmo assim, um PWA é relativamente acessível e muito provavelmente (mais do que) se pagará ao longo do tempo – especialmente se o seu site estiver vinculado a qualquer tipo de receita por meio de publicidade, comércio eletrônico ou associações.

Ainda precisa de convencimento?

Vamos amarrar tudo junto com alguns exemplos. Vamos destacar 50 dos melhores exemplos de aplicativos da web progressivos na internet e mostrar em primeira mão o que discutimos até agora.

Exemplos de aplicativos da Web progressivos: os 50 melhores PWAs da Internet em 2020

Se você deseja desenvolver um PWA impressionante, o primeiro passo é procurar exemplos de aplicativos da Web progressivos bem-sucedidos para se inspirar.

Como parte de nossa missão de inspirar você, coletamos 50 exemplos de modelos dos melhores PWAs disponíveis no momento. Você pode pular para a seção mais relevante para o seu próprio negócio, percorrer a lista até que algo chame sua atenção ou ler todos os exemplos de aplicativos da Web progressivos para obter uma boa visão geral!

Vamos entrar em nossos 50 melhores exemplos de PWA.

comércio eletrônico e varejo

Starbucks

Para uma das cadeias de café mais populares do mundo, a Starbucks desenvolveu seu PWA para aumentar o envolvimento do cliente, apresentando programas de fidelidade e um processo de pedido mais fácil.

O aplicativo foi projetado para substituir seu antigo aplicativo móvel para manter seu engajamento melhor, independentemente do dispositivo.

Os usuários podem ver primeiro sua seção de recompensas, onde os clientes podem resgatar seus alimentos e bebidas gratuitos, presente de aniversário, recargas e opções de pagamento ao fazer o pedido por meio de seu smartphone.

O restante da página do aplicativo apresenta pedidos personalizados, disponibilidade da loja, detalhes de entrega e menu do aplicativo.

E assim como pedir de um barista, pedir sua bebida favorita permite que você personalize seu tamanho, suplementos e opções de tiro. A Starbucks também adiciona seções de informações nutricionais, ingredientes e alérgenos para aqueles que monitoram sua dieta.

O que gostamos neste PWA de comércio eletrônico:

• Funciona bem mesmo em conexões de rede fracas
• Totalmente integrado com outras plataformas e serviços de outras marcas como Spotify, Lyft e Ford
• Processos de pagamento e checkout móveis perfeitos
• Design extremamente amigável

Jumia

O que Alibaba é para a China, Jumia é para a África. Este mercado online de sucesso foi lançado pela primeira vez na Nigéria em 2012 e rapidamente assumiu o setor de comércio eletrônico da África desde então.

Em 2016, lançou seu PWA como resposta às conexões instáveis ​​de internet na região subsaariana. Com o PWA, conseguiu conquistar uma fatia significativa do mercado contando com redes 2G com limites de dados.

A introdução de um PWA foi a solução perfeita para oferecer uma experiência de usuário semelhante a um aplicativo sem consumir grande largura de banda de dados.

O resultado? Segundo o Google, a empresa aumentou sua taxa de conversão em 33% e aumentou seus usuários 12 vezes mais (em comparação com aplicativos nativos). Além disso, reduziu tremendamente a taxa de rejeição e os requisitos de armazenamento do dispositivo do usuário.

O que gostamos neste PWA de comércio eletrônico:

• Acesso offline confiável
• Capacidade de pesquisa rápida
• Processo de carregamento rápido
• Instalação fácil

OLX.in

Quando se trata de PWA para mercado online, confie na empresa indiana de anúncios classificados OLX.in. Com suas categorias robustas que abrangem de propriedades a moda, vendedores e compradores são mais adequados ao PWA da empresa.

Os usuários podem notar facilmente a facilidade de usar o aplicativo quando pesquisam produtos específicos ou obtêm ótimas ofertas de vendedores.

A OLX revelou que experimentou uma CTR mais alta em seus anúncios e uma enorme queda de 80% nas taxas de rejeição desde a transição para o PWA, conforme relatado pelo Google.

O que gostamos neste PWA de comércio eletrônico:

• Notificações push mesmo no modo offline
• Recurso de integração de câmera fácil criado para vendedores
• Recurso de histórico de pesquisa

Flipkart

Outro concorrente no cenário de comércio eletrônico indiano é o Flipkart que continua redefinindo a experiência de compra online com seu PWA.

À medida que os usuários percorrem o aplicativo, categorias de produtos, ofertas limitadas, best-sellers e descontos são apresentados, com o objetivo de fisgar o cliente a navegar e passar mais tempo no aplicativo.

O PWA da Flipkart começou em 2015 através do Flipkart Lite. A empresa queria tornar as compras mais acessíveis entre os indianos, mesmo que as conexões de internet fossem intermitentes na maioria das áreas.

O que gostamos neste PWA de comércio eletrônico:

• As notificações push para as últimas notícias e atualizações são consistentes
• O processo de compra online é simplificado
• A capacidade de pesquisa é precisa

Fórmulas puras

Percebendo que o mercado de suplementos de saúde se tornou mais competitivo do que nunca, a Pure Formulas, com sede nos EUA, é considerada pioneira nesse setor quando se trata de lançar seu próprio PWA.

Depois de descobrir que seu site e aplicativo móvel estavam sofrendo com taxas de rejeição muito altas devido a um processo de checkout lento, a empresa desenvolveu um PWA que lhes deu uma reviravolta completa.

Ele relatou conversões mais altas e aumento no valor médio do pedido (AOV).

O que gostamos neste PWA de comércio eletrônico:

• Processo de checkout muito conveniente
• Design minimalista
• Requisito de armazenamento de dispositivo muito leve
• Transações altamente seguras

Ali Express

Com um PWA altamente responsivo, o Ali Express é considerado um dos aplicativos mais procurados atualmente para transações B2C.

Graças à ampla cobertura de categorias de produtos da empresa, os usuários podem navegar por milhares de opções sem diminuir o carregamento da página usando o PWA.

Desde o seu lançamento, o AliExpress anunciou que experimentou melhores reengajamentos e estatísticas de conversão graças ao seu PWA.

O que gostamos neste PWA de comércio eletrônico:

• Navegação fácil do produto
• Tempo de carregamento mais rápido
• Layout amigável

Alibaba

Jack Ma's The Alibaba Group não precisa de mais apresentações quando se trata do sucesso de seu Alibaba PWA. O aplicativo de comércio eletrônico B2B é um modelo ideal para qualquer PWA: rápido, responsivo, leve e muito envolvente.

O Alibaba foi bem-sucedido em termos de lançamentos de aplicativos móveis e web para dispositivos móveis. No entanto, precisava conquistar uma grande parte do mercado por meio de um engajamento aprimorado. E o PWA da empresa foi a solução perfeita para isso.

Ele relatou um aumento de 76% no total de conversões de acordo com o Google.

O que gostamos neste PWA de comércio eletrônico:

• Navegação fácil do produto
• Integração com as ferramentas do site como Feeds, Messenger e conta My Alibaba
• Tempo de carregamento mais rápido

Alvo

Para não ser superada por seus concorrentes, a oitava maior cadeia de varejo dos Estados Unidos, a Target, agiu rapidamente em seu estudo de análise de clientes. Em 2015, descobriu que seus clientes iniciam sua jornada em seu dispositivo móvel e, em seguida, realizam a compra pelo computador.

A gerência pensou em introduzir um PWA e, desde então, seus usuários de aplicativos aumentaram em grande número e as transações online melhoraram significativamente sem alienar usuários em diferentes dispositivos.

O que gostamos neste PWA de comércio eletrônico:

• Opção fácil de adicionar ao carrinho
• Imagens de carregamento rápido, independentemente do tamanho

Walmart

Para uma experiência de aplicativo perfeita, o PWA do Walmart apenas atinge a longa lista de verificação de um desenvolvedor de aplicativos. Com milhares de ofertas de produtos, a gigante do varejo é capaz de integrar compras online e opções de coleta/entrega para cada transação.

Seu recurso de rastreamento geográfico monitora os itens mais vendidos na área do usuário, o que permite que o aplicativo ofereça recomendações com base nessa lista.

Finalmente, seu uso eficaz de notificações push permite que a empresa familiarize sua base de fãs leais com excelentes ofertas e novas descobertas.

O que gostamos neste PWA de comércio eletrônico:

• Seção de comentários
• Recurso de rastreamento geográfico
• Interface muito responsiva
• Desempenho perfeito em rede instável

Macy's

A marca de varejo de alto padrão, Macy's, tinha um objetivo em mente quando lançou seu PWA: fornecer a melhor experiência para seus milhões de visitantes mensais.

Reconhecendo o crescimento de seus usuários de aplicativos, o PWA da empresa foi uma adição bem-vinda às suas ferramentas de consumo para manter seus compradores atentos às novidades nas prateleiras das lojas.

O que gostamos neste PWA de comércio eletrônico:

• Ferramenta confiável de busca de lojas
• Layout de produto organizado

Lancôme

A marca francesa de cosméticos de luxo Lancome encontrou um obstáculo em suas vendas online: os usuários de dispositivos móveis aumentaram, mas as conversões estavam caindo.

Para entender o problema, a empresa analisou o comportamento do cliente e descobriu que eles tinham uma experiência de usuário terrível no aplicativo móvel.

A marca mudou para o PWA para reduzir o tempo de carregamento e tornar o aplicativo altamente acessível. De acordo com o Google, as notificações push contribuíram com 12% nas conversões e as sessões móveis aumentaram para 51%.

O que gostamos neste PWA de comércio eletrônico:

• Fast search results
• Easy navigation

News

Financial Times

The Financial Times PWA is considered as one of the best PWAs in the news industry. Covering business and global markets, the app takes a similar look and feel of the paper with its traditional salmon-colored background.

The publication is one of the first news sites to abandon its native app and transition to a PWA. It works well even on slow networks, making news easily accessible for business people on the go.

What we like about this News Publisher PWA:

• Reliable offline
• Very fast loading time
• Real-time updates on content
• Seamless video content experience

Infobae

This Buenos Aires-based news website has proven to be successful in the PWA scene thanks to its Spanish readers. According to Google, the Latin American audience contributed to three times more page views compared to its old mobile site, and spent more sessions on the app as well.

Infobae switched from its mobile site to PWA in 2017 to improve the speed of access among its mobile users. This was influenced by the huge drop in session duration (3 minutes on mobile compared to 27 minutes on desktop).

What we like about this news publisher PWA:

• Very fast loading time
• High-quality visuals loading seamlessly
• Easy navigation

Nau.ch

One of Switzerland's leading news websites became extremely popular when it began flashing content in public areas such as terminals and petrol stations.

Nau (an abbreviation for “new”) was founded in 2007 with the goal of prominently displaying news in public transport to reach millions of commuters on their daily route.

To improve its reach, the company launched its PWA and has achieved 400 times more installations than its old mobile site in the first two days.

What we like about this news publisher PWA:

• Impressive user interface
• Easy navigation
• Content loads much faster relative to other news-related PWAs

Nikkei

Regarded as the world's largest financial newspaper (more than 3 million in daily circulation), Nikkei launched its PWA in 2017 with the goal of reducing load time, improve reader interaction and boost engagement.

Realizing that their website was not mobile-friendly (even taking more than 20 seconds to be fully interactive), the company assembled a team of five front-end engineers who worked on launching a PWA.

The result was truly impressive: improved loading speed, higher interactivity as well as better user experience with offline support according to Google.

What we like about this news publisher PWA:

• Prefetch feature (instant page navigation)
• Preloaded key requests
• Optimized JavaScript bundles
• Optimized images
• Enabled HTTP caching

The Washington Post

As a global authoritative news organization, The Washington Post has released one of the most responsive PWAs to reach out to a wider audience on mobile.

Launched in March 2016, the paper's goal is to provide “frictionless, uninterrupted reading.” This comes after its readers expressed their concerns over slow load times on its old mobile app.

With more than 1,000 articles published daily, they have announced that an 88% improvement in load times was initially observed. This has contributed to an increase in retention rate and longer readership according to Google.

What we like about this news publisher PWA:

• Fast loading time
• Real-time live updates
• Same look and feel as the website

Médio

With social journalism becoming a necessity for readers and publishers alike, Medium has made a mark in the online publishing industry with its 120 million readers.

Medium's initial goal in 2012 was to reinvent the blogging platform through small stories that matter to any type of audience.

Now that it has grown into subscription-based service, its loyal users can follow exclusive content and audio narrations through its PWA even when working offline.

What we like about this news publisher PWA:

• Responsivo
• Seamless functionality even on an unstable connection

Wired

When tech publisher Wired launched its PWA in 2017, its main objective was to increase its app's page speed and reach out to its 11 million users.

And true enough, it did. Not only did it result in higher readership but also more impressions per session, leading other Conde Nast publications to follow suit through what its chief of technology refers to as Alien Web Apps (AWA).

What we like about this news publisher PWA:

• Fast loading time
• Highly responsive
• Reliable background caching

Forbes

With almost a 50% lift in sessions, triple the rise in scroll depth and 100% boost in engagements according to Google, Forbes has definitely reaped the benefits of launching its fully functional PWA in 2017.

Its Chief Product Officer, Lewis Dvorkin, wanted a no-friction experience for its users to have content served to their devices the way they want.

In addition, Dvorkin states that the more people stay longer on their app, the more they view ads, thanks to increased personalization that yields better engagement.

What we like about this news publisher PWA:

• Stunning visual content
• Fast loading times
• Unique number of readers infographic

The Guardian

To make its online content more accessible, UK's leading news and media outlet, The Guardian, launched its PWA in 2017.

The app features high-quality images, interactive multimedia, and thousands of new content without compromising loading time and user experience.

The company also created a US-based innovation team called The Guardian Mobile Innovation Lab, which operated from 2015 to 2018, which explored mobile tools and chat apps to improve user experience.

What we like about this news publisher PWA:

• Customizable sections
• News alert feature
• Offline access

Sports Mole

Sports fans – football, F1, tennis, rugby, cricket, golf and even snooker – are able to enjoy Sports Mole's website features right in their own devices through the site's PWA.

Video clips, real-time scores and game schedules are just some of the exciting features in the PWA.

The result of this move led to higher readership rate and increased session time on the app.

What we like about this news publisher PWA:

• Search functionality
• Seamless video playback
• Real-time updates
• No lag on page transitions

The Weather Channel

Since the 1980s, The Weather Channel has been a trusted companion by travelers and households when it comes to providing an average of 40 billion daily weather forecasts.

While its previous native app was used by half of its total users through mobile web, the company found out that there are still users who don't enjoy reliable connections or are not equipped with advanced smartphones.

Through its PWA, The Weather Channel is able to cater to millions of its global users in 62 languages. Google reports that it has improved its page load time by 80% through the app.

What we like about this news publisher PWA:

• Search functionality
• Multiple language availability
• Notificações via push

MyNet

Offering a wide range of content from news to sports, travel to education, and weather to finance, MyNet is one of Turkey's largest web portals.

Its old mobile site was plagued with complaints, most especially very slow loading speed. This led the company to develop a PWA to deliver fast and a highly engaging website.

Google reports that introducing PWA to MyNet's readers influenced a 15% rise in average views per session and a 23% drop in bounce rate.

What we like about this news publisher PWA:

• Atualizações em tempo real
• Funcionalidade de pesquisa

Diretório

Kopa

Anteriormente conhecido como PadPiper, Kopa é um mercado para apartamentos mobiliados e locatários. Ele oferece verificação para locatários e anfitriões de aluguel, portanto, combiná-los é mais seguro.

A PadPiper lançou inicialmente seu PWA para ajudar os alunos a encontrar moradia adequada durante o ano letivo ou assim que iniciarem seus estágios. Também pensou em aproveitar a oportunidade para conectar os alunos e descobrir quem está trabalhando perto deles para facilitar as correspondências de colegas de quarto.

O que gostamos neste diretório PWA:

• Resultados de pesquisa rápidos
• Recursos de hospedagem de aluguel
• Design minimalista

Rentio

Este mercado de aluguel de câmeras e eletrodomésticos é uma solução para quem precisa temporariamente desses itens.

Os usuários fazem um pedido online e esperam que o item seja enviado no mesmo dia. Após o término do período de locação, o usuário deverá devolver o item ou optar por comprá-lo.

O PWA do Rentio (em japonês ou inglês) oferece interface fácil de navegar, resultados de pesquisa rápidos, muitas categorias e tempo de resposta rápido.

O que gostamos neste diretório PWA:

• Recursos de pesquisa
• Processo de transação rápido
• Navegação conveniente

Joppy

Como plataforma de recrutamento de desenvolvedores, o Joppy atende a empresas em busca de talentos e a alguns dos melhores candidatos a oportunidades de emprego em tecnologia.

Esta plataforma concentra-se em combinar as preferências dos candidatos com os requisitos definidos pelos recrutadores. Mas, ao contrário de outros quadros de empregos online, os aspirantes a emprego podem definir seu perfil como anônimo para que ninguém possa incomodá-los com propostas não solicitadas.

O PWA da Joppy é claramente projetado tanto para o recrutador quanto para o candidato (que estão principalmente em Barcelona) para tornar o processo de inscrição mais simplificado.

O que gostamos neste diretório PWA:

• Tempo de resposta rápido
• Processo de correspondência rápido

OpenRent

Procurar um mercado imobiliário de aluguel no Reino Unido pode ser uma dor de cabeça sem a ferramenta online certa. Com o PWA da OpenRent, inquilinos e proprietários podem pesquisar convenientemente o ajuste certo quando se trata de propriedades disponíveis.

O PWA fornece resposta rápida e atualizações em tempo real. Isso é crucial para o site, pois o OpenRent remove as listagens assim que elas são liberadas para evitar anúncios fantasmas que frustram possíveis locatários.

O que gostamos neste diretório PWA:

• Capacidade de filtro de resultados
• Fácil adição de propriedade
• Tempo de resposta rápido

Vendas de carros

Para um mercado de automóveis on-line na PWA, Carsales, um dos destinos mais populares pelos compradores de carros na Austrália, oferece muita conveniência aos seus usuários.

Os compradores podem pesquisar carros com base no tipo de carroceria, marca, preço e ofertas especiais. Os vendedores, por outro lado, podem pedir uma avaliação do seu carro e a Carsales trata do resto.

O PWA também oferece dicas de especialistas por meio de avaliações, recomendações e conselhos sobre como cuidar do seu automóvel.

O que gostamos neste diretório PWA :

• Ótima experiência mobile-first
• Responsivo a qualquer tamanho de tela
• Experiência off-line fácil

Carigami

A Carigami é uma corretora francesa de varejo de automóveis que conecta fornecedores e locatários. O PWA fornece comparações confiáveis ​​de preços de carros de acordo com as preferências de pesquisa do usuário por cidade, idade do motorista, data e hora.

O aplicativo retorna os resultados da pesquisa em segundos completos com todos os detalhes de cada aluguel de carro.

O que gostamos neste diretório PWA:

• Tempo de carregamento rápido
• Resultados de pesquisa precisos
• Filtros de pesquisa

Brilhar

O Shine é o segundo maior portal de empregos da Índia, fundado em 2008. Ele combina candidatos a mais de 15.000 empresas em diversos setores.

Seu PWA é um dos melhores para um site de correspondência de empregos. Por exemplo, a procura de empregos específicos pode ser facilmente filtrada de acordo com habilidades, designação, departamento, indústria, localização e educação.

Os alertas de trabalho também são entregues perfeitamente ao dispositivo do usuário.

O que gostamos neste diretório PWA:

• Notificações via push
• Totalmente acessível
• Página off-line personalizada

Social ou Comunidade

Tinder

Quando o Tinder interrompeu o mercado de namoro, muitos usuários adoraram o aplicativo por sua abordagem inovadora de matchmaking.

Em 2017, a empresa investiu em seu próprio PWA após três meses de desenvolvimento. Os benefícios foram observados instantaneamente. Primeiro, conseguiu reduzir seu investimento em dados de 30 MB em seu aplicativo nativo para apenas 2,8 MB no PWA.

Ele também relatou um carregamento de página mais rápido e melhor engajamento dos usuários (em termos de swiping, mensagens, compras e sessões de gastos).

O que gostamos neste PWA social:

• Notificações via push
• Fácil de usar
• Desempenho otimizado (divisão de código baseada em rota)

Pinterest

Por três meses, o Pinterest, a popular plataforma de compartilhamento de imagens e mídia social, construiu um PWA para expandir sua base internacional de usuários. De acordo com o Google, em comparação com seu antigo site móvel que tinha 650 KB, o tamanho de 150 KB do PWA foi suficiente para impressionar seus usuários.

Os assinantes do Pinterest agora também podem esperar apenas 5,6 segundos para que a interface do usuário seja utilizável em comparação com os 23 segundos anteriores no aplicativo móvel anterior.

Os primeiros resultados da transição para o PWA foram promissores: mais de 40% de aumento no tempo gasto no aplicativo, os anúncios gerados pelo usuário aumentaram 44%, os cliques de anúncios aumentaram 50% e os principais engajamentos melhoraram em 60%.

O que gostamos neste PWA social:

• Notificações via push
• Baixo uso de largura de banda
• Suporte offline impressionante

Telegrama

O Telegram interrompeu o serviço de mensagens instantâneas em 2013, fornecendo uma ferramenta baseada em nuvem compatível com diferentes dispositivos.

Até o momento, mais de 400 milhões de usuários ativos mensais contam com esse serviço seguro multiplataforma para trocar mensagens de texto, fotos, vídeos e arquivos de áudio.

Quando seu PWA foi lançado para fornecer a mesma funcionalidade de seu aplicativo móvel nativo (mas em um tamanho mais leve), a empresa relatou um aumento de sessões por usuário e tempo de retenção em 50%.

O que gostamos neste PWA social:

• Instalável em iOS e Android
• Suporte off-line
• Manifesto

Twitter

Um dos primeiros PWA que foi lançado é do Twitter com seu Twitter Lite PWA em 2017. Os desenvolvedores de aplicativos mais tarde o usaram como modelo para integrar recursos de aplicativos nativos e da Web em um aplicativo mais ideal para dispositivos móveis.

Segundo o Google, o objetivo do PWA era melhorar o reengajamento de seus 250.000 usuários diários que verificam suas contas em média quatro vezes por dia.

Ao reduzir o consumo de dados, melhorar o carregamento instantâneo (5 segundos em uma rede 3G) e melhorar o engajamento do usuário, a empresa registrou um aumento de 65% nas visualizações de página por sessão, um aumento de 75% nos tweets enviados e uma queda de 20% na taxa de rejeição .

O que gostamos neste PWA social:

• Otimizado para navegador (divisão de código baseada em rota)
• Menos uso de largura de banda
• Atualizações rápidas

Instagram

O Instagram seguiu a estratégia do Twitter de oferecer um PWA assim que o aplicativo deste último foi lançado. No início de 2020, o Instagram também atualizou seu aplicativo do Windows 10 para ser um PWA completo com mensagens diretas.

Embora seu aplicativo nativo ainda seja comercializado, o site no navegador móvel de um dispositivo renderiza a mesma funcionalidade e experiência do usuário. Os usuários obtêm os mesmos recursos de que desfrutam há muito tempo no desktop e no aplicativo móvel.

O que gostamos neste PWA social:

• Notificações via push
• Tempo de carregamento instantâneo
• Resposta rápida

Viagens e Reservas

Airbnb

O Airbnb é uma plataforma online que oferece arranjos convenientes para aluguel e experiências turísticas em todo o mundo. Em 2008, a empresa começou a conectar proprietários de imóveis que desejam alugar seus quartos extras a viajantes que procuram acomodações acessíveis.

Dez anos depois, o PWA foi atualizado para funcionar bem com o Edge no Windows 10 mobile. O resultado são transições de página instantâneas mais perfeitas para os clientes. Até o momento, existem mais de 80 milhões de visitantes mensais no Airbnb, a maioria dos quais em seu aplicativo.

O que gostamos neste PWA:

• Notificações via push
• Resposta rápida
• Imagens de alta qualidade que carregam em segundos

Treebo

Outro líder na indústria de reservas online é a Treebo, uma plataforma de reservas de hotéis. Oferecendo opções de acomodação em mais de 165 cidades na Índia, os usuários podem comparar as opções para encontrar as melhores ofertas.

Segundo o Google, seu PWA carrega em apenas quatro segundos pela rede 3G. O site também informa que alcançou cinco vezes mais cliques e aumentou sua taxa de conversão em três vezes.

O que gostamos neste PWA:

• Renderização do lado do servidor
• Tempo rápido para interação
• Renderização progressiva (streaming HTML)

Nós vamos

Apelidado como o maior site relacionado a viagens nas regiões da Ásia-Pacífico e Oriente Médio, o Wego levou em consideração o comportamento de seus consumidores ao projetar seu PWA.

Como a maioria dos viajantes depende de seus telefones para salvar fotos, o espaço de armazenamento pode acabar facilmente. Além disso, viajar para lugares diferentes pode ser frustrante com conexões de internet lentas e instáveis.

Para que seus usuários tenham a conveniência de reservar quartos de hotel e voos, foi construído um PWA. Wego anunciou que reduziu o tempo de carregamento da página de 12 segundos para pouco menos de três segundos, de acordo com o Google.

O que gostamos neste PWA:

• Resposta extremamente rápida
• Design minimalista
• Resultados de pesquisa precisos
• Leve

MakeMyTrip

Uma das principais agências de viagens online da Índia, a MakeMyTrip juntou-se ao movimento PWA para melhor atender seus 8 milhões de visitantes mensais.

Depois de experimentar o sucesso em seu aplicativo nativo, a empresa descobriu que a conectividade limitada no país com limites de dados em smartphones inferiores pode tornar o acesso do usuário muito frustrante.

Além disso, notou que os visitantes passavam mais tempo em seu site do que em seu aplicativo nativo. Replicar a mesma experiência é, portanto, crucial para usuários de telefones celulares.

O resultado é um aumento colossal de 160% nas sessões de clientes e uma queda de 20% na taxa de rejeição, de acordo com o Google. Além disso, os compradores de primeira viagem provavelmente converteram três vezes mais do que aqueles que usaram o aplicativo nativo antes.

O que gostamos neste PWA:

• Navegação fácil
• Instalável em qualquer SO
• Tempo de carregamento rápido

Início de viagem

Aproveitando o sucesso de seu mercado online, a Jumia se aventurou no setor de viagens com a Jumia Travel. Seu PWA foi fundamental para aumentar o tráfego em doze vezes e as taxas de conversão em 33%, de acordo com o Google.

A Jumia Travel foi então adquirida pela Travelstart em 2019 para criar uma das maiores plataformas do setor de viagens. Os usuários móveis da Jumia Travel são redirecionados para o Travelstart mesmo no PWA, onde podem reservar voos, acomodações em hotéis e aluguel de carros.

O que gostamos neste PWA:

• Tempo de carregamento rápido
• Interface simples

Trivago

Para acomodar seus 120 milhões de visitantes por mês, a empresa de tecnologia alemã Trivago lançou seu PWA para ajudar mais usuários a pesquisar e comparar preços de hotéis antes de viajar.

Abrangendo quase 200 sites de reservas, o aplicativo funciona rápido em termos de gerar comparações de preços. Os usuários também podem usar convenientemente o mapa Trivago, avaliações reais de hotéis e consultar pesquisas anteriores para economizar tempo e largura de banda.

O PWA foi adicionado por mais de meio milhão de usuários de 55 países às suas telas iniciais, o que resultou em um aumento de 150% no engajamento e 97% nos cliques para ofertas de hotéis com base no relatório do Google.

O que gostamos neste PWA:

• Instalável no Android e iOS
• Excelente suporte offline
• Resposta rápida
• Filtros de pesquisa
• Suporte multilíngue

Uber

O PWA da Uber é um dos aplicativos mais exclusivos da atualidade. A empresa de carona colocou seu aplicativo Window 10 nos bastidores em 2018 em favor do PWA que foi lançado pela primeira vez em julho de 2019.

Comparado ao seu aplicativo móvel nativo, o PWA da Uber ocupa apenas 50 KB de espaço de armazenamento. Ele carrega muito rapidamente, o que o torna muito conveniente quando você está preso em uma área com uma rede fraca.

Dependendo da localização, a Uber oferece serviços de carona, entrega de comida, aluguel de bicicletas e scooters e compartilhamento de viagens aéreas com um toque no dispositivo móvel.

O que gostamos neste PWA:

• Tempo de carregamento rápido
• Suporte off-line
• Leve
• Processo de reserva extremamente rápido

Lyft

O concorrente do Uber, Lyft, que foi fundado em 2012, expandiu suas bases de passageiros e motoristas nos Estados Unidos e no Canadá.

Oferecendo tarifas mais baratas (em termos de um plano de assinatura para passageiros frequentes), a empresa conquistou uma enorme fatia de mercado que já foi dominada pelo Uber. Introduziu seu PWA em 2016

Para novos usuários, o PWA oferece um processo de registro fácil, bem como serviços de reserva, pelos quais seu aplicativo nativo é conhecido.

O que gostamos neste PWA:

• Tempo de resposta rápido
• Atualizações confiáveis ​​em tempo real

Tajawal

Um aplicativo de reserva de voos e hotéis muito popular nos Emirados Árabes Unidos, o Tajawal oferece soluções completas para acessar mais de 450 companhias aéreas e milhares de hotéis para viajantes.

O PWA funciona muito rápido e oferece soluções fáceis de reserva através de um processo simplificado. A interface é direta e foca principalmente nas reservas.

O que gostamos neste PWA:

• Carregamento de página muito rápido
• Transações seguras

FlyWeekend

Esta empresa única de reservas de viagens foi fundada em 2017 em Amsterdã. O objetivo é oferecer itinerários de viagem apenas nos finais de semana para que os usuários possam embarcar em um avião e experimentar um retiro de dois dias com base na recomendação do sistema.

Os usuários do FlyWeeked simplesmente inserem sua localização atual e selecionam um fim de semana em que gostariam de fazer uma pausa. Em seguida, o sistema fornece uma lista de cidades clicáveis ​​que o usuário pode optar por “deslizar” se não estiver interessado ou reservar a viagem.

O PWA é fácil de usar, o que garante maior engajamento devido ao conceito exclusivo.

O que gostamos neste PWA:

• Tempo de resposta rápido
• Carregamento rápido da página

primo legal

Visitar um país estrangeiro pode ser mais emocionante quando um local que compartilha seus interesses pode orientá-lo durante sua viagem. Com o Cool Cousin, os visitantes podem selecionar guias locais confiáveis ​​da cidade em sua plataforma fácil de usar.

Os chamados “primos” variam de cirurgiões a músicos, mas todos compartilham a mesma paixão por receber turistas em sua cidade natal.

Seu PWA foi lançado em 2018 para fornecer uma experiência de acesso mais rápida e suave entre seus usuários. Em sua atualização oficial, a empresa anunciou que o aplicativo reduziu o tempo de carregamento em 25% e diminuiu o acesso a outras fontes online pelos usuários.

O que gostamos neste PWA:

• Tempo de resposta rápido
• Navegação fácil

Entretenimento

Fatia de som

Aprender a tocar violão, piano, sax ou banjo agora ficou mais fácil com o Soundslice, um app que sincroniza notação musical com áudio real.

O PWA do Soundslice é perfeito para sessões de autoaprendizagem usando um dispositivo móvel. Ele permite que um usuário altere o tom, as seções de loop e anote a música. Por outro lado, os professores de música podem desenvolver sessões interativas utilizando a ferramenta.

As “fatias” de amostra permitem que os usuários reproduzam o áudio acompanhado por uma guia de linha vertical em movimento na partitura.

O que gostamos neste PWA:

• Design interativo
• Tempo de carregamento rápido

Spotify

Para o serviço de streaming de música digital Spotify, aproveitar um aplicativo leve por meio do PWA é essencial para atrair mais assinantes.

O aplicativo móvel e de desktop do Spotify são replicados no PWA, dando aos ouvintes a mesma conveniência mesmo ao ouvir offline. O PWA carrega muito mais rápido e as cores de fundo se adaptam aos gêneros do álbum para um toque mais personalizado.

O que gostamos neste PWA:

• IU adaptável
• Suporte off-line
• Design interativo

1Sintonizador

Ao contrário da crença popular, o rádio não está morto. Com 1Tuner, qualquer usuário pode ouvir estações de rádio (em qualquer lugar do mundo) e podcasts.

Eles podem até criar listas de reprodução para não perder as transmissões do Brasil ou as principais faixas tocadas nas estações locais de Londres.

O PWA funciona perfeitamente também. A seleção de uma estação de rádio específica permite que você ouça a transmissão em tempo real. Por outro lado, os podcasts são entregues com excelente qualidade de áudio.

O que gostamos neste PWA:

• Tema personalizável
• Grande número de recomendações de conteúdo

9GAG

O humor online nunca mais foi o mesmo desde o lançamento do 9GAG. Com memes, vídeos e imagens da internet compartilhados por usuários de todo o mundo, o site se tornou uma fonte de entretenimento.

No entanto, logo percebeu que seu antigo aplicativo nativo exigia mais tempo para carregar, especialmente quando o conteúdo de tendência envolvia muitos vídeos.

A 9GAG mudou para o PWA para reduzir a velocidade de carregamento da página e incentivar um melhor envolvimento do usuário. O site revelou que seus usuários permaneceram no aplicativo 25% mais tempo em comparação com seu aplicativo nativo.

O que gostamos neste PWA:

• Instalável no Android e iOS
• Suporte off-line
• Tempo de carregamento rápido

Lotto.de

As informações coletadas em tempo real sobre os últimos resultados da Euro loteria neste PWA fornecem um recurso útil para os jogadores.

O PWA carrega extremamente rápido e funciona bem com dispositivos low-end e em conexões de internet ruins. Para qualquer jogador de loteria que mal pode esperar para saber os resultados mais recentes, este PWA é um companheiro útil.

O que gostamos neste PWA:

• Experiência de usuário suave
• Disponibilidade em alemão e inglês

Resumindo os 50 melhores exemplos de PWA

Felizmente, esses exemplos de aplicativos da Web progressivos destacaram alguns dos principais pontos que abordamos neste guia.

Essas marcas investiram em seu UX móvel e colheram os benefícios. Você pode e deve seguir os passos deles e ir “primeiro em dispositivos móveis” com um impressionante aplicativo da web progressivo para o seu próprio negócio. Vamos dizer como, mas primeiro vamos responder a uma pergunta-chave – “e quanto aos aplicativos nativos?”

Talvez você estivesse brincando com a ideia de criar aplicativos iOS e Android por conta própria e foi desviado para olhar para os PWAs. Talvez você não esteja tão preocupado com o lançamento nas App Stores e só queira um site muito melhor.

De qualquer forma – vamos cobrir brevemente o debate “nativo vs PWA” e explicar por que achamos que um PWA é o mínimo e que o PWA + aplicativo nativo é o ideal.

Que tipo de aplicativo você deve construir? Aplicativos da Web progressivos versus aplicativos nativos

Há uma ideia por aí de que aplicativos da web progressivos e aplicativos nativos são rivais. Que os PWAs tornarão os aplicativos nativos irrelevantes e desnecessários. Que as empresas escolham entre construir um PWA e um aplicativo nativo e sempre optem pelo último.

Essa narrativa é equivocada e apresenta aplicativos nativos versus PWAs como uma escolha ou/ou, o que é uma falsa dicotomia. A verdade é que PWAs e aplicativos nativos são uma combinação brilhante e funcionam sinergicamente juntos. Eles cobrem as bases uns dos outros e garantem que você esteja oferecendo a todos uma experiência de usuário ideal, independentemente do canal.

Os PWAs se beneficiam do alcance, capacidade de descoberta e onipresença da web. Eles atraem tráfego orgânico e impressionam os visitantes de primeira viagem com uma experiência rápida e elegante, persuadindo-os a gastar mais tempo (e dinheiro) em seu site. Eles oferecem uma opção de instalação fácil que reduz o atrito e os gatekeepers e podem atrair até mesmo aqueles preocupados com o espaço limitado de armazenamento do dispositivo.

Eles fornecem o meio perfeito de construir uma conexão com novos visitantes e aqueles que estão engajados o suficiente para retornar, mas não o suficiente para baixar seus aplicativos nativos por qualquer motivo. Os PWAs são o meio perfeito de nutrir as pessoas através do seu funil.

Os aplicativos nativos, por outro lado, têm alcance e visibilidade ruins em comparação com os PWAs. Eles estão por trás dos “jardins murados” das App Stores e exigem um nível maior de comprometimento do usuário para instalá-los e baixá-los. Por outro lado, eles estão mais de acordo com os hábitos dos usuários existentes, permitem que você envie notificações push para usuários do iOS e podem aumentar a visibilidade/presença da marca nas App Stores.

Os aplicativos nativos são ótimos para seus principais leitores/clientes/usuários. Sua base mais fiel deve ser incentivada a baixar seus aplicativos nativos e acessá-los – por trás de uma tela de login ou até mesmo paywall – para que você possa reuni-los em um só lugar e realmente se concentrar em entendê-los e envolvê-los, maximizando o LTV e a retenção o máximo possível.

Os aplicativos nativos são uma ótima “casa” para seus maiores fãs.

O Google coloca assim:

“PWAs não precisam substituir aplicativos nativos; eles podem trabalhar em conjunto com eles. Os varejistas, por exemplo, podem usar um aplicativo nativo para engajar usuários fiéis com maior probabilidade de instalar um aplicativo, mas usam um PWA para alcançar facilmente novos usuários. Os usuários que interagem com o PWA podem ser solicitados a baixar o aplicativo móvel no futuro”

Nossa recomendação – construa ambos!

Se você tem orçamento limitado, opte por um PWA. Se você tem um aplicativo nativo, mas não um PWA, definitivamente deve criar um o mais rápido possível. Se você está totalmente comprometido em criar um UX otimizado para dispositivos móveis e capaz de investir para alcançá-lo, construa ambos e faça com que eles complementem os pontos fortes e fracos um do outro.

Você pode obter ótimos aplicativos nativos com o MobiLoud, tudo o que você precisa é de um site ou aplicativo da web. Entre em contato com nossa equipe para saber mais!

Como construir um aplicativo Web progressivo

O objetivo deste guia é fornecer uma visão geral completa de alto nível dos PWAs. As complexidades de seu desenvolvimento não são algo que vamos abordar, mas vamos apresentar suas opções para que você possa fazer a escolha sozinho.

Há muito conteúdo circulando on-line sobre como você pode criar um PWA em “10 minutos”. Com promessas de trazer essa sensação de aplicativo nativo para um aplicativo da web tradicional, tudo do zero em apenas menos de uma hora, é fácil ser atraído por esses tutoriais.

Mas é legítimo?

Sim e não. Esses “hacks” de PWA também servem para cumprir os critérios mínimos absolutos – HTTPS, manifesto da web e service worker. Se você estiver interessado em criar um aplicativo da Web progressivo muito básico e funcional, experimente o PWABuilder da Microsoft. Com um pouco de ajustes e conhecimento técnico, você pode colocar algo decente em funcionamento.

Para construir um aplicativo web progressivo único, otimizado e rico em recursos – que realmente cumpra seu potencial – você precisa investir mais. Para ver o porquê, vamos detalhar as etapas fundamentais.

1. Adquira um certificado SSL para ser configurado através do seu serviço de hospedagem
2. Desenvolver um shell de aplicativo
3. Verifique se o navegador oferece suporte a service workers
4. Registre o arquivo de trabalho do serviço
5. Adicionar notificações push e manifesto do aplicativo Web
6. Configure o prompt de instalação
7. Teste as funcionalidades do aplicativo
8. Auditar a lista de verificação do Lighthouse baseada no aplicativo
9. Corrigir erros
10. Inicie o aplicativo

Parece fácil, certo?

Na realidade, para fazer isso bem e construir um bom aplicativo da Web progressivo personalizado requer desenvolvedores front-end com experiência na criação de aplicativos da Web complexos.

O trabalho vital de configurar o service worker e o armazenamento em cache para um desempenho ideal é complexo e requer habilidade real. Então, dependendo de seus requisitos, você também pode precisar de designers que entendam a experiência do usuário do aplicativo nativo e como aplicá-la efetivamente na web.

A menos que você seja uma empresa muito grande, você provavelmente não tem um monte de desenvolvedores front-end talentosos esperando por você para dizer a eles o que fazer. Você precisaria encontrá-los, contratá-los, montar uma equipe e gerenciá-los – uma tarefa difícil se você não tiver experiência com essas coisas. Um bom desenvolvedor front-end também está sempre em demanda, e suas taxas de contrato refletem isso.

Custo e prazo de construção de um aplicativo da Web progressivo

Então, quanto isso custaria? Bem, é um pouco como o clássico “quanto tempo tem um pedaço de corda?”

Depende inteiramente da complexidade do aplicativo que você deseja criar. De acordo com os autores do The PWA Book:

Construir um PWA do zero levará algo entre 3400 wh (para um aplicativo pequeno) a 9000 wh (um projeto dedicado que fizemos). Isso significa um custo entre US$ 400 mil e US$ 1 milhão. O uso de uma plataforma em nuvem será pelo menos 75% mais barato e o Time to Market também será 75% menor (2-3 meses em vez de 8-12 meses).

– Capítulo 10, O Livro PWA

Isso parece caro, mas dá uma ideia de como grandes marcas como as que vimos acima investem em suas experiências.

É claro que se você estiver convertendo um site em um PWA em vez de construí-lo do zero, será mais barato e fácil na maioria dos casos. Como uma estimativa aproximada, você está investindo pelo menos 3 meses e US $ 20.000 a US $ 50.000 para obter um ótimo resultado.

Os desenvolvedores seguem diferentes fases do projeto, mas na maioria dos casos, envolve sete fases: descoberta, design, revisão, desenvolvimento preliminar, teste, correção de bugs e lançamento final.

Se o seu PWA for mais complexo, espere que sua conclusão dure mais, considerando as funcionalidades avançadas que precisam ser integradas, como GPS, suporte de mídia social e acesso à câmera.

Dito isto, PWAs simples podem levar menos de três meses (ou mesmo apenas algumas semanas, se forem esqueletos). Se você quiser ter recursos mais avançados, como painel de administração de back-end, padrões de visualização e outras integrações, ainda poderá ter seu PWA em menos de seis meses.

Isso pode parecer uma quantia considerável, mas se você colocar no contexto, vale a pena. Não apenas eles são mais acessíveis e mais rápidos de construir do que os aplicativos nativos, mas a velocidade e a experiência aprimorada do usuário provavelmente se pagarão a longo prazo.

Se você estiver no WordPress, existem algumas maneiras mais simples de transformar seu site WordPress em um PWA e alguns plugins WordPress PWA que você pode experimentar.

Podemos ajudá-lo a aconselhá-lo sobre suas opções e, se o seu site for adequado, use nossa plataforma personalizada para convertê-lo em um PWA em apenas 2 semanas, por uma fração do custo padrão. Também podemos criar aplicativos iOS e Android nativos do seu site em um prazo semelhante, para que você tenha todas as suas bases móveis cobertas para 2021 e além!

Entre em contato com um de nossos especialistas móveis para uma consulta para saber mais.

Está em suas mãos – comece a construir um aplicativo da Web progressivo hoje mesmo!

Você já deve ter uma boa visão geral sobre as características e o poder dos aplicativos da Web progressivos.

Para saber mais, confira estes recursos:

• O livro PWA
• Recursos do Google em web.dev e Google Developers
• Estatísticas de PWA (métricas interessantes e estudos de caso)
• PWA Roadshow do Google (ótima série de vídeos)
• As excelentes diretrizes de PWA da Mozilla
• O livro Progressive Web Apps de Jason Grigsby
• O que a Web pode fazer hoje? (mostra como a tecnologia da web se desenvolveu)
• Sim, esse projeto da web deve ser um PWA (excelente guia/artigo)
• Nosso guia sobre a diferença entre aplicativos nativos, web e híbridos

Agora é sua vez. Pode parecer uma tarefa assustadora – mas você precisa transformar seu site em um aplicativo da web progressivo para realmente ter uma presença na web impressionante, moderna e ideal.

Quando estiver pronto para ser lançado, você ficará feliz, garantimos. E seus clientes vão recompensá-lo gastando mais tempo, atenção e dinheiro interagindo com seu negócio.

Como mencionamos, um PWA não é um substituto para aplicativos nativos. Os PWAs são principalmente um site muito melhor. Pode ser difícil fazer com que os usuários os instalem em seus dispositivos, pois eles ainda não estão acostumados a isso, e você perde o envio de notificações push para usuários do iOS e uma presença da marca nas App Stores.

Você deve criar aplicativos nativos também?

Um PWA é obrigatório, mas os aplicativos nativos ainda são a melhor experiência do usuário móvel. A única razão pela qual alguns são cautelosos ou negativos sobre a perspectiva de aplicativos nativos é a grande despesa (US$ 50.000 ou mais) e o longo e trabalhoso processo de desenvolvimento que tradicionalmente os acompanha.

Se você compartilha essas preocupações, mas está interessado em criar aplicativos iOS e Android para sua marca, confira nossas plataformas News, Canvas for eCommerce ou Canvas. Seja qual for o certo para você – você pode converter seu site ou aplicativo da Web em aplicativos nativos de alta qualidade em apenas algumas semanas, por apenas US $ 100/m.

Nossas plataformas podem ser usadas para converter qualquer site em um aplicativo móvel. Não importa com o que seu site é construído. MobiLoud é ótimo para construir:

• Aplicativos do WordPress
• Aplicativos de bolha
• Aplicativos Squarespace
• Aplicativos Wix
• Aplicativos WooCommerce
• Aplicativos de fluxo da web

E qualquer coisa no meio! Você receberá notificações push ilimitadas no Android e iOS e terá todos os recursos necessários para criar uma presença multiplataforma vencedora na Web e nas App Stores.

Também podemos ajudá-lo com um PWA, para que você tenha o combo móvel ideal daqui para frente. Se isso soa bem - então entre em contato e reserve uma demonstração hoje. Se você decidir fazer outra rota, boa sorte em sua jornada. Esperamos que você tenha gostado dos exemplos de PWA e tenha se inspirado para ajudá-lo a prosperar no celular!