PWA vs. AMP: o que é melhor e como eles são diferentes um do outro?

Publicados: 2018-06-06

Cerca de uma década após o lançamento do primeiro iPhone, a web móvel está finalmente alcançando o estilo de vida de seus usuários. O aperto e o zoom foram eliminados por páginas responsivas. AMP e aplicativos nativos lutam contra tempos de carregamento lentos ...

Mas ainda há uma área de grande problema para a web móvel: engajamento. Os 1.000 principais sites móveis alcançam 4x mais pessoas do que os 1.000 principais aplicativos nativos. No entanto, esses sites envolvem os usuários por 20x menos minutos, em média, do que os aplicativos móveis.

Parece que os sites para celular podem atrair visitantes, mas não mantê-los. Uma das tecnologias mais recentes que resolve esse problema são os aplicativos da web progressivos.

O que são aplicativos da web progressivos?

Os aplicativos da web progressivos são experiências de sites móveis projetadas para parecer, sentir e funcionar da mesma forma que os aplicativos móveis nativos. Os usuários os encontram em um navegador como fariam com qualquer site móvel. Depois de interagir com esse site, o usuário é solicitado a instalar o aplicativo da web em seu dispositivo. Se eles decidirem instalar, o aplicativo será baixado para o dispositivo da mesma forma que um aplicativo nativo faria.

O termo “aplicativos da web progressivos” foi cunhado pelo Google em 2015. A empresa diz que os aplicativos da web progressivos atendem a três critérios:

  • Confiável - carregue instantaneamente e nunca mostre o downasaur, mesmo em condições de rede incertas.

  • Rápido - responda rapidamente às interações do usuário com animações suaves e sedosas e sem rolagem irregular.

  • Envolvente - pareça um aplicativo natural no dispositivo, com uma experiência de usuário envolvente.

Ao atender a esses requisitos, o aplicativo da web móvel pode ser oferecido para download aos usuários. Antes de nos aprofundarmos nos aplicativos da web progressivos, vamos voltar à superfície brevemente e definir os aplicativos nativos e outra tecnologia que acelera a web móvel, as Accelerated Mobile Pages (AMP).

O que é um aplicativo nativo?

Aplicativos nativos são instalados por meio de um mercado como a App Store ou Google Play e vivem como ícones na tela inicial de um dispositivo. Eles são projetados especificamente para um determinado dispositivo e podem usar todos os seus recursos, como GPS, câmera, lista de contatos e muito mais. Esses são aplicativos que provavelmente já estão em seu dispositivo, como Google Maps, Gmail ou Instagram.

O que é AMP?

O projeto Accelerated Mobile Pages de código aberto (AMP para abreviar) permite que os desenvolvedores criem páginas da web que carregam quase instantaneamente com uma linguagem de codificação exclusiva. Essa linguagem é uma versão simplificada de HTML e CSS que restringe o uso de JavaScript. Essas páginas são hospedadas em um CDN, que fornece uma versão em cache da página quando é visitada por um usuário.

Aplicativos da web progressivos x aplicativos nativos

Os aplicativos nativos oferecem experiências de usuário instantâneas e perfeitas e são suportados por grandes mercados como a App Store e o Google Play, então por que optar por um aplicativo da web progressivo em vez da versão nativa tradicional? Em um artigo para a Forbes, Andrew Gazdecki oferece uma explicação de alto nível:

Os sites para celular são rápidos e fáceis de acessar, mas tendem a ser menos agradáveis ​​em relação à experiência do usuário. Os aplicativos nativos fornecem a melhor experiência do usuário, mas são limitados a determinados dispositivos e têm grandes barreiras para adoção. Os aplicativos nativos exigem um download, o que significa gerar uma aceitação considerável dos consumidores primeiro e perder o benefício do comportamento por impulso. Entre essas opções está a mais nova solução móvel: o PWA.

Para uma explicação mais refinada, vamos dar uma olhada em algumas das maiores diferenças entre aplicativos nativos e aplicativos da web progressivos:

  • Uso de recursos: atualmente, enquanto os aplicativos da web podem tirar proveito dos recursos de um dispositivo, os aplicativos nativos podem ainda mais. Coisas como GPS, notificações push e gestos estão mais prontamente disponíveis em um aplicativo nativo.

  • Restrições de conteúdo: para dar ao seu aplicativo a chance de competir no Google Play ou na App Store, você terá que se submeter às regras do mercado. As restrições e taxas de conteúdo tornam difícil para alguns sites criar aplicativos nativos de sucesso. Para aplicativos da web, no entanto, nem restrições de conteúdo nem taxas são impostas, tornando mais fácil para qualquer pessoa criar um aplicativo, independentemente do tipo de conteúdo.

  • Conectividade offline: aqui, a vantagem vai para os aplicativos nativos, que oferecem um armazenamento em cache mais completo do que os aplicativos da web progressivos construídos em HTML5. Se seu aplicativo precisa funcionar offline, atualmente a melhor escolha é nativo.

  • Instalação: a instalação de um aplicativo nativo requer uma ação significativa em nome do usuário. Eles precisam abrir um marketplace, pesquisar um aplicativo e fazer o download. Tem que haver uma intenção séria. Para a instalação de um aplicativo da web progressivo, há muito menos atrito. Adicionar um ao seu dispositivo é como criar um favorito na tela inicial. É mais fácil instalar um aplicativo da web progressivo, mas o processo é muito menos familiar, o que pode inibir a adoção antecipada.

  • Velocidade: Atualmente, os aplicativos da web progressivos ficam atrás dos aplicativos nativos. No entanto, eles estão continuamente fechando a lacuna. Isso é especialmente verdadeiro quando você considera a próxima comparação.

