Como combinamos o melhor da experiência web e o melhor dos aplicativos.

Proporcionar uma ótima experiência aos clientes da Magnetis é algo que estamos buscando todos os dias. Sempre mantivemos a excelência para os nossos clientes que acessam o site da Magnetis através do navegador em computadores, tablets ou celulares. Mas ainda faltava algo a mais!

Queríamos estar ainda mais próximos dos nossos clientes, principalmente nos smartphones. E de preferência a um toque de distância.

Foi ai que entrou em cena o Progressive Web App, mais conhecido por PWA. Ele permitiu que em poucas semanas já conseguíssemos oferecer uma experiência semelhante a dos aplicativos nativos com: ícone customizado, splash screen e funcionamento offline. Tudo isso através do nosso próprio site!

Primeiro de tudo, o que é um Progressive Web App?

Os Progressive Web Apps são um conjunto de técnicas para desenvolver aplicações web, adicionando progressivamente funcionalidades que antes só eram possíveis em apps nativos. Leia mais aqui.

A maneira mais simples de descobrir se o site é considerado um PWA, é através do Lighthouse. O Lighthouse é uma ferramenta open source, que executa uma série de validações em uma aplicação web e atribui uma nota que vai de 0 a 100.

Entre as validações, o Lighthouse avalia se a página:

• Tem ícones e splash screen customizados
• É responsiva
• Tem certificado de segurança
• Responde 200 quando offline

 

Claro! A primeira coisa que fizemos ao descobrir o Lighthouse foi auditar o nosso site e a nota foi surpreendente: 42.

Grande parte desta nota é porque nossa aplicação sempre foi servida utilizando certificados de segurança, e desde o primeiro semestre deste ano (2017) todas as páginas do painel de controle dos nossos clientes são responsivas. Com isso, já tínhamos praticamente metade do caminho pavimentado para chegar na primeira versão do PWA.

Status do PWA nesse momento:
[ ] Ícones e splash screen customizados
[x] Responsivo
[x] Certificado de segurança
[ ] Responde 200 quando offline

 

Ícones e splash screen com a cara da Magnetis

Customizar o ícone e a splash screen foi muito simples. Bastou adicionar o manifest.json com as informações da nossa aplicação e pronto.

Nele que colocamos o nome do nosso aplicativo, o caminho pros ícones, as cores da barra de navegação e do fundo da tela, o formato do app (tela cheia, stand alone ou navegador) e a página de entrada pro PWA.

Veja como nosso manifest.json é simples:

{
 "short_name": "Magnetis",
 "name": "Magnetis",
 "icons": [
 {
 "src": "icon-48x48.png",
 "type": "image/png",
 "sizes": "48x48"
 },
 {
 "src": "icon-96x96.png",
 "type": "image/png",
 "sizes": "96x96"
 },
 {
 "src": "icon-192x192.png",
 "type": "image/png",
 "sizes": "192x192"
 },
 {
 "src": "icon-384x384.png",
 "type": "image/png",
 "sizes": "384x384"
 },
 {
 "src": "icon-512x512.png",
 "type": "image/png",
 "sizes": "512x512"
 }
 ],
 "theme_color": "#2acb9b",
 "background_color": "#2acb9b",
 "display": "standalone",
 "start_url": "/carteira?utm_source=dashboard&utm_medium=PWA"
}

Dica: pra monitorar o comportamento dos usuários no PWA, basta adicionar os parâmetros do Google Analytics no final da start_url.

Status do PWA nesse momento:
[x] Ícones e splash screen customizados
[x] Responsivo
[x] Certificado de segurança
[ ] Responde 200 quando offline

 

Até aqui, quando os clientes adicionavam o nosso site a home do celular, já era notável que a experiência estava bem semelhante a de um aplicativo nativo.

Mas a nossa grande barreira era justamente essa:

Quem adiciona sites a home screen do celular?

 

É ai que entra em cena o Service Worker.

Tornando o PWA instalável

Um PWA instalável não significa que precisamos mandar ele pra uma loja de aplicativos. Pra tonar ele instalável precisávamos completar o checklist do Lighthouse com o último ponto: ter uma página disponível mesmo quando os clientes estivessem offline.

Pra isso, adicionamos um novo arquivo: o Service Worker (SW). O SW é quem faz o “meio de campo” entre página e servidor. Ele é capaz de controlar todos os requests e responses de uma página.

Associando a capacidade de controlar todos os requests/responses com a API de cache do navegador, nós temos uma série de possibilidades:

• cachear todos os responses do servidor com assets, imagens, dados de API e etc;
• consultar o cache do navegador antes de mandar um request pro servidor, e servir a response direto do cache;
• sincronização em segundo plano.

 

Assim, quando um cliente abrir a nossa página em um momento de baixa qualidade na internet ou completamente offline, o SW vai receber todos os requests da página e disponibilizar os dados da versão cacheada.

Adeus downasaur!

 

A estratégia de cache que estamos utilizando é conhecida como Network first, que sempre vai até o servidor em busca dos dados, e usa o cache do navegador somente como fallback (veja a ilustração abaixo).

Também seria possível, por exemplo, responder aos requests com dados do cache do navegador, e consultar a internet apenas como fallback. Essa estratégia é conhecida como offline first (veja outras opções aqui).

Status do PWA nesse momento:
[x] Ícones e splash screen customizados
[x] Responsivo
[x] Certificado de segurança
[x] Responde 200 quando offline

 

A partir daí, o próprio navegador é capaz de identificar os usuários mais engajados e sugerir a instalação do PWA através do banner.

Avaliação do Lighthouse

Depois dessa série de melhorias, a nossa nota do Lighthouse mais do que dobrou. Atingimos 91, veja só:

Atingimos o nível máximo de avaliação no Lighthouse em quase todos os pontos relacionados a Progressive Web App!

Mas nem tudo são flores…

A Apple ainda está resistente em oferecer suporte a todas essas tecnologias no Safari, por isso toda essa experiência só está disponível pra usuários Android.

Fallback pro iOS

Mesmo com essa limitação técnica, os nossos clientes que utilizam iOS também podem adicionar o nosso web app a home do celular. Ao fazer isso, eles também terão os ícones customizados e a ausência das barras de navegação e endereço do Safari, que deixa o web app com aparência de app nativo.

Próximos passos do nosso PWA

Primeiro de tudo: estamos torcendo pra Apple implementar todos os recursos no Safari o quanto antes!

Ainda temos algumas possibilidades pra explorar dentro do mundo do PWA, como push notifications, que também faz parte das especificações, mas ainda não estamos utilizando. Outra possibilidade é incrementar ainda mais a experiência offline, que hoje tem uma abordagem muito conservadora com a estratégia network first.

Independente disso, vamos continuar fazendo melhorias no nosso produto em busca de melhorar ainda mais a experiência dos clientes que acessam o painel de controle da Magnetis através do PWA.

Já implementou um PWA ou está pensando em começar? Deixe seu comentário!