O que é PWA? Uma explicação fácil para quem não é técnico

Você deve saber de antemão que este post foi escrito sob o ponto de vista de um profissional de marketing. (Bem, eu posso ler e escrever um pouco de HTML e CSS, posso entender Javascript até certo ponto, mas isso não me torna um técnico).

O que é PWA?

PWA ( P rogressive Web A pps) permite que um navegador da Web tenha a aparência de um aplicativo móvel nativo (ou seja, aplicativos baixados das lojas iOS e Android). Esses aplicativos nativos são otimizados para uma experiência móvel suave, com algumas funcionalidades exclusivas, como notificações push da web. A tecnologia PWA aproveita a experiência de navegação na web em navegadores como Chrome e Safari, para que se aproxime de um aplicativo nativo. Isso, como resultado, aumenta o tráfego e o engajamento na web.

O termo foi introduzido pela primeira vez pelo Google em 2015. A parte “progressiva”, de acordo com Pete LePage – Google Developer Advocate, pode ser explicada como “ à medida que o usuário constrói progressivamente um relacionamento com o aplicativo ao longo do tempo, ele se torna cada vez mais poderoso ”.

O PWA é o mesmo que um site?

Sim, Progressive Web Applications são sites.

No entanto, graças à moderna tecnologia da web, eles apenas parecem um aplicativo. Isso significa que os usuários navegarão no Progressive Web Apps em seu navegador com uma URL, assim como fazem em qualquer site, mas logo após chegarem ao PWA, eles terão a experiência de usar um “app”, diretamente em seu navegador, sem a necessidade de Baixar e instalar.

Ser um “aplicativo” não significa que o PWA esteja limitado ao celular. Eles podem ser implementados no desktop também. Na verdade, é provável que você tenha visitado o PWA com frequência antes, mesmo sem perceber isso. Se você já navegou no Instagram, Pinterest ou Tinder em seu laptop, parabéns! Você encontrou alguns dos adotantes mais bem-sucedidos do PWA na web.

Vamos dar uma olhada em um exemplo de um site de PWA, pois ele pode ajudá-lo a entender o PWA com muito mais facilidade.

Um exemplo de PWA

O site de comércio eletrônico G-SP é um PWA. Quando você visita o site no celular, pode adicionar o URL do site à tela inicial do telefone.

Então, sempre que você quiser revisitar o site, ele estará lá com um ícone na tela inicial, como qualquer outro aplicativo como Facebook ou Linkedin.

Abrindo o aplicativo da web G-SP em sua tela inicial, você pode ver que o site agora está em tela cheia sem barra de pesquisa do navegador. Além disso, há um menu de navegação semelhante a um aplicativo na parte inferior. Além disso, quando você rola e toca, parece tão suave quanto manteiga, o que é diferente de alguma experiência de navegação na web que você pode ter tido antes.

 Leitura recomendada:
- Estudo de caso G-SP PWA: uma transformação para uma experiência móvel de alto nível
- Os 3 principais casos de uso do PWA

Dicas para saber se um site é um PWA

A menos que você seja um desenvolvedor e se aprofunde no código-fonte do site, não há uma maneira certa de saber exatamente se um site é construído com base na tecnologia PWA.

Dito isto, existem alguns truques que, embora não garantam um resultado exato, podem dar alguns sinais de que um determinado site é um PWA.

Site de página única

Essa é a maneira mais simples de saber se um site pode ser um PWA. É baseado na natureza do PWA: os Progressive Web Apps são tecnicamente um site de página única. Isso não significa que um site construído sobre o PWA tenha apenas uma única página. Isso significa que o evento de visualização de página acontece apenas uma vez, quando um usuário carrega inicialmente o site. Depois, todos os carregamentos de página são tratados por Javascript. Isso é diferente de sites normais, onde cada mudança de página faz com que uma página seja recarregada junto com toda a fonte HTML.

Então, como isso funciona? Bem, muito simples: dê uma olhada na aba ativa do seu navegador. Se o site for um PWA, quando você muda de página o site não recarrega, ou seja, não há animação de “carregamento” na aba do navegador.

Podemos dizer que o site do The New York Times não é um PWA:

Vamos dar uma olhada no nosso site, SimiCart, como exemplo:

Veja o que quero dizer? O site não recarrega quando você muda de página! Tecnicamente, você fica apenas em uma “página” o tempo todo. É por isso que as páginas PWA carregam tão rápido e sem problemas. Todas as páginas são pré-carregadas na primeira vez que você visita o site e entregues a você posteriormente. Eles não dependem da velocidade da sua rede e podem até funcionar offline!

Trabalhadores de serviço

Não, isso não é trabalhadores humanos. Service Workers é o nome da tecnologia por trás de um Progressive Web App, que potencializa sua capacidade offline, notificações push e armazenamento em cache de recursos. De acordo com o Google, os Service Workers estão no centro das técnicas de PWA. Portanto, se pudermos descobrir se um site usa a tecnologia Service Workers, podemos dizer se o site pode ser um PWA.

