Real Talk: PWAs de comércio eletrônico e os desafios de construir um

Em 2016, o comércio eletrônico atingiu um marco importante: os dispositivos móveis ultrapassaram os desktops e laptops como a maneira mais popular de navegar na Internet.

As lojas online não podiam mais tratar seus usuários móveis como uma reflexão tardia. Agora, a experiência móvel é o aspecto mais importante dos sites de comércio eletrônico.

As lojas online responderam a essa mudança tornando seus sites responsivos, o que significa que eles se ajustam automaticamente às telas menores dos dispositivos móveis.

Muitas lojas também desenvolveram seus próprios aplicativos nativos para dispositivos móveis, já que os aplicativos nativos têm funcionalidade offline e são mais rápidos que os sites responsivos. A velocidade é particularmente importante para a experiência móvel – de acordo com o Google, 53% dos usuários móveis deixarão uma página se ela demorar mais de três segundos para carregar.

Outra vantagem para aplicativos nativos? Os usuários podem instalar um ícone para eles na tela inicial, o que mantém sua marca fresca em sua mente e gera mais vendas para sua loja.

Mas, aplicativos nativos também têm problemas. Por um lado, eles são inconvenientes. Os usuários devem procurá-los em uma plataforma de distribuição como a Apple App Store ou o Google Play e depois baixá-los para usá-los.

O que é um PWA?

As aplicações web progressivas (PWAs) surgiram como a solução para esses problemas.

Os PWAs funcionam como uma combinação entre sites responsivos e aplicativos nativos. Como um aplicativo nativo, eles são rápidos, têm funcionalidade offline e podem ser configurados como um ícone na tela inicial. Mas, ao contrário de um aplicativo nativo, eles não precisam ser baixados de uma loja de aplicativos. Os PWAs podem ser acessados ​​simplesmente clicando em um link ou digitando um URL na barra de endereços do seu navegador, como qualquer outro site.

Interessado em fazer um PWA para sua loja online? Você deve estar ciente de que é um processo muito complexo e caro que requer coordenação entre as equipes de engenharia e vários fornecedores de tecnologia. Os custos iniciais podem variar de US$ 250.000 a mais de US$ 1.000.000 com base na complexidade da compilação e um adicional de US$ 3.000 a US$ 10.000 ou mais em taxas de assinatura mensais, dependendo dos fornecedores.

Detalharemos tudo o que é necessário para fazer um PWA abaixo.

Tecnologias necessárias para construir PWAs

Dadas as capacidades avançadas dos PWAs, não deve ser surpresa que eles possam ser difíceis e demorados para desenvolver. Existem muitas tecnologias diferentes envolvidas no processo, e os comerciantes de comércio eletrônico devem encontrar especialistas para cada uma dessas tecnologias e geralmente precisam contratar vários fornecedores para criar seu PWA.

Especificamente, as oito tecnologias a seguir compõem a base dos PWAs:

1. PIM/OMS sem cabeça

Toda loja online precisa de um sistema de gerenciamento de informações do produto (PIM) ou sistema de gerenciamento de pedidos (OMS). Isso serve como back-end do seu site, permitindo que você edite suas listagens e acompanhe seu estoque, pedidos e remessas em tempo real.

Para fazer um PWA, seu PIM ou OMS também precisa ser headless, o que significa que você pode conectá-lo a um sistema separado para sua experiência de frontend/usuário.

Felizmente, as plataformas PIM e OMS populares investiram em tornar seus sistemas compatíveis com o comércio sem cabeça. Shopify, BigCommerce e Magento possuem interfaces de programação de aplicativos (APIs) robustas que permitem conectar sua tecnologia a outro sistema.

2. Camada de middleware

Uma camada de middleware é necessária para enviar dados de seu back-end de comércio eletrônico para sua vitrine de front-end e vice-versa.

As APIs fornecidas por Shopify, BigCommerce, etc. são essencialmente esboços que informam aos seus desenvolvedores como integrar sua plataforma a outra. Middleware é o software que trabalha com a API para facilitar a comunicação entre duas plataformas.

3. CDN

Como mencionado acima, velocidade é tudo quando se trata de PWAs. Os usuários móveis simplesmente não toleram um desempenho ruim.

