Workbox é um conjunto de bibliotecas e módulos do node que simplifica o processo de cache de assets em nossa aplicação, assim agilizando o nosso trabalho na criação de uma Progressive Web Apps. Este tutorial será baseado na versão 4 da biblioteca. Workbox trabalha dois conceitos importantes sobre PWAs:
Performance: não espere por todos os arquivos de sua aplicação virem da internet, crie estratégias de cache para servir arquivos do armazenados em seu device.
Resiliência: Conexões móveis ou em regiões com fraca infra estrutura podem afetar a experiência do usuário, habilite sua aplicação administrar situações que a conectividade é limitada
Porquê Workbox?
Workbox é uma biblioteca reune as melhores práticas e toda a complexidade de trabalhar com service workers com por exemplo:
- Precaching
- Runtime caching
- Estratégias de cache
- Requisição de rotas
- Background Sync
- Ajuda no debug da aplicação
Opções de utilização
Para trabalhar com Workbox temos as seguintes alternativas:
- Workbox CLI
- node.js
- webpack plugin
Lembrando que essas alternativas são independentes você deve escolher somente uma, então escolha a alternativa que melhor se adequa ao seu caso.
Workbox CLI
CLI nada mais é que uma acrônimo para Command line Interface(Interface de linha de comando) tem como objetivo trazer um grupo de comandos no terminal para possibilitar realizar uma terminada ação, seja criar novos projetos ou administrar recursos existentes. Mas tendo como foco principal reduzir o trabalho e a complexidade ao item aplicado.
Primeiro passo quando trabalhamos com um CLI é fazer sua instalação workbox-cli depende do node.js para funcionar, antes de rodar qualquer comando para o CLI precisamos instalar a versão mais recente do node.js, após a instalação do node rodamos os seguinte comando em nosso terminal:
npm install workbox-cli --global
Code language: PHP (php)
Se tudo ocorrer bem seremos capazes de testar com o seguinte comando:
workbox --help
Se o terminal reconheceu o comando workbox sinaliza que a instalação foi bem sucedida, agora é hora de utilizar o comando:
workbox wizard
Ele irá nos dar um passo-a-passo para a configuração de nosso projeto com as seguintes perguntas:
- Qual é a pasta do nosso app onde se encontra a pasta em que iremos exportar nossa aplicação?
- Quais os tipos de arquivos em que gostaríamos de realizar o preache?
- svg, jpg, png, html, css, js, json
- Onde preferimos salvar o nosso service worker?
- Onde gostariamos de salvar nosso arquivo de configuração
Como podemos ver na imagem abaixo, no meu caso estou rodando a versão 4.3.1 do Workbox, versões anteriores ou futuras esse passos podem mudar um pouco mas o core sempre será quais arquivos queremos fazer o cache e qual será o nosso service worker.
Por fim ele exibe o comando necessário para gerar nosso service worker:
workbox generateSW workbox-config.js
Code language: CSS (css)
Quando rodamos esse comando ele irá ler o arquivo de configuração gerado pelo wizard:
module.exports = {
"globDirectory": "dist/",
"globPatterns": [
"**/*.{svg,jpg,png,html,css,js,json}"
],
"swDest": "dist/sw.js"
};
Code language: JavaScript (javascript)
Varrer e criar um cache para todos os arquivos com as extensões especificadas anteriormente. Você terá um retorno parecido com a mensagem a seguir.
The service worker was written to dist/sw.js 22 files will be precached, totalling 84.2 kB.
Esse comando será necessário toda a vezes em que alteramos os arquivos dentro de nossa aplicação, para agilizar esse processo podemos fazer uma integração com gulp ou webpack.
Gulp + workbox
Como mencionamos anteriormente podemos agilizar o processo de criação de service worker utilizando ferramentas de automatização de tarefas, basicamente vamos assistir as mudanças realizadas em nosso projeto quando algum arquivo for alterado o Gulp será responsável por gerar o nosso service worker
Instalação:
npm install workbox-build --save-dev
Exemplo
const workboxBuild = require('workbox-build');
// NOTE: Esse comando deve ser executado depois que os assets forem gerados
const buildSW = () => {
// assim retornamos generateSW que retorna uma Promisse
return workboxBuild.generateSW({
globDirectory: 'build',
globPatterns: [
'**\/*.{html,json,js,css}',
],
swDest: 'build/sw.js',
});
}
Code language: JavaScript (javascript)
webpack + workbox
Para webpack também temos um plugin especifico para trabalhar com workbox ele tem suporte precaching e runtime caching. Caso ainda não conheça webpack tenho um post de introdução aqui.
Para instalação do plugin na pasta de nosso projeto onde ficar o nosso arquico package.json executamos o seguinte comando em nosso terminal:
npm install workbox-webpack-plugin --save-dev
Depois de instalado precisamos configurar o nosso webpack, dentro do arquivo de configuração do webpack adicionamos o Plugin para workbox:
// dentro do webpack.config.js:
const WorkboxPlugin = require('workbox-webpack-plugin');
module.exports = {
// Outras configurações...
plugins: [
// Outros plugins...
new WorkboxPlugin.GenerateSW()
]
};
Code language: JavaScript (javascript)
Após tudo configurado precisamos registrar nosso service worker:
<script>
// verificamos se o browser suporta service worker
if ('serviceWorker' in navigator) {
// usamos o evento load para registrar nosso service worker
window.addEventListener('load', () => {
navigator.serviceWorker.register('/service-worker.js');
});
}
</script>
Code language: HTML, XML (xml)
Caso queira saber mais sobre service worker tenho um post de introdução a service worker também estou rodando um curso gratuito sobre PWA em meu canal no youtube. Qualquer dúvida só deixar um comentário e até o próximo post.