Diurno

PWA – Progressive Web Apps

por: Marco Ferreira

data: 10/04/2017

Compartilhar no facebook
Compartilhar no twitter
Compartilhar no whatsapp
Compartilhar no linkedin
Compartilhar no facebook
Compartilhar no twitter
Compartilhar no whatsapp
Compartilhar no linkedin

“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. Consequentemente, foi o tema de muitos questionamentos no mercado web. Neste artigo, você verá como os Progressive Web Apps (PWA) surgiram como uma solução à essa questão.

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, e outras centenas de gigantes da comunicação (The Guardian, The Washigton Post, UOL dentre outros) iniciaram o Accelerated Mobile Pages Project (AMP – www.ampproject.org). O propósito era 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. Eles promoviam, 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. Elas prometem 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 no 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. 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. Por exemplo: 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.

Tecnicamente, o funcionamento das Progressive Web Applications 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, pode 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. Inclusive, ele pode 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 afasta 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, nem todos os navegadores suportam todas as funcionalidades necessárias para que um PWA funcione a 100% de suas capacidades. Contudo, 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.

Para saber como criar PWA’s adequados ao seu negócio, entre em contato com a dti!

Créditos: Marco Túlio Ferreira