progressive-web-apps_1

 

Progressive Web Apps

“Apps nativos são rápidos, mobile websites são lentos.”

Há cerca de dois anos, quando o acesso web de usuários via mobile superou o acesso via desktop, a questão acima se tornou um problema real e, consequentemente, foi o tema de muitos questionamentos no mercado web.

A necessidade de prover uma melhor experiência web a usuários mobile culminou em algumas iniciativas para a melhoraria da performance das aplicações web. Em 2015, Google e Twitter, juntamente com centenas de gigantes da comunicação (The Guardian, The Washigton Post, UOL dentre outros) iniciaram o Accelerated Mobile Pages Project (AMP – www.ampproject.org) com o propósito de entregar páginas estáticas de rápido carregamento.

Paralelamente, frameworks para a “hibridização” como Cordova, Ionic e PhoneGap se popularizaram entre desenvolvedores, por promover, de certa forma, a aproximação entre a experiência nativa e a web.

Contudo, tais abordagens, apesar de válidas, são na verdade um remendo para um problema mais sistêmico: websites e web applications, fundamentalmente, não são feitos para smartphones e tablets.

Felizmente, as ferramentas disponíveis para o desenvolvimento web estão em constante evolução. Recentemente, uma série de princípios e funcionalidades têm se popularizado, prometendo diminuir o gap entre a experiência proporcionada por um app nativo e um web app.

As Progressive Web Apps (PWA)

Basicamente, Progressive Web apps são aplicações que, a partir de abas do navegador, progressivamente tornam-se mais “app-like” à medida que são utilizadas. Culminando com o ponto em que basta adicionar o Web App à sua página inicial e pronto: ele passa a adquirir funções que antes eram exclusivas de aplicativos nativos: geolocalização, notificações, uso offline, etc.

Os PWAs utilizam as capacidades dos navegadores modernos para entregar ao usuário uma experiência tão boa quanto à de um aplicativo nativo. E, para o usuário, a principal vantagem é a de não precisar se comprometer a baixar um aplicativo antes mesmo de saber se valerá a pena ou não. Esse é um dos maiores problemas dos apps nativos de hoje.

Para que isso ocorra, sua construção baseia-se em alguns princípios:

  • Aprimoramento progressivo: a construção de uma página deve partir de uma base comum que garanta a execução nos mais diversos navegadores para depois acrescentar melhorias que só funcionem em navegadores modernos.

  • Responsividade: deve se adequar a qualquer dispositivo, seja ele desktop, mobile, tablet, ou outro.

  • Independência da conectividade: utilização de cache e service workers para permitir boa utilização sob conexões de baixa qualidade ou até mesmo offline.

  • App-like: Utilização de App Shell Architecture para prover a “sensação” de utilizar um app nativo, tanto na navegação quanto nas interações.

  • Atualizável: o usuário não precisa “baixar uma atualização do app” de tempos em tempos. Como está tudo na web, da próxima vez que o app for aberto, a nova versão estará disponível.

  • Identificação como aplicação: Utilização de web manifest para permitir a identificação da PWA como uma “aplicação” pelos search engine e pelos browsers

  • Segurança: Servida necessariamente via protocolo TLS.

A idéia que norteia a construção de uma PWA é que o próprio app favoreça o estreitamento da relação entre usuário e aplicativo. Para isso, ao utilizar continuamente a aplicação, o usuário deve se beneficiar de recursos que agreguem valor à sua experiência, como carregamento mais rápido (por meio de service workers), recebimento de notificações relevantes, ter a possibilidade de instalação do app e exibição em tela cheia.

PWA

Tecnicamente, o funcionamento das PWAs baseia-se, principalmente, em duas estruturas: a Application Shell Architecture e os Service Workers.

Service Workers

