Progressive Web Apps: por uma web mais “appficada”

É cada vez maior a frequência com a qual as pessoas utilizam os smartphones para acessar a Internet; seja se informando, se comunicando, postando algo nas suas mídias sociais, enfim, tomando o espaço que um belo dia já foi do computador.

O desenvolvimento de sites acompanha tudo isso, e vai se adaptando aos novos tempos. Não para menos, a 612 Comunicação está testando um sistema chamado Progressive Web Apps (PWA, em inglês Aplicativos Progressivos para a Web) em seus sites-mestres.

Mas aí você se pergunta: o que danado é isso? Simples: é um, digamos assim, meio-termo entre um site da web e um aplicativo móvel. Você não precisa nem ir para a loja de aplicativos como a App Store ou o Google Play para instalar o “app”: você aciona um atalho e ele transforma-se num aplicativo móvel híbrido, com o uso de recursos do navegador.

Vamos explicar melhor como funciona a tecnologia e como ela funciona no mesmo princípio dos aplicativos lite, que já mostramos anteriormente aqui no #site612; economia e otimização de espaço e rapidez no processo e experiência do usuário.

O seu conteúdo ao seu alcance, sem precisar de muito

Essa alternativa é apresentada para sites de conteúdo, que não teriam para quê desenvolver um aplicativo mobile que muito provavelmente o usuário não iria se interessar em acessar todas as vezes que precisar procurar algo especificamente nele. Tudo o que ele não quer no momento, e não é para menos em tempos de crise e em momentos que você não quer trocar de celular agora, é encher o celular de memória.

Aqui combinamos a tecnologia PWA com o AMP, aquele que torna as páginas mais leves e com menos tempo de carregamento, dando uma agilidade maior ao usuário independente de que tipo de conexão ele vá ter naquele momento.

Talvez você se lembre de um post que foi ao ar aqui no #site612, onde falamos de aplicativos lite. Falamos na ocasião sobre a preocupação com o espaço dos aparelhos celulares dos usuários, a qual tem sido uma constante para as empresas de tecnologia. O mercado se adapta ao armazenamento do seu celular: se tiver que enxugar recursos para não perder público, assim o fará.

E essa também é a lógica dos Progressive Web Apps: se for necessário, não precisa criar um aplicativo só para replicar tudo aquilo que você vai ler no site, se você pode ter o conteúdo do site “appficado”. Aliás, um dos aplicativos mencionados naquele post, o Twitter Lite, é um PWA. Tanto faz se você baixar de uma loja de aplicativos ou adicionar o atalho; é a mesma coisa. Só por aí temos um entendimento rápido do que é um PWA.

O Twitter Lite é um Progressive Web App. O app baixado no Google Play e o atalho que você adiciona na versão web são a mesma coisa.

Um dos sites que eu “appfiquei” foi justamente o do Blog Josivandro Avelar, através dos recursos AMP for WP e PWA for WP, estes dos mesmos desenvolvedores. E ele vai além; você não só adiciona o atalho na sua tela inicial, como ele adiciona o atalho na gaveta de apps, como se aquilo fosse mesmo um aplicativo móvel.

Quando o usuário acessa a página inicial do site na versão AMP, abre-se uma aba na parte de baixo do mesmo convidando o usuário a adicionar o atalho na tela inicial de seu aparelho. Ele deve clicar nessa aba e aceitar a adição do atalho, que além de ir para a tela inicial, vai para a gaveta de apps.

Ao abrir o atalho adicionado, é exibida uma Splash Screen, que é a tela de início do app, aquela que você vê no momento em que abre o aplicativo e antes dele ser exibido de fato para uso.

O que vai aparecer para o usuário é a mesma versão AMP da página inicial do site que ele acessou lá atrás para adicionar o atalho, convertida em usabilidade de aplicativo. Todas as páginas e posts serão abertas a partir do Android WebView, que para quem não sabe o que é, é o componente do sistema do Google Chrome que permite que as páginas externas sejam abertas dentro dos apps, sem necessidade de “chamar” o Google Chrome, ou seja, sem abrir uma nova janela, por tabela saindo do aplicativo.

Como ele é o próprio site adaptado para a usabilidade de um aplicativo, tendo este a necessidade do Google Chrome, eu economizo espaço de memória interna do celular, bem como ele aproveita os próprios dados do Google Chrome.

Realidade no Android, engatinhando no iOS

Enquanto no Android a funcionalidade de suporte aos Progressive Web Apps já é uma realidade, no iOS o PWA ainda engatinha.

Só a partir do iOS 11.3 é que essa funcionalidade foi aplicada aos poucos e sem alarde, visto que não parece ser um interesse da Apple pelo menos nesse momento, e até porque esse nunca seja o foco dela. O recurso está disponível apenas em seu navegador nativo, o Safari.

“Appficando” a Web

Como dito, a “appficação” da Web é uma tendência que veio para ficar, não tem volta. Muitos sites estão sendo desenvolvidos justamente sob o conceito de mobile first, onde o foco é como ele será visto nos dispositivos móveis, e daí para os desktops, sendo a prioridade total de conteúdo mobile.

E vai além de apenas adaptar um layout para o mobile. É oferecer a experiência para o usuário de estar usando um aplicativo que ele gostaria de baixar, mas ao mesmo tempo não quer por achar que vai ocupar espaço em sua memória.

É o mesmo conceito aplicado aos aplicativos lite, quando falamos que grande parte dos celulares possuem 1 GB de memória ou 8 GB de armazenamento em média.

E que seria lógico para o mercado encontrar meios para que nenhum público fique de fora das campanhas mobile só porque os celulares do seu público-alvo não aguentam.

A web está cada vez mais mobile. E nada mais lógico do que se adaptar ao novo conceito.

“Appficação” nos sites da 612 Comunicação

O processo de testes começou aqui mesmo no #site612, no Blog Josivandro Avelar, no Ônibus Paraibanos e no OCD Holding.

Quando aparecer neles uma aba convidando a adicionar o atalho na página inicial, é só aceitar e deixar o Chrome trabalhar. Feito isso, os atalhos aparecem tanto na sua tela inicial quanto na gaveta de apps.

É como ter um aplicativo, sem precisar de tanto, e tendo já feito o investimento no site.

E como com certeza você gostou desta aula, pode entrar em contato com a gente e solicitar um orçamento para a cosntrução ou reforma do seu site. Que, claro, também estará pronto para estar na gaveta de apps dos celulares dos seus clientes, sem ocupar espaço na memória do celular deles.

Compartilhe este post

Deixe um comentário

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