PWAs vêm sendo uma verdadeira buzzword na comunidade JavaScript nos últimos anos. Esse interesse se deve em muito às novas possibilidades e experiências que os PWAs trazem aos desenvolvedores. Quer saber mais? Então embarque nessa série de artigos com dicas valiosas sobre PWAs e como construir seu primeiro Progressive Web App.

Uma breve história dos PWAs

O termo Progressive Web App foi criado e impulsionado pela Google, gigante do software, a partir do ano de 2015. A ideia de aplicativos web que poderiam instalados no smartphone, entretanto, foi apresentado por Steve Jobs em 2007.

Desde então, os PWAs cresceram em comunidade e apoiadores, conseguindo inclusive que Google e Microsoft somassem esforços em 2018. Em 2019, podemos citar a decisão da gigante Google ao liberar a publicação de PWAs na sua loja de aplicativos. Mas o que faz com que uma modalidade de aplicativos desperte tanto interesse?

Os motivos são inúmeros. O declínio nos downloads de aplicativos e a demanda por experiências web completas, e a adoção de players consolidados no mercado* são fatores que devem ser observados com atenção.

*Grandes nomes do mundo mobile, como Twitter, Facebook, Tinder e Uber já testaram e comprovaram as vantagens dos PWAs. Isso porque links para acesso a PWAs têm uma conversão de 5 a 6 vezes maior do que aplicativos nativos.

Neste aspecto, os PWAs provam seu valor. Dentre suas vantagens, podemos destacar a capacidade de resolver antigas limitações dos aplicativos web normais, como:

• O acesso a funcionalidades offline;

• Uma implementação SEO sólida;

• Engajamento através de notificações;

• Estar disponíveis na tela inicial dos usuários;

• Por fim, portar-se como um cidadão de primeira classe no mundo dos aplicativos.

De forma simples, podemos os PWAs como “aplicativos web que tomaram o conjunto certo de vitaminas”.

Dica: Este é o primeiro de uma série de artigos que vão mostrar como construir a nova geração de aplicativos web e publicá-los em canais como a web, Play Store e App Store. Já sabe tudo sobre o que é um PWA? Então saca só o próximo artigo da série: Configurando PWAs universais com React e Capacitor.

O que são PWAs? Do que se alimentam?

No artigo "Seu Primeiro Progressive Web App", desenvolvedores da Google descrevem uma série de fatores que caracterizam um PWA.

As características apresentadas no artigo focam-se em muito mais em funcionalidades do que tecnologias. Entendê-las, entretanto, é um passo vital para a construção de um PWA de sucesso.

• Progressivo: funciona para todos os usuários, independentemente do navegador ou dispositivo, por ser construído com a adaptação em mente.

• Universal: se adaptar a qualquer tamanho de tela mantém sua importância, mas é hora de ir além. Por isso, tomo a liberdade de ir além do “responsivo” nesse aspecto.

Um PWA de sucesso deve ser capaz de se adaptar ao dispositivo, levando em consideração suas limitações de hardware e sistema operacional.

• Aparência nativa: usuários Android estão acostumados com uma experiência Android. O mesmo serve para usuários iOS. PWAs levam os critérios de apreensibilidade de software muito a sério neste aspecto.

• Atual: possibilita que o usuário esteja sempre com as últimas atualizações e funcionalidades devido ao processo de atualização dos service workers.

• Seguro: segurança pode e deve ser um aspecto primário de preocupação no seu aplicativo. Por este motivo, PWAs são construídos para operar em contextos HTTPS, evitando que as informações de seus usuários sejam violadas.

• Descobrível: is identifiable as an “application” thanks to W3C manifest and service worker registration scope, allowing search engines to find it.

• Reengajável: makes re-engagement easy through features like push notifications.

• Instalável: possibilita aos usuários adicionarem o seu aplicativo à tela inicial caso achem a experiência positiva. Com os service workers, ainda, seu aplicativo pode ser salvo na memória do smartphone e executado de forma offline.

• Linkável: chega de enviar um link de download das lojas de aplicativo para seus possíveis usuários. Devido à sua natureza web, PWAs não dependem de um processo de download e instalação para funcionar.

São seus usuários a um link de distância do seu app.

Um jeito livre e multiplataforma de ser

Ferramentas que facilitam a execução e distribuição de PWAs em múltiplas arquiteturas e contextos vêm se tornando uma realidade mais concreta a cada dia. Com eles, uma nova geração de aplicativos vêm surgindo, extrapolando cada vez os limites das plataformas e navegadores.

As diretrizes que definem um Progressive Web App, por outro lado, baseiam-se em conceitos e funcionalidades, não tecnologias. Por isso, você pode encontrar certo grau de dificuldade e pesquisa até encontrar a stack certa.

Mas que tal ver alguns exemplos de bibliotecas e frameworks para começar? Entre as possibilidades, aqui está uma receita que pode te colocar no caminho do seu primeiro PWA.

Receita para um PWA de sucesso

1. Ingredientes

• Uma tecnologia JS de sua preferência

Seja sua praia JS vanilla, React, Angular, Vue, Aurelia, ou insira seu framework de preferência aqui, o importante é escolher com qual você se sente confortável para começar!

• UI kits com aparência nativa

UI Kits não poderiam ficar fora dessa lista por facilitarem — em muito — a implementação de uma UI coesa entre plataformas e dispositivos. Como dica, deixamos o trabalho excelente feito em bibliotecas como Ionic, Onsen e Framework7, ambas framework agnostic.

• Um framework de execução e publicação em múltiplas plataformas

Nós ensinamos a uma geração de usuários que aplicativos são baixados em lojas de aplicativos, não na web.

Nesse contexto, não ter uma presença nas lojas pode significar uma base menor de usuários e um sucesso menor para o app.

Para evitar que isso aconteça, ferramentas como o Capacitor foram criadas. Através dela, você pode empacotar seu código para a plataforma ou loja desejada, possibilitando que o mesmo código fonte seja ela a web.

2. Modo de preparo

• Desenvolva seu PWA com adaptação em mente

O sucesso de um aplicativo está intimamente conectado com a sua base de usuários ativos. Alcançar um número de usuários dependerá muito da capacidade do seu aplicativo de se adaptar ao dispositivo onde ele está sendo executado.

• Teste em vários dispositivos e navegadores

No mundo mobile, ultrapassamos a barreira do cross browser e chegamos à barreira do cross device. Testar seu PWA em vários smartphones e navegadores pode evitar diversas dores de cabeça ao liberá-lo para o mundo real.

Pro tip parte II: Uma boa experiência de usuário pode aumentar significativamente suas taxas de conversão.

• Desenvolva com reutilização em mente

Desenvolver componentes de código com um baixo nível de acoplamento e alta capacidade de reuso é sempre uma boa ideia. Sejam componentes de UI, serviços de integração com APIs ou animações: Crie seus artefatos de código aproveitando as vantagens de executá-los na web, mobile e desktop.

Dessa forma, você pode focar na agregação de valor para o business do seu aplicativo.

Concluindo…

PWAs são uma grande mudança no paradigma da programação web como o conhecemos. Como diriam evangelistas do Agile: "Mudanças são bem-vindas e esperadas", então por que não tomar seu lugar na revolução da web e começar seu primeiro PWA?

Um forte abraço, e vida longa ao open source!