Blog – 16.02.2018 O que é um aplicativo progressivo da Web (PWA) e por que eu deveria me importar?

Como você encontrou o caminho para este post de blog você provavelmente já ouviu o termo PWA em algum lugar. Bom para você – PWAs é o que o ano 2018 será lembrado, então você está bem no limite do sangramento. Que emocionante! Neste post de blog, eu explico o que o termo realmente significa e porque você deve se importar com ele.
Aplicativo Web Progressivo

Aplicativo Web Progressivo

(fonte: Google Developer site)

O que é um PWA?

PWA significa Aplicativo Web Progressivo. Vamos examiná-lo dividindo-o em duas partes. As duas últimas palavras (“Web Application”) falam por si mesmas. PWAs são aplicações web. Aqui, aplicação web significa simplesmente um aplicativo rodando como um website como, por exemplo, Twitter. A primeira parte do termo – Progressivo – significa que a experiência do usuário é aprimorada gradualmente com base nas capacidades do navegador. Essencialmente isto significa que o aplicativo web funciona bem em navegadores antigos, mas pode utilizar tecnologias mais recentes para melhorar a experiência se o usuário estiver usando um navegador que o suporte. Parece simples, certo? Então de onde vem o termo?

Progressivo significa que a experiência do usuário é aprimorada gradualmente com base nas capacidades do navegador

O termo foi introduzido pelo engenheiro do Google Chrome Alex Russell em seu post no blog em 2015. Desde então, o Google tem promovido ativamente o seu uso e fornecido muitos recursos sobre o tema, como um site explicando-os com mais detalhes.
Apesar de fazer apresentações sobre PWAs eu sempre encontro a mesma confusão neste ponto. “Então… É uma tecnologia? É uma tecnologia padrão? É algo que pertence/patenteia ao Google?” Não, nenhuma delas. É simplesmente um termo para descrever uma forma específica de desenhar e construir aplicações. A seguir, vamos tentar entender o que elas são, passando pelas características.
Aqui estão as 9 características originais do PWA de Alex Russell com uma explicação do que elas significam neste contexto:

  • Responsive: A página fica bem em diferentes tamanhos de tela (por exemplo, telefone, tablet, desktop)
  • Conectividade independente: Função sem ligação à Internet
  • Interacções semelhantes às da aplicação: Olhe’n’feel de aplicação nativa
  • Fresh: Sempre actualizado
  • >

  • Safe: Utilizar conexão segura para mitigar vários tipos de ameaças à segurança
  • Decifrável: Os navegadores identificam automaticamente os PWAs
  • Re-engatáveis: Pode trazer os usuários de volta ao aplicativo usando, por exemplo, Push Notifications
  • Instalável: Pode ser armazenado na tela inicial como aplicativos nativos, mas sem o incômodo extra da App Store
  • Linkable: Pode ser compartilhado como URLs simples

Para o leitor deste blog as funcionalidades mais importantes são:

  • Instalabilidade na tela inicial
  • Acesso a múltiplas APIs nativas como câmera, geolocalização, vibração, pagamentos, etc.
  • Suporte para notificações Push
  • Utilização Offline
  • Suporte para tela cheia e tela splash

(fonte: blog de Alex Russell post)

Para concluir tudo o que foi dito acima, os PWAs podem fazer a maioria das coisas que os aplicativos nativos podem fazer e a distância entre o que os aplicativos nativos e os aplicativos web podem fazer está ficando cada vez mais estreita.

Porquê Agora?

Por agora você pode estar pensando que tudo isso parece tão bom que deve haver um senão, já que os PWAs não são a forma padrão de implementar aplicações. Sim, você está certo. Há um senão. Tem havido uma falta de suporte para as tecnologias que capacitam os PWAs em alguns ambientes. O suporte ao Android já existe há algum tempo, a começar pelo Android 5, o que significa que mais de 80% (fonte: estatísticas Android do Google) dos dispositivos Android em todo o mundo suportam as tecnologias necessárias para implementar os PWAs. A adoção é ainda maior se você considerar apenas a Europa ou a América do Norte. Então o suporte ao Android já é realmente bom.
Felizmente, o outro jogador-chave que compartilha o mercado de celulares não tem estado muito ansioso para implementar as tecnologias (leia o porquê). O suporte ao iOS tem faltado, impedindo assim a adoção mais ampla dos PWAs. Mas a partir do próximo iOS 11.3, o suporte estará disponível também para o iOS. Felizmente, a adoção de novas versões do iOS é relativamente rápida, então um alto nível de suporte pode ser assumido que estará disponível ainda este ano. Para referência, as versões 10 e 11 representam 93% de todas as versões iOS usadas lá fora de acordo com a Apple.
Embora o foco quando se fala de PWAs seja muitas vezes no ambiente móvel, elas também funcionam para desktop. No início deste mês houve um anúncio importante da Microsoft afirmando que os PWAs são agora suportados pelo Edge e pelo Windows 10. Chrome e Firefox já estão suportando PWAs e o próximo lançamento do Safari.

Example: Twitter Lite

O exemplo mais famoso de PWAs é a versão do Twitter para PWA chamada Twitter Lite (tente com Android ou desktop no mobile.twitter.com). Twitter também publicou seu raciocínio por trás da construção da versão do PWA. Para destacar alguns dos fatos do post, comparado ao seu aplicativo nativo, o tamanho da versão PWA é de apenas 1-3% e o tempo médio de carga é 30% menor.
Outros exemplos bem conhecidos de PWAs incluem Forbes, Trivago, Washington Post, Telegram, Alibaba e, mais recentemente, Google Maps Go. Há também um diretório de PWAs disponível.

Conclusões

O ano de 2018 é esperado para os PWAs. As ferramentas já estão a um grande nível e cada vez mais PWAs estão a aparecer o tempo todo. Uma vez que o suporte em iOS está altamente disponível, os PWAs se tornam uma opção realista para aplicativos nativos. Caso você esteja considerando se os PWAs são a escolha certa para você, volte logo que eu escreverei um guia em Should I do a PWA instead than a native app?
Gofore já tem experiência em PWAs e também possui ampla experiência na construção de aplicativos web responsivos, de ótima aparência, offline-first e eficientes. Se você precisa de ajuda com escolhas arquitetônicas, design ou implementação de PWA, não hesite em nos contatar.

AURTRAS LEITuras do GOFORE BLOG

Agile Transformation in Action – Part 1
Agile Transformation in Action – Part 2
Qual é a escala de pontos Agile

Deixe uma resposta

O seu endereço de email não será publicado.