Recentemente, a Wavy lançou um aplicativo de notícias para o SBT, o SBT News. Ele pode ser acessado em qualquer device clicando aqui, e sendo um progressive web app, ele possui algumas features que antes só eram disponíveis em aplicativos nativos, como notificações push e acesso offline.
Porque não um aplicativo nativo?
Um dos maiores desafios para construir um aplicativo mobile é a barreira de download, não são muitos os usuários que estão dispostos a gastar o espaço precioso com seu aplicativo ou até mesmo a gastar o tempo que leva para baixa-lo. Isso é uma grande vantagem de websites sobre aplicativos nativos, para os usuários, abrir um site é tão difícil quanto clicar em um link.
Mas o que torna um Progressive Web App (PWA para os íntimos) especial?
Bom, realmente não é muita coisa. Um PWA é basicamente uma aplicação web padrão, mas com algumas features extras para smartphones (apesar de terem benefícios para aplicações desktop também).
As principais features são:
- Notificações push
- Abrir o seu app mesmo sem conexão
- Cache offline automático dos assets da sua aplicação (muito bom para usuários com conexões ruins)
- Um ícone customizado para a home do usuário e uma splash screen para abrir o seu app.
Essas features são com certeza bem vindas, mas na essência, todo progressive web app é simplesmente uma aplicação web com dois arquivos extras: o service worker, e o manifest.json.
O Service Worker
Esse é o arquivo mais importante de um PWA, ele é responsável pelo cache do seu website e dos seus assets. Ele é só um arquivo javascript que vai ser responsável por todo o trabalho pesado para você.
Você pode encontrar diferente estratégias de caching e exemplos do service worker aqui.
const isLocalhost = Boolean( window.location.hostname === ‘localhost’ || window.location.hostname === ‘[::1]’ || window.location.hostname.match( /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ ) ); export default function register() { if (process.env.NODE_ENV === ‘production’ && ‘serviceWorker’ in navigator) { const publicUrl = new URL(process.env.PUBLIC_URL, window.location); if (publicUrl.origin !== window.location.origin) { return; } window.addEventListener(‘load’, () => { const swUrl = ${process.env.PUBLIC_URL}/service-worker.js;if (isLocalhost) { checkValidServiceWorker(swUrl); navigator.serviceWorker.ready.then(() => { console.log( ‘This web app is being served cache-first by a service ‘ + ‘worker. To learn more, visit https://goo.gl/SC7cgQ’ ); }); } else { registerValidSW(swUrl); } }); } } function registerValidSW(swUrl) { navigator.serviceWorker .register(swUrl) .then(registration => { registration.onupdatefound = () => { const installingWorker = registration.installing; installingWorker.onstatechange = () => { if (installingWorker.state === ‘installed’) { if (navigator.serviceWorker.controller) { console.log(‘New content is available; please refresh.’); } else { console.log(‘Content is cached for offline use.’); } } }; }; }) .catch(error => { console.error(‘Error during service worker registration:’, error); }); } function checkValidServiceWorker(swUrl) { fetch(swUrl) .then(response => { if ( response.status === 404 || response.headers.get(‘content-type’).indexOf(‘javascript’) === -1 ) { navigator.serviceWorker.ready.then(registration => { registration.unregister().then(() => { window.location.reload(); }); }); } else { registerValidSW(swUrl); } }) .catch(() => { console.log( ‘No internet connection found. App is running in offline mode.’ ); }); } export function unregister() { if (‘serviceWorker’ in navigator) { navigator.serviceWorker.ready.then(registration => { registration.unregister(); }); } } |
O manifest.json
Ele é responsável por como o seu app vai ficar na home do seu usuário, qual a imagem do ícone e do splash, a cor da barra de notificações, etc. Basicamente toda a configuração visual do seu PWA acontece neste arquivo.
É simplesmente um arquivo de configuração, nenhuma mágica.
| { “short_name”: “My PWA”, “name”: “My Progressive Web App”, “icons”: [ { “src”: “favicon.ico”, “sizes”: “64×64 32×32 24×24 16×16”, “type”: “image/x-icon” } ], “start_url”: “./index.html”, “display”: “standalone”, “theme_color”: “#000000”, “background_color”: “#ffffff” } |
create-react-app
Uma boa notícia para quem usa o create-react-app, assim que o bootstrap da aplicação é feito, ele já gera um service worker funcionando e também uma base de um manifest.json, então é extremamente fácil começar a brincar com progressive web apps e foi assim que a configuração inicial do SBT News foi feita ;)
Performance
A característica mais importante do seu PWA é que ele precisa ser rápido, realmente rápido. E faz sentido, se a sua aplicação for lenta e travada, demorando décadas para abrir, qual o sentido de fazer uma PWA? O objetivo é ter uma experiência o mais próxima possível de uma aplicação nativa.
Para isso existem algumas ferramentas muito úteis para tornar o seu site mais rápido, primeiro de tudo, uma forma de medir performance. A ferramenta de audit do Google Chrome é interessante para analisar os tempos de renderização e tempos para primeira interação, e o melhor de tudo, já está disponível no seu browser! É só acessar a aba de audits dentro do devtools do chrome. E o seu objetivo é tornar a pontuação do seu site o mais alta possível.
Além disso, o audits faz análises de acessibilidade, boas práticas, e de quantos itens da checklist de progressive web apps você cumpre!
O que mais impacta na performance é utilizar gzip nos seus assets, isso pode ser ativado tanto no seu servidor no caso de server-side rendering ou na sua cdn no caso de um site estático, como é o caso do SBT Notícias. Apenas por habilitar a compressão, já é possível conseguir notar grandes melhorias na performance da aplicação.
Outra estratégia simples para melhorar o seu score, é fazer code-splitting por rotas, você pode tanto usar o webpack code splitting ou usar uma biblioteca como react-loadable. Isso vai ajudar a diminuir o tamanho do bundle inicial, e consequentemente o tempo de loading inicial.
CSS Componentizado
Outro ponto que não é tão relacionado com uma PWA, mas que teve bastante importância na forma que o SBT News foi desenvolvido, é como lidamos com CSS. Em react, temos algumas opções em relação à CSS como escrever CSS global da forma que sempre fizemos ou usar estilo com escopo de componentes. Nós seguimos com a segunda alternativa, já que ela permite uma quantidade bem menor de efeitos colaterais quando editando o CSS, tornando o trabalho de lidar com todos os estilos muito mais fácil a medida que a aplicação cresce.
Mas para fazer isso com uma simples aplicação create-react-app você tem duas opções: ou nomeando as classes CSS com um namespace específico por componente na mão, ou usar a prop style nos componentes diretamente. Essas opções não são ideias, pois nomear manualmente as classes dá trabalho e não é um processo perfeito, e no caso da prop style, perdemos features importantes como media queries e pseudo selectors. Então acabamos seguindo com o styled-components, que tornou todo esse processo muito mais simples, podendo escrever basicamente CSS diretamente nos componentes.
E o melhor de tudo é que com o styled-components temos acesso à todas as features avançadas do CSS, como like pseudo, media-selectors e transições.
Além disso, é possível encontrar também alguns pequenos benefícios para a performance, já que como cada componente tem apenas o CSS que precisa para se desenhar, isso aliado com code splitting permite separar o seu CSS em várias partes. Então para cada página, será carregado apenas o CSS necessário para desenhar seus componentes, evitando assim que o navegador precise analisar blocos monolíticos de estilo que nem estão sendo utilizados na tela exibida.
