Há uma forte corrente questionando que a utilização de apps em mais cenários que deveria, e uma página web seria mais produtiva. Um bom exemplo é ter que baixar um app para pagar um estacionamento de um shopping que você pode não mais voltar a usar.
A web tem amadurecido no conceito de Progressive Web Apps (PWA), que tem por ideia adicionar funcionalidades de app a uma página web, progressivamente, a medida que o usuário usa o aplicativo. A Udacity disponibilizou o curso Intro to Progressive Web Apps (Web Apps for the Next Billion Users) que ajudou nas informações deste post. A apresentação Progressive web apps with polymer tem números interessantes sobre as característas em criar o PWA.
Por que pensar no Progressive Web Apps?
No caso de estudo o Flipkart(maior e-commerce da Índia), ao combinar o app nativo com sua versão Flipkart Lite, versão em Progressive Web Apps, eles tiveram os seguintes benefícios (Conforme estudo de caso “Flipkart triples time-on-site with Progressive Web App” publicado neste link):
- aumento de 70% nas conversões
- tempo do usuário no flipkar lite x experiência anterior do Mobile, 3,5 minutos x 70 segundos
- 3x mais tempo no site
- aumento de 40% no reengajamento
- 3x menos uso de dados
Mas o que permite o Web Progressive Web trazer tanto benefício?
Os navegadores estão evoluindo para permitir o uso das funcionalidades abaixo.
Service Worker
- Age como um proxy no lado cliente, o que permite fazer cache de arquivos localmente;
- Tem uma série de eventos para poder, por exemplo, atualizar o cache;
- Pode receber Push Messages, mesmo com o site fechado pelo usuário;
Web App Manifest File
- Permite definir como seu Web App aparece para o usuário, podendo fazer um ícone ser instalado pelo usuário no Mobile. Quando isso acontece o site abre em full screen, como um app nativo
Repensar a arquitetura do Site
Não basta utilizar o novo browser, mas deve desenvolver o site de maneira diferente.
- Desenvolver como arquitetura de app, com o application shell – que é parecido com o código que se gera para um app nativo. Separa-se o que são os componentes essenciais para o seu app executar offline (Html, Javascript e CSS) do que é dado e muda frequentemente e ainda assim pode ser salvo localmente para acesso offline. Com isso se tem características que há no aplicativo nativo (sem a necessidade de uma loja):
- Carregamento instantâneo
- Atualizações regulares
- Armazenamento offline, que é possível ser feito de três maneiras
- Local Storage (Não indicada a utilização)
- Vantagens : amplamente implementado em navegadores
- Desvantagens: sua api é síncrona e bloqueia a execução do programa, não é transacional (duas escritas no mesmo momento pode perder algo importante)
- Cache Storage
- Vantagens: fácil de usar, assíncrono e rápido
- Desvantagens: não transacional, não utilizado em vários navegadores atualmente
- IndexedDB
- Vantagens: rápido, permite armazenar dados complexos, assíncrono e transacional e implementado em vários navegadores
- Desvantagem: api feia, que requer muita configuração (Há bibliotecas para amenizar desta forma como o Mozilla localForage e o lovefield do google)
- Local Storage (Não indicada a utilização)
Com a separação de app shell dos dados, a ideia é fazer um http request para os dados, o que faz a primeira leitura ficar um pouco mais lenta. Para amenizar este problema a ideia é injetar os dados, não no html, mas num arquivo separado, que é o app.js. Dessa forma é garantido que haverá a montagem do app e depois é possível de atualizar pelo http request.
É importante lembrar que navegadores não prometem guardar os dados para sempre e por isso é importante enviar os dados críticos para a nuvem assim que possível (se houver dados do usuário que você não deseja perder). Outra vantagem de utilizar o sincronismo com a nuvem é que o usuário logar de outro dispositivo, os dados estarão disponíveis.
Para ver um exemplo de um aplicativo utilizando esta arquitetura, veja o Weather PWA. Não esqueça de abrir o console e ver os logs definidos pelo aplicativo, depois de carregar a primeira vez, adicionar outras cidades para ver a previsão do tempo e finalmente trabalhar offline e ainda assim ver as últimas informações
Outras referências
Introdução aos Progressive web Apps por Matheus Lima no imasters
