Introdução a Workbox

Workbox é um conjunto de bibliotecas e módulos do node que simplifica o processo de cache de assets na 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 da sua aplicação virem da internet, crie estratégias de cache para servir arquivos armazenados no seu device.

Resiliência: Conexões móveis ou em regiões com fraca infraestrutura podem afetar a experiência do usuário, habilite a sua aplicação administrar situações que a conectividade é limitada

Porquê Workbox?

Ela é uma biblioteca reúne as melhores práticas e toda a complexidade de trabalhar com service workers, 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 a biblioteca 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.

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 a sua instalação work box 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 seguintes comandos no nosso terminal:

npm install workbox-cli --globalCode language: PHP (php)

Se tudo ocorrer bem seremos capazes de testar com o seguinte comando:

workbox --help

Se o terminal reconheceu o comando e 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:

1. Qual é a pasta do nosso app onde se encontra a pasta em que iremos exportar nossa aplicação?
2. Quais os tipos de arquivos em que gostaríamos de realizar o preache?
   1. svg, jpg, png, html, css, js, json
3. Onde preferimos salvar o nosso service worker?
4. 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, versões anteriores ou futuras esses 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.jsCode 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 da nossa aplicação, para agilizar esse processo podemos fazer uma integração com gulp ou webpack.

Rodando com Gulp

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)

Rodando com webpack

Para webpack também temos um plugin especifico, 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 do nosso projeto onde ficar o nosso arquivo package.json executamos o seguinte comando no nosso terminal:

npm install workbox-webpack-plugin --save-dev

Após instalado precisamos configurar o nosso webpack, no arquivo de configuração do webpack adicionamos o Plugin para work box:

// 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 o 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.