Se você estiver usando navegadores baseados no Chrome, poderá verificar isso facilmente usando a Ferramenta Inspector. Clique com o botão direito do mouse no site que deseja verificar, clique em Inspecionar elemento. Em seguida, vá para a guia Aplicativo > Service Workers. Você pode ver facilmente se há algum Service Workers nesse site.

Novamente, esse truque apenas dá uma dica da possibilidade de um determinado site ser um PWA. Embora seja uma parte essencial do PWA, os Service Workers não são exclusivos do PWA. Sites não-PWA também podem aproveitar os Service Workers para aprimorar sua funcionalidade.

Se você quer saber mais sobre o PWA Service Worker, temos um artigo exclusivo para você aprender tudo sobre essa tecnologia incrível.

Origem segura HTTPS

Você pode, no entanto, saber exatamente se um site não é um PWA observando sua URL. Se o URL de um site começar com http:// em vez de https:// , não é um PWA. Isso ocorre porque o PWA só pode funcionar em sites executados em um domínio seguro, que é HTTPS .

Quão popular é o PWA?

Como o Google sugere, o PWA é “o futuro do aplicativo móvel”, o PWA está ganhando popularidade, primeiro entre grandes players, depois empresas e organizações menores.

Ele está gerando competições em quase todos os lugares, desde a plataforma Windows até os principais mercados de aplicativos, como a Google Play Store

Você pode descobrir que muitos sites de grandes nomes são PWA como Telegram, AliExpress, FlipBoard e até mesmo as versões PWA de jogos PWA familiares como 2048 ou Web Flap.

Benefícios do PWA: O que os Progressive Web Apps podem fazer?

No momento em que este artigo foi escrito, o PWA já pode fazer a maioria das coisas anteriormente exclusivas de aplicativos nativos. Isso inclui acesso a funcionalidades no nível do dispositivo, como câmera e microfone, GPS, modo offline, acesso a arquivos e muito mais. Para obter uma visão geral do que o PWA é capaz, você pode dar uma olhada em https://whatpwacando.today/ .

Por isso, o web app é uma ótima opção para quem deseja melhorar a experiência mobile da sua marca online, sem investir em um app mobile.

Vamos nos aprofundar um pouco mais nos benefícios do PWA sobre aplicativos móveis normais e sites responsivos:

PWA vs site responsivo

Comparado, digamos, a um site , um PWA é superior pelos seguintes motivos:

• Velocidade: com o mesmo conteúdo, o PWA carrega mais rápido que os sites normais, graças à tecnologia Service Workers . É rápido no primeiro carregamento e ainda mais rápido no segundo carregamento, pois pré-armazena em cache todo o conteúdo e os entrega quando necessário.
• Modo offline: a disponibilidade offline também é possível com a tecnologia Service Workers. Com os service workers devidamente integrados, todos os conteúdos são pré-carregados na primeira vez que você visita o PWA e são entregues posteriormente usando Javascript, tornando o PWA a nova abordagem para sites cuja experiência ininterrupta é obrigatória . Temos um guia sobre como fazer seu PWA funcionar offline, caso você precise de um.
• Notificação por push da Web: assim como um aplicativo móvel nativo, o PWA pode enviar notificações por push para a tela inicial dos usuários diretamente dos navegadores da Web para dispositivos móveis. Isso é especialmente útil para as lojas de comércio eletrônico enviarem promoções e ofertas personalizadas para seus clientes. O Web push para PWA Android está ativado há muito tempo e, felizmente, chegará ao PWA iOS muito em breve.
• Adicionar à tela inicial : Esta função solicita que os usuários móveis “instalem” o PWA. Depois que o usuário aceitar o prompt, o PWA será adicionado à tela inicial do celular e será executado como qualquer outro aplicativo instalado. Aqui está o nosso guia para adicionar PWA à tela inicial. Não perca!

O antigo prompt "Adicionar à tela inicial" no Chrome será parecido com isto:

 >> Leitura recomendada: Comparação completa de PWA vs Website Responsivo

PWA x aplicativo nativo

E não apenas o PWA é melhor que os sites, mas as marcas também estão escolhendo PWAs em vez de aplicativos nativos por causa das seguintes vantagens que os PWAs trazem:

