O que é e como começar com PWA (Progressive Web Apps)?

Tempo de leitura 6 minutos

PWA é o acrônimo para Progressive Web Apps (Aplicativos Web progressivos) e nada mais são que aplicativos comumente construídos para web (HTML, CSS e Javascript) e que “se transformam” em aplicativos nativos.

A grande verdade é que muitos recursos que eram exclusivos dos apps nativos estão diponíveis AGORA para projetos nativamente web, graças as APIs do HTML 5.

Progressive Web App (PWA) é um termo usado para denotar uma nova metodologia de desenvolvimento de software. Ao contrário dos tradicionais aplicativos, um Progressive Web App pode ser visto como uma evolução híbrida entre as páginas da web regulares (ou sites) e um aplicativo móvel. Este novo modelo de aplicação combina recursos oferecidos pelos mais modernos navegadores, com as vantagens de uso de um celular.

https://pt.wikipedia.org/wiki/Progressive_web_app

Aplicativos nativo versus híbridos

Há algum tempo, em um plantão de dúvidas, eu me atentei para uma confusão que não deveria existir, então vou separar uma parte deste artigo para falar disso.

No plantao de dúvidas em questão, me confrontaram com uma afirmação que me deixou surpreso, lembro de eu ter dito que PWAs eram nativos e ouvi o seguinte.

Devemos tomar cuidado com afirmaçõe erradas, PWAs são híbridos e não nativos.

Autor desconhecido

Na verdade é quase isso, PWAs são apps híbrido sim, mas ser híbrido não quer dizer que não são nativos.

Um aplicativo híbrido é o que é desenvolvido e “entregue” para vários sistemas operacionais/plataformas.

Quasar e Flutter criam aplicativos híbridos.

Um app nativo é o que tem o melhor acesso aos recursos do sistema operacional em que está localizado e, PRINCIPALMENTE, o que se armazena no dispositivo.

O que acontece MUITAS vezes em aplicativos desenvolvidos diretamente para aquela plataforma específica é exatamente isso:

  • O desempenho é passivo de ser melhor, o que acaba dependendo muito da implementação do dev (mas num geral: sim, é melhor) .
  • Tira melhor proveito de todos o recursos disponibilizados pelo sistema operacional.
  • O aplicativo é armazenado diretamente no dipositivo, fazendo com que internet seja obrigatório para acessa-lo, embora muitos apps acabem precisando do mesmo jeito.

O que acontece é que, com o tempo, o entendimento de nativo mudou e se tornou um “versus” do híbrido, não levo isso como totalmente correto e não concordo que projetos desenvolvidos com ferramentas/tecnologias híbridas não o sejam [nativo].

Eu vejo MUITAS definições por ai de apps nativo sendo o que é desenvolvido exclusivamente para uma plataforma específica, mas isso não é totalmente verdade no meu ponto de vista.

Erik Figueiredo

Um app pode ser híbrido e nativo ao mesmo tempo.

O PWA já beira o nativo, ele está na fronteira e em algumas definições ele já é nativo de verdade.

No fim das contas, é uma discussão quase trivial. É importante? Talvez. Eu vou entrar em discussão sobre isso e defender meu ponto de vista até o fim? Não, até porque eu me sinto do direito de mudar minhas ideias, personalidade e opiniões quando bem entender.

Porque PWA (Progressive web app)?

Essa é simples, PWA é mais barato e vai a favor “da corrente”.

O grande problema de “aplicativo nativos” é o valor que agregam versus seus custos, da visão do cliente que vai baixar, não vale a pena na maioria das vezes.

Muitas vezes vale mais a pena acessar o site da loja virtual e fazer uma compra que provavelmente não vai mais se repetir do que baixar o aplicativo, comprar e apagar depois.

Erik Figueiredo

O grande problema, talvez maior do que esperar pelo download do app é o espaço que ele consome, se for pensar bem, você está concorrendo diretamente com minhas lembranças importantes (fotos e vídeos minhas e de pessoas queridas) e apps como Whatsapp e Facebook que fazem parte quase obrigatória do dia a dia das pessoas.

Apps como Slack do trabalho, Facebook e Whatsapp são muito mais importantes que o do Mercado Livre pra mim, mas até eles podem sucumbir ao botão de desinstalar se eu tiver que escolher entre eles e fotos e vídeos da minha família.

Se eu precisar de espaço, quem vai embora do meu celular primeiro?

É por isso que ano após ano, apps baixados das stores estão caindo em desuso, e isso é um fato, existem muitos gráficos e estudos na internet, principalmente em artigos sobre PWA (por isso não vou me aprofundar).

Um fato importante para reforçar aqui é que parece que os apps nativos estão morrendo e essa não é a verdade, o que estão morrendo são apps que poderiam ser web.

Não gaste recursos com apps que poderiam ser sites.

Quais os pilares do PWA?

Antes de nos aprofundarmos no assunto é importante definirmos, neste primeiro momento, que o PWA está fundado sobre 3 pilares.

Confiabilidade