Progressive web apps vs. AMP

Pessoas como Gazdecki acreditam que os aplicativos da web progressivos irão eventualmente substituir os aplicativos nativos, mas e quanto ao AMP? Onde as páginas aceleradas para dispositivos móveis entram aqui e há lugar para ambas? Algumas diferenças importantes entre esses dois:

  • Detecção: AMP vence esta batalha. O AMP recebe a ajuda de um carrossel nos resultados de pesquisa do Google, onde os aplicativos da web progressivos não têm um aumento na capacidade de descoberta do mecanismo de pesquisa.

  • Engajamento: os aplicativos da Web progressivos não se restringem ao uso de AMP HTML ou CSS, portanto, podem incluir um conteúdo muito mais envolvente do que as AMP. Qualquer coisa interativa que requer JavaScript não pode ser criada usando a estrutura AMP. Para AMP, o conteúdo dinâmico está fora de questão.

  • Velocidade: a vantagem aqui vai para o AMP pelo mesmo motivo que os aplicativos da web progressivos ganham engajamento. As AMP só oferecem suporte a conteúdo leve, mas isso torna o carregamento mais rápido.

Na Smashing Magazine, Paul Bakaus resume bem a compensação entre os dois formatos:

Para tornar a experiência rápida e confiável, você precisa viver com algumas restrições ao implementar páginas AMP. AMP não é útil quando você precisa de funcionalidade altamente dinâmica, como notificações push ou pagamentos pela Web, ou qualquer coisa que exija JavaScript adicional.

Além disso, como as páginas AMP geralmente são veiculadas a partir de um cache de AMP, você não terá os maiores benefícios do Progressive Web App nesse primeiro clique, já que seu próprio Service Worker não pode ser executado. Por outro lado, um Progressive Web App nunca pode ser tão rápido quanto AMP no primeiro clique, já que as plataformas podem pré-renderizar páginas AMP de maneira segura e econômica - um recurso que também torna a incorporação mais simples (por exemplo, em um visualizador embutido).

Mas, no final das contas, temos mesmo que escolher um em vez do outro?

Cooperação sobre a competição

Você pode optar por usar AMP apenas para criar uma experiência rápida, mas simples. Você pode contar com um aplicativo da web progressivo para criar uma experiência de usuário dinâmica, mas mais lenta. Ou você pode começar rápido e permanecer rápido incorporando ambos ao seu design da web.

Hoje, os usos de AMP junto com aplicativos da web progressivos estão se tornando mais prevalentes, com os desenvolvedores aproveitando ambos de três maneiras.

1. AMP como um aplicativo da web progressivo

Se o seu conteúdo é principalmente estático e você pode se contentar com a funcionalidade limitada do AMP, esta opção permite que você crie experiências ultrarrápidas como um aplicativo da web progressivo. AMP, por exemplo, é construída assim - aplicativo da web progressivo totalmente carregado com AMP. Possui um service worker, que permite acesso offline, bem como um manifesto, que exibe o banner “Adicionar à tela inicial”.

2. AMP para um aplicativo da web progressivo

Outra maneira de usar AMP e um aplicativo da Web progressivo juntos é pensar na página AMP como um gancho para seu site. Ele captura o usuário com uma carga instantânea e, em seguida, o reúne em seu aplicativo da Web progressivo. Isso permite combinar as páginas AMP de carregamento rápido com um PWA mais dinâmico do que a primeira opção.

3. AMP em um aplicativo da Web progressivo

Como foi o caso com AMP vs. PWA, não precisa ser tudo ou nada. Você não precisa criar todas as suas páginas com AMP; você também não precisa separar AMP e PWAs como gancho e haste. Agora, você pode fazer AMP em apenas uma pequena subseção de uma única página, diminuindo assim o tamanho e o tempo de carregamento sem a compensação completa da funcionalidade dinâmica.

Isso envolve o uso de outra forma de AMP chamada "Shadow AMP", que permite que as AMP se aninhem em uma área de uma página da Web. O resultado é AMP dentro do shell de um aplicativo da Web progressivo. Para vê-lo em ação, confira a demonstração que o Google criou, chamada ShadowReader:

Pronto para criar seu próprio aplicativo da web progressivo?

A criação de uma experiência rápida e semelhante a um aplicativo nativo com a descoberta da web começa aqui, onde você pode aprender todas as caixas que precisa verificar para atender aos critérios do Google para PWAs. Para obter mais informações sobre como usar AMP e PWAs juntos, confira:

  • Esta palestra de Ben Morss
  • Esta palestra de Eric Lindley

Quando estiver pronto, comece a usar o criador de páginas de destino pós-clique AMP no Instapage para oferecer a experiência do usuário mais rápida ainda.