Introdução ao Progressive Web Apps
Autor: Mateus Queiroz Correia | Publicado: 2017-03-19T00:05:00-03:00

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:&nbsp; 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) 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  &nbsp; Outras referências Introdução aos Progressive web Apps por Matheus Lima no imasters Progressive web apps with polymer no SlideShare Progressive web apps presentation using Reveal.js