A distância física desempenha um papel fundamental na velocidade do site. Quanto mais distante um usuário estiver de um de seus servidores, mais tempo levará para que os elementos do seu site sejam carregados para eles.

Redes de entrega de conteúdo (CDNs), como Fastly, mantêm dezenas de servidores e data centers distribuídos em todo o mundo. Os lojistas podem acessar a infraestrutura de uma CDN para melhorar a velocidade do site em troca de uma taxa recorrente.

4. RSS

A renderização do lado do servidor (SSR) é outra técnica usada para melhorar o desempenho dos PWAs.

Com o SSR, as páginas são renderizadas totalmente no servidor e, em seguida, enviadas ao navegador do usuário, o que resulta em um tempo de carregamento de página mais rápido e uma experiência de usuário aprimorada.

O SSR também tem benefícios de otimização de mecanismo de pesquisa (SEO). Os mecanismos de pesquisa não são capazes de indexar efetivamente aplicativos que renderizam no navegador do usuário (isso também é conhecido como renderização do lado do cliente ou CSR), mas eles não têm problemas com o SSR. Os tempos de carregamento rápidos também ajudam o SEO, pois incentivam os visitantes a permanecer no seu site em vez de recuar. Aumentar a quantidade média de tempo que as pessoas gastam em seu site melhorará sua posição nos rankings de pesquisa.

É impossível exagerar a importância do SEO. Quarenta e três por cento do tráfego para sites de comércio eletrônico vem da pesquisa orgânica – isso é muito mais do que qualquer outra fonte. Na verdade, é mais do que tráfego direto (20%), anúncios de busca paga (18%) e email marketing (4%) combinados.

Sem classificações altas nos resultados de pesquisa, sua loja pode não receber a quantidade de tráfego necessária para sobreviver. O SSR aumentará sua velocidade, melhorará seus rankings de pesquisa e aumentará o tráfego para sua loja.

5. Trabalhador de Serviço

O service worker é um script que cria um cache e, em seguida, recupera recursos desse cache quando necessário. Ele é executado em segundo plano de um navegador, separado da página - é assim que os PWAs podem funcionar mesmo quando não há conexão com a Internet.

6. Shell do aplicativo

O cache criado pelo service worker também permite que você use um shell de aplicativo, que é o código mínimo necessário para a interface do usuário do PWA. O shell do aplicativo torna seu PWA mais rápido porque mantém o conteúdo estático armazenado em cache e pronto, portanto, apenas o conteúdo dinâmico precisa ser carregado.

7. Manifesto do aplicativo da Web

Uma certa quantidade de informações é necessária para que o navegador saiba o que fazer quando o usuário clicar no ícone da tela inicial do seu PWA. O manifesto do aplicativo da Web fornece essas informações, que incluem um link para a imagem do ícone do seu PWA, bem como o link para o próprio PWA.

8. Vitrine

Por fim, você precisará codificar uma vitrine personalizada usando a estrutura React ou Vue para seu PWA. É aqui que os usuários realmente interagem com seu site, tornando-o especialmente importante, demorado e caro para desenvolver.

Você simplesmente não pode se dar ao luxo de economizar nesse aspecto do seu aplicativo. Um design pouco atraente ou difícil de navegar fará com que você perca vendas em potencial e afaste os visitantes para seus concorrentes.

A linha inferior

O método tradicional de desenvolvimento de PWAs pode não ser viável para pequenas e médias empresas.

Para fazer isso internamente, você precisaria pagar por muito mais horas de trabalho de seus desenvolvedores. Além disso, seus desenvolvedores atuais podem não ter as habilidades necessárias para criar um PWA. Nesse caso, você precisaria adicionar novos trabalhadores altamente qualificados à sua folha de pagamento. Você pode pagar isso?

Outra opção é terceirizar algumas ou todas essas tarefas de desenvolvimento para fornecedores terceirizados. Mas, novamente, isso é uma despesa e tanto. Além do custo de criação de um PWA, você deve considerar que também precisará pagar muita manutenção e gerenciamento ao longo do tempo.

Não há maneira de contornar isso - desenvolver um PWA da maneira tradicional realmente custaria a você.

Adam Ritchie é um escritor freelance baseado em Silver Spring, Maryland. Ele atualmente escreve para Shogun, e seus clientes anteriores incluem Groupon, Clutch e New Theory.