Service Workers são scripts, que rodam em background, capazes de interceptar e responder a diversos eventos, como por exemplo, chamadas http. Eles são instalados pela própria aplicação e permanecem ativos mesmo que a aplicação não esteja aberta no browser. Por meio dos SWs é possível, por exemplo, tratar falhas na conexão de rede do usuário. Um service worker pode realizar o cache de requisições específicas e, dependendo do caso, retornar tanto respostas pré-programadas (de erro, por exemplo) quanto respostas que estejam em cache. Esse mecanismo permite acelerar o carregamento da página como um todo ou até mesmo o uso off-line do app. Por rodarem ainda que a web app não esteja aberta no browser, eles também são uteis para o tratamento de notificações push.

 

Application Shell Architecture (ASA)

A Aplication Shell Architecture está diretamente relacionada à capacidade dos service workers de interceptar, armazenar e retornar recursos para a aplicação. Na ASA, o service worker é responsável por fazer, durante a primeira visita do usuário, o cache (via Cache API) da estrutura básica da aplicação, como imagens, arquivos HTML, CSS e JavaScript, podendo inclusive requisitar e armazenar arquivos não acessados pelo usuário naquele momento. Ao acessar novamente o site/aplicação, o carregamento do mesmo torna-se muito mais rápido, uma vez que o SW será capaz de disponibilizar esses arquivos instantaneamente.

Já a application shell pode ser imaginada como os quadros nas paredes da escola de magia de Hogwarts. A estrutura básica está sempre ali, imutável, enquanto os personagens estão livres para se mover, sair e voltar como desejarem. O quadro é estático, enquanto os personagens são dinâmicos.

Na Application Shell Architecture, o “quadro” estático é servido pelo Service Worker, enquanto o conteúdo é dinamicamente construído a partir de requisições a uma API ou mesmo pelo próprio service worker, como por exemplo, no caso de falhas de conexão.

 

Progressive Web Apps no mundo real

Pegando o site do Chrome Dev Summit 2016 como exemplo é possível ver todo o fluxo de uma PWA:

add-to-home-screen

 

  1. O site inicia como uma aba normal do browser. À primeira vista é um site como outro qualquer, sem nenhum “super poder”. Porém, foi construído utilizando algumas premissas de PWAs como TLS, Service Workers, Manifests, e Design Responsivo.

  2. A segunda (ou terceira, ou quarta) vez em que o site for visitado – a grosso modo, quando o browser identificar que o site é acessado com frequência – um banner será apresentado perguntando se o usuário deseja adicionar o aplicativo á tela inicial.

  3. Quando iniciado a partir da tela inicial, o app é incorporado ao ambiente do dispositivo: a exibição ocorre em tela cheia e o funcionamento do app ocorre mesmo sem conexão de rede.

Outros exemplos de PWAs no mundo real

 

Então? Já posso desenvolver meus PWAs?

Na web, é comum que ferramentas poderosas surjam e cresçam sem alarde, tornando-se lugar comum para alguns e quase desconhecida para outros. Infelizmente, esse é um processo inevitável. A necessidade de desenvolver aplicações que rodem em diversos ambientes e o processo assíncrono de modernização dos browsers acaba por afastar desenvolvedores de funcionalidades não “padronizadas”. Todavia, é fundamental a qualquer desenvolvedor ao menos conhecer o que tem surgido na indústria.

No caso das tecnologias relacionadas aos PWAs, embora nem todos os navegadores suportem todas as funcionalidades necessárias para que um PWA funcione a 100% de suas capacidades, muito avanço já foi feito no que diz respeito à compatibilidade. Assim, é uma questão de tempo até que essa tecnologia esteja difundida, afinal, toda tecnologia acaba empurrando os limites das plataformas onde ela roda.

Questões à parte, uma coisa é certa: as fronteiras entre browser e app estão cada vez menores. Para o bem de usuários, designers e desenvolvedores.

Links para saber mais:

 

Créditos: Marco Túlio Ferreira

Deixe um comentário

1 comment

  1. Anônimo

    Excelente artigo!