• Multiplataforma : uma vez que o PWA é construído, ele pode ser acessado através de qualquer plataforma móvel como Android, iOS ou Windows, já que o PWA é baseado em navegador, não baseado em sistema operacional.
• Atualizado: as alterações feitas no PWA entrarão em vigor imediatamente, assim que os usuários atualizarem a página.
• Indexabilidade : Como o PWA ainda é tecnicamente um site, seu conteúdo pode ser indexado e descoberto em mecanismos de pesquisa como o Google. Isso abre oportunidades para práticas de SEO (Search Engine Optimization), o que permite que o PWA alcance uma base maior de usuários em comparação com o aplicativo nativo.
• Não há necessidade de publicar : com aplicativos nativos, o processo de publicação das lojas de aplicativos às vezes pode ser um verdadeiro problema. Imagine enviar seu aplicativo para as lojas de aplicativos, esperando ansiosamente por 5 dias, apenas para receber de volta uma rejeição com um motivo que leva 10 vezes para reler e ainda não sabe do que está falando. E, em alguns casos, seu aplicativo pode nunca ser aceito. (Sex Shops ou produtos vape, alguém?). Com o PWA, não há envio de aplicativo. Que alivio! Caso você queira publicar seus PWAs na Apple Appstore, Google Play e Microsoft Store, veja como!
• Baixo custo de desenvolvimento : Como o PWA pode ser desenvolvido uma vez e depois estar disponível para qualquer plataforma móvel e navegador que o suporte, o custo de desenvolvimento do PWA é relativamente pequeno comparado aos aplicativos nativos. Outra razão é que o PWA usa linguagens de programação e tecnologias que são mais comumente compreendidas e têm uma base de desenvolvedores muito maior.

 Leitura recomendada:
- Progressive Web App vs Native App: Qual combina mais com você?
- Benefícios do PWA para e-commerce

Desvantagem do PWA

Obviamente, tudo isso parece bom demais para ser verdade; e quando algo parece bom demais para ser verdade, as pessoas costumam perguntar “Ok, qual é o problema”.

O PWA, apesar de suas características definidoras do setor, ainda tem suas desvantagens:

• Acessibilidade

Visto que a tecnologia ainda é nova e tudo mais, não há mercado de aplicativos atual para PWAs, o que, por sua vez, reduz sua capacidade de atingir uma ampla gama de públicos de certa forma. No entanto, existem movimentos de empresas conhecidas, como a Microsoft, com a incorporação de PWAs na Microsoft Store, fazendo com que o futuro de todas as coisas do PWA no Windows 10 não pareça tão improvável.

• Comunicação com outros aplicativos instalados :

Como o PWA ainda é fundamental e essencialmente uma página da Web semelhante a um aplicativo, ele pode ser limitado de várias maneiras. A maior limitação pode ser que a comunicação entre aplicativos é limitada , o que pode representar um problema para os desenvolvedores.

Perguntas frequentes

Para que serve o PWA?

Um aplicativo da web que é rápido, confiável e agradável de usar pode ser servido para muitos propósitos. Por exemplo, Tik Tok, os PWAs do Aliexpress fazem com que as pessoas se familiarizem com os sites, assim, solicitam que baixem seus aplicativos nativos. O Spotify usa o PWA para otimizar ainda mais o desempenho e a capacidade de resposta do site, oferecendo aos usuários outra opção além de baixar o aplicativo. Jogos como pacman ou 2048 também usam o PWA para alcançar mais usuários da web.

Qual é a diferença entre o PWA e um aplicativo normal?

Do ponto de vista técnico, um aplicativo nativo precisa ser baixado de sua loja de aplicativos enquanto você pode acessar o PWA via navegador da web. Do ponto de vista comercial, o PWA pode ser mais amigável ao SEO, mais barato e mais rápido de desenvolver. Enquanto isso, um aplicativo nativo ainda é melhor para projetos móveis complicados, além de poder criar uma credibilidade de marca mais forte.

O PWA funciona apenas em dispositivos móveis?

Não, o PWA funciona em desktop, celular e tablet.

Qual é a linguagem de programação do PWA?

O PWA é construído com linguagem de programação popular e tecnologias da Web, incluindo HTML, CSS, Javascript e WebAssembly.

Conclusão

“O PWA substituirá os aplicativos nativos?”

Achamos que não.

Ainda.

No quarto trimestre de 2019, havia quase 3 milhões de aplicativos no Google Play e mais de 2 milhões de aplicativos na Apple App Store (Statista, 2019). Esse número ainda está crescendo e não parece que todos esses aplicativos serão substituídos tão cedo. O hábito do usuário é uma coisa e não é fácil mudar.

Dito isto, os Progressive Web Apps têm um grande potencial. Na SimiCart, acreditamos que os Progressive Web Apps são o futuro. Com sua velocidade, flexibilidade de layout e capacidade de recursos, o PWA está destinado a substituir o site de desktop, o site móvel, os aplicativos móveis nativos e até os aplicativos nativos do Windows. Sim, você ouviu direito, aplicativos do Windows . Somente no mundo do comércio eletrônico, o Progressive Web App é atualmente a abordagem para os lojistas que desejam uma experiência leve, responsiva e envolvente para os compradores on-line.

De fato, as estatísticas mostram que um atraso de 1 mês na implementação do PWA pode resultar em perda de receita de até US$ 1,4 milhão e outros US$ 6,8 milhões se as marcas decidirem adiá-lo por seis meses.

Para proprietários de lojas de comércio eletrônico que procuram uma solução Magento PWA perfeita, aqui no SimiCart oferecemos um pacote completo para você e sua loja.