Em primeiro lugar, você precisa garantir que seu usuário terá a confiança que o seu app vai estar disponível quando ele for necessário. Precisar de um site e não ter internet está entre as PIORES experiências que existem, logo antes de chutar a quina com o dedão do pé e depois do filme do Lanterna Verde.

Com os service workers do PWA (nome complicado para algo simples) você consegue mapear o que vai ficar disponível offline e como passe de mágica, quando o usuário acessar seu app, ele vai estar disponível em cache, mesmo desconectado da internet.

Lindo!

Rapidez

Como o item anterior elimina a necessidade de espera para baixar o app da internet a partir de primeira visita, este item está mais relacionado com animações e desempenho de memória (sim, é possível fazer algo pesado para memória e cpu com HTML, CSS e Javascript – pergunte ao sobrinho do cliente).

Tome cuidado para não exagerar com as transições e rolagem da página, tente usar um padrão conhecido (Material Design, por exemplo) ou Bootstrap.

Ter/ser um bom design ou UX também é uma saída.

Além disso, cuidado com as chamadas ajax em servidores externos, nunca demore mais que 3 segundos para retornar alguma informação.

Atração

Ser atraente é outro ponto, mas eu nem vou entrar em méritos de design do seu app, vou falar do Manifesto.

Manifest.xml|json é um arquivo que fica no seu app e que é responsável por configurar ele como PWA, nele teremos os ícones para quando estiver instalado no dispositivo, título, descrições, cores padrão, permissões (como push notifications)…

Todo PWA é instalável, isso quer dizer que ele começa como um site e pode se tornar um app instalado no dispositivo, isso é incrível da visão da atração, já que vai estar lá na lista de aplicativos do dipositivo.

O que é preciso para um app web ser PWA?

PWA está mais para um conceito do que uma técnica, na verdade PWA é um conjunto de técnicas focadas em dar uma experiência mais próxima a de um aplicativo nativo, para um projeto ser PWA ele precisa seguir as seguintes regras.

  • Progressivo: para qualquer usuário, independente do browser
  • Responsivo: feito para qualquer dispositivo: desktop, tablet e mobile
  • Conexão: funciona mesmo se o usuário estiver offline
  • App-like: o usuário se sente em um aplicativo nativo
  • Atualizado: não é necessário baixar atualizações do aplicativo, o browser simplesmente irá detectar e atualizar automaticamente, caso necessário.
  • Seguro: somente com https
  • Engajável: o usuário pode ser constantemente engajado (através de push notifications, por exemplo).
  • Instalável: é possível adicionar um ícone na tela principal do smartphone com apenas um clique.

Parece muita coisa mas se você seguir alguns passos e usar o Lighthouse para validar, vai perceber que é bem simples.

SPA

SPA é o acrônimo para Single Page Application (ou aplicativo de página única, em tradução direta) e é a base do PWA, é esse cara que cria toda a “experiência app” que o usuário terá.

Indo além do PWA, aplicações SPA são ideais para se trabalhar com desenvolvimento híbrido, ou seja, desenvolver um app que possa ser publicado em diversas plataformas diferentes, como Web, Mobile e Desktop.

Eu falei aqui sobre um cara bem legal, o Quasar Framework, fica a dica para vocês, mas é importante saber que ele não é o único com essa proposta, é só a ponta do iceberg.

Manifest

Web App Manifest é um arquivo bem simples com informações sobre o seu PWA, como título, ícones, decrição e cores.

Ele basicamente configura informações básicas do app, uma dica legal é que você pode “debugar” estas informações no navegador, acessando o developer tools (ctrl+shift+i ou botão direito do mouse > inspecionar) e acessando a guia Application > Manifest.

Service worker

Esse é o cara, a magia do PWA!

O service worker é um arquivo Javascript fica trabalhando em background, fazendo todo o trabalho que o Javascript que rola direto na página não faria sozinho, como disponibilizar os arquivos para uso offline ou executar tarefas quando sua página não está aberta (disparar push notifications, por exemplo).

Como já foi dito, o service worker é apenas um arquivo javascript, eu ainda não falei dele aqui no blog, mas está na lista de artigos que vou publicar.

Exemplos de projetos PWA.

Um excelente site para ver alguns exemplos de projetos PWA é o PWA.Rocks, foi o primeiro lugar em que vi e testei aplicativos progressivos de verdade.

https://pwa.rocks/

Eu separei alguns que acho bem legais.

A experiência só será completa se você abrir no seu celular, já que você (possivelmente) verá o banner de instalação, mas mesmo no desktop vale a pena você desconectar a internet e ver que a página continua abrindo.

É bem legal.

Conclusão

É claro que eu pretendo escrever artigos mais práticos e menos teóricos sobre PWA, mas esse aqui é muito importante também, bem vindo ao futuro.

Autor: Erik Figueiredo

Músico, gamer amador, tutor de programação, desenvolvedor freelancer full cycle, com foco em PHP (Laravel e CakePHP), Javascript (Front e Node.js), Dart (Front e Flutter) e infra.

Um comentário em “O que é e como começar com PWA (Progressive Web Apps)?”

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *