Progressive Web Apps — Introdução

Disclaimer

Essa publicação inicial foi escrita no fim de 2016 e publicada no Tableless no início de 2017, e faz muito, muito tempo que eu queria revisar este post. A primeira publicação ficou o título Anotações sobre progressive Web Apps, na época pensei que estes artigos virariam uma série sobre Progressive Web Apps, 7 ao todo, porém sempre achei que tinham algumas(muitas, cof! cof!) coisas que eu queria mudar e melhorar antes de continuar os próximos posts. Bem, surgiu a oportunidade de reescrever o post, recomeçar e fazer melhor. O artigo original vai ficar no Blog da Objective Solutions,empresa que trabalho atualmente, com o titulo “O que são Progressive Web Apps (PWAs) e 10 bons motivos para usá-las” .
Como da primeira vez eu acredito, de novo, que isso irá virar uma série de artigos #FÉ
Recomeçar uma séria de artigos, elá vamos nós!

Introdução

Progressive Web Apps (ou PWAs) serão o assunto de hoje. Sem entrar em conceitos muito técnicos do que são PWAs ou de como criar uma Progressive Web App, falaremos desta nova ferramenta que nos deixa entre as web apps e os aplicativos móveis (spoiler).

Abordar o tema desta forma não é exatamente uma tarefa comum, já que sempre que falamos sobre novas ferramentas e tecnologias — como é o caso de PWAs — temos por objetivo descrever seus atributos técnicos e como criar e configurá-las.

Entretanto, este é o desafio desta publicação: explicar de forma simples o que são Progressive Web Apps, considerando que o leitor pode ser desde alguém da esfera técnica, como um desenvolvedor de apps para web ou mobile, até alguém que trabalhe em outra área e queira entender melhor como PWAs podem impactar em seu negócio na web ou nos aplicativos móveis.

O que motivou a existência das Progressive Web Apps

Quando pesquisamos sobre Progressive Web Apps percebemos que elas não fazem parte de um conceito ou uma especificação única. PWAs são, na verdade, um conjunto de idéias que foram agrupadas com o intuito de promover uma melhor experiência para os usuários em dispositivos móveis.

Este conjunto de idéias permite o acesso ao conteúdo das aplicações web em dispositivos móveis de forma simples e confiável, de forma mais veloz, com mais acessibilidade e a possibilidade de trabalhar offline, bem como um aplicativo mobile nativo.

Sendo assim, poderíamos dizer que uma Progressive Web App é um híbrido entre uma aplicação web e uma aplicação mobile nativa instalada no aparelho do usuário.

Progressive Web Apps tentam resolver um dos grandes problemas dos aplicativos mobile de hoje: nós temos milhões de aplicativos disponíveis para serem baixados e temos dezenas deles instalados em nosso aparelho, sem fazer nada de muito relevante. Muitas vezes, fomos obrigados a instalar alguns desses aplicativos para ter acesso temporário ao conteúdo de alguma empresa. E, vamos falar a verdade: quantas pessoas usam mais que meia dúzia de aplicativos todos os dias? Isso já considerando o mainstream como Facebook e WhatsApp… Agora, por outro lado, quantos usuários novos acessam seu site diariamente? E quantos deles voltam constantemente? Não seria interessante facilitar para esses usuários que retornassem ao seu conteúdo de uma maneira mais simples? Se você está neste cenário, saiba que ele é um dos indicados para o uso de PWAs.

Progressive Web Apps facilitam o acesso de novos usuários ao seu conteúdo e criam uma aproximação com usuários já fidelizados, que são aqueles usuários assíduos que já acompanham seu conteúdo, além de aprimorar a experiência mobile de forma progressiva, promovendo uma imersão muito próxima do que seria um app nativo.

Porém, não uma imersão coercitiva ou intrusiva, pois não obriga os usuários corriqueiros, ou que estão acessando seu produto ou serviço pela primeira vez, a serem obrigados a baixar um App mobile de 20MB pela 3g de uma Store ou deixar para depois e baixar o aplicativo no wi-fi, e só então ter acesso ao seu conteúdo. Isso sem falar no espaço limitado dos aplicativos móveis.

Nos apps web podemos baixar uma Home Page com apenas 100kb e então fazer download do restante do conteúdo em background ou sob demanda, conforme o usuário mobile for necessitando de mais recursos. Isso garante que qualquer usuário possa acessar os recursos de sua aplicação web de uma forma tão simples quanto acessa a própria web. Essa simplicidade que é e sempre será uma das maiores características da web.

Não devemos confundir uma experiência que Progressive Web Apps proporcionam — que é melhorar a experiência mobile desses usuários de forma progressiva — como citado acima, com o “P” de PWAs que é “progressive enhancement”, um assunto de cunho mais técnico que não será abordado a fundo aqui, mas, resumidamente, ele garante que todos os usuários conseguirão acessar seu conteúdo na web; mesmo aqueles com aparelhos que não suportam PWAs. Afinal, no fim das contas, ainda estamos falando de uma aplicação Web.

Progressive Web Apps englobam conceitos formidáveis, pois eles são uma iniciativa em direção a um objetivo que todos queremos atingir, que é: tornar a web um lugar melhor e mais acessível.

Mas o que de fato é uma Progressive Web app?

Em um resumo muito curto:

Progressive Web Apps são websites que podem ser “instalados” na home screen de dispositivos móveis. Uma vez lá, todo seu conteúdo pode ser acessado de maneira muito simples pelo usuário, apenas clicando no ícone do Web App. E, mesmo que o usuário esteja sem internet momentaneamente, o conteúdo estará disponível.

Utilizando de algumas estratégias para trabalhar offline, também podemos disponibilizar uma parte dos recursos que serão utilizados, como, por exemplo, navegação e formulários. É como se você tivesse um Website que se comporta como o aplicativo móvel nativo.

Web Mobile ou App Nativo?

Existe sempre durante a tomada de decisões estratégicas de um produto o momento onde iremos decidir sobre fazer um aplicativo web ou desenvolver um aplicativo mobile. Os argumentos são variados, desde o acesso ao hardware e performance que, geralmente, são melhores nos aplicativos nativos.

Quem defende aplicativos, tenta justificar seus usos em todos os cenários, porém, como Sergio Lopes cita no livro: “A Web Mobile”, A Web é boa o suficiente para a maioria dos cenários possíveis. Portanto, no momento de tomar a decisão de qual estratégia mobile seguir, o que importa mais é o foco no usuário e as expectativas que ele possui com sua marca, produto ou empresa.

Estratégia Web First X Estratégia App First

Web é uma solução muito interessante para aqueles que já possuem uma marca ou produto na web e estão pensando em iniciar um projeto mobile. No entanto, para aqueles que vão iniciar um novo produto, um produto realmente inovador que não possua concorrentes consolidadas e expectativas por parte dos usuários, uma estratégia baseada diretamente em apps mobile pode ser a melhor saída. Existe também a possibilidade de lançarmos a marca ou produto no mercado através de uma versão web, fazendo com que todos os usuários tenham acesso ao conteúdo, independente de dispositivo, assumindo assim uma estratégia “Web First”.

O que nós entendemos neste cenário é que um produto novo será lançado no mercado, ele não tem um público já habituado a uma plataforma, ou seja, não existe uma expectativa por parte dos usuários de consumir seu produto através da web ou de um APP mobile.

Quando os usuários já estão habituados a utilizar seu conteúdo em um contexto, estes usuários já possuem uma expectativa com a plataforma que irão utilizar para acessar o conteúdo. Portanto, no caso de empresas que já possuem uma estratégia web, melhorar a experiência mobile através dela faz mais sentido do que empurrar um aplicativo novo para seus usuários.

Depois da consolidação da marca no mercado, pode-se partir para uma estratégia diferente, migrando de uma Web App para um aplicativo móvel. E neste cenário também é possível utilizar uma Progressive Web App onde o usuário irá instalar a sua Web App no aparelho. Com o tempo, você pode sugerir que ele migre para seu aplicativo móvel nativo, onde vai disponibilizar mais recursos.

Entre uma Web App e um Aplicativo Móvel Nativo, por que optar por uma Progressive Web App?

Existe uma lista de motivos que justificam o uso de PWAs em sua estratégia:

1) Progressive Web Apps estão disponíveis para todos o públicos:

PWAs possuem toda a acessibilidade e recursos de um website. Isso quer dizer que seu conteúdo estará disponível a todos, em todos os dispositivos, seja mobile, desktop, na tv da sala ou em seu tamagotchi.

2) Apps são inconvenientes:

Como já disse anteriormente, o primeiro contato do usuário com seu produto ou serviço pode não ser muito confortável. E acredite: não será… Ter que baixar um app enorme só para consumir seus conteúdo, muitas vezes grandes, muitas vezes em uma conexão ruim e muitas vezes em conflito com o pouco espaço de armazenamento do aparelho, tudo porque você não proveu uma solução online para o problema dele.

3) “Usuário First”. Porque relacionamentos possessivos acabam cedo…

Todas as estratégias das PWAs baseiam-se fortemente nas expectativas do usuário, suas experiências e necessidades. Em momento algum você deve obrigá-lo a fazer algo ou a tomar uma decisão por ele. Você deve prover a melhor experiência possível sempre.

Acredito que, de todos os conceitos que vi sobre PWAs, este foi o mais repetido e se mostrou para mim o mais importante dos conceitos: foco 100% no usuário. Porque você não quer perder público.

Para cada etapa que você obriga seus usuários a enfrentarem até chegar a seu conteúdo, você irá perder em torno de 20% do seu público, como explicado por Alex Russell em sua palestra sobre Progressive Web Apps em 2015.

4) Progressivamente aprimorado (Progressive Enhancement):

Tão importante que faz parte do nome que define o conceito! Isso quer dizer que sua aplicação funciona para todos os usuários, independentemente da escolha de navegador, pois são criados com aprimoramento progressivo como princípio central.

5) Progressivamente instalado:

Porque você irá prover toda a solução online para seu usuário. Então, conforme ele se torna assíduo consumidor do seu conteúdo, você poderá oferecer-lhe o direito de escolha para que tenha uma experiência mais próxima da marca em sua home screen; permitir que ele escolha entre continuar acessando normalmente pelo browser ou ainda baixar um aplicativo que pode lhe possibilitar mais recursos.

6) Engajamento:

Uma vez que você promove uma aproximação progressiva e totalmente acessível com os usuários, você naturalmente conseguirá uma proximidade maior com eles.

E agora com PWA podemos fazer com que esta aproximação seja facilitada, pois o acesso ao seu conteúdo estará a um click de distância, mesmo antes de ele ter decidido baixar o seu App (supondo que você tenha optado por fazer um). Isso irá gerar um engajamento muito maior do público.

7) Reengajáveis:

Facilitam o reengajamento por meio de recursos como notificações push, enviando mensagens para seus usuários, mesmo com o aplicativo fechado.

8) Compartilhamento de conteúdo:

Permite que os usuários compartilhem seu conteúdo com outras pessoas de maneira fácil a partir de hiperlinks, assim como seria em um site convencional.

9) Funcionam Offline e são constantemente Atualizados:

Todo o conteúdo será guardado em cache e estará disponibilizado para o seu usuário, mesmo que ele não tenha acesso a internet. Sempre que for possível e houver conexão, o Service Worker pode solicitar a versão mais atualizada do seu WebApp e gerenciar de acordo com a estratégia escolhida pela equipe, para que ele seja salvo e o cache antigo deletado.

10) São seguros:

Toda informação será veiculada por HTTPS para impedir o rastreamento e assegurar que o conteúdo não foi adulterado.

Então, agora o mundo é uma PWA

Assim como aplcaições web e Aplicativos Mobile Nativos não funcionam para todos os cenários, Progressive Web Apps também não. Se você deseja montar uma aplicação para os sistemas informatizados de sua empresa, provavelmente, aplicativos nativos ainda serão a melhor solução.

Inclusive, vale sempre lembrar que você não precisa escolher entre uma PWA e um aplicativo nativo: você pode ter o melhor dos dois mundos.

PWAs são ótimas iniciativas para empresas que atendem o grande público, como por exemplo e-commerces, empresas de ingressos e empresas de passagens, ou quem sabe pequenas empresas que recentemente lançaram suas versões do tipo PWA, como a Nasa ou Uber. Também temos alguns serviços quase nada relevantes como Telegram Web, Instagram Web, Twiter e Google Maps.

O que importa cada vez mais na Web moderna é a satisfação do seu usuário, descubra como ele quer consumir seu produto, e então ofereça a melhor experiência possível para seu público.