Pré-armazenamento em cache no app Create React com o Workbox

Armazenar recursos em cache com um service worker pode acelerar visitas repetidas e fornecer suporte off-line. O Workbox facilita isso e é incluído no app Create React por padrão.

Houssein Djirdeh

Observação : se você ainda não entende a ideia básica por trás dos service workers e do pré-armazenamento em cache, leia primeiro o guia Pré-armazenamento em cache com o Workbox.

O Workbox é integrado ao Create React App (CRA) com uma configuração padrão que armazena previamente em cache todos os recursos estáticos do seu aplicativo a cada build.

Por que isso é útil?

Service workers permitem armazenar recursos importantes em seu cache (pré-armazenamento em cache) para que, quando um usuário carregar a página da Web pela segunda vez, o navegador possa recuperá-los do service worker em vez de fazer solicitações à rede. Isso resulta em carregamentos de página mais rápidos em visitas repetidas, além da capacidade de exibir conteúdo quando o usuário está off-line.

Workbox em CRA

O Workbox é um conjunto de ferramentas que permite criar e manter service workers. Em CRA, o workbox-webpack-plugin já está incluído no build de produção e só precisa ser ativado no arquivo src/index.js para registrar um novo service worker com cada build:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();
serviceWorker.register();

Veja um exemplo de um app React criado com CRA que tem um service worker ativado por meio deste arquivo:

Para ver quais recursos estão sendo armazenados em cache:

• Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia .
• Pressione "Control + Shift + J" (ou "Command + Option + J" no Mac) para abrir o DevTools.
• Clique na guia Rede.
• Atualize o app.

Você notará que, em vez de mostrar o tamanho do payload, a coluna Size mostra uma mensagem (from ServiceWorker) para indicar que esses recursos foram recuperados do service worker.

Como o service worker armazena todos os recursos estáticos em cache, tente usar o aplicativo off-line:

1. Na guia Rede do DevTools, marque a caixa de seleção Off-line para simular uma experiência off-line.
2. Atualize o app.

O aplicativo funciona exatamente da mesma forma, mesmo sem uma conexão de rede.

Como modificar estratégias de armazenamento em cache

A estratégia de pré-armazenamento em cache padrão usada pelo Workbox em CRA é cache-first, em que todos os recursos estáticos são buscados no cache do service worker e, se isso falhar (se o recurso não estiver armazenado em cache, por exemplo), a solicitação de rede será feita. É assim que o conteúdo ainda pode ser mostrado aos usuários mesmo quando eles estão em um estado off-line completo.

Embora o Workbox ofereça suporte para definir diferentes estratégias e abordagens para armazenar recursos estáticos e dinâmicos em cache, a configuração padrão na CRA não pode ser modificada ou substituída, a menos que você ejete totalmente. No entanto, há uma proposta aberta para explorar a adição de suporte a um arquivo workbox.config.js externo. Isso permite que os desenvolvedores modifiquem as configurações padrão criando um único arquivo workbox.config.js.

Observação : para mais detalhes sobre as estratégias de armazenamento em cache que um service worker pode usar, confira o Manual off-line.

Como lidar com uma estratégia que prioriza o cache

Confiar no cache do service worker primeiro e depois voltar à rede é uma excelente maneira de criar sites que carregam mais rápido em visitas subsequentes e trabalham off-line até certo ponto. No entanto, há alguns itens que precisam ser considerados:

• Como os comportamentos de armazenamento em cache de um service worker podem ser testados?
• Deve haver uma mensagem para que os usuários saibam que estão vendo conteúdo armazenado em cache?

A documentação do CRA explica esses pontos e muito mais em detalhes.

Conclusão

Use um service worker para pré-armazenar em cache recursos importantes no seu aplicativo para fornecer uma experiência mais rápida aos usuários, bem como suporte off-line.

1. Se você estiver usando CRA, ative o service worker pré-configurado em src/index.js.
2. Se você não estiver usando a CRA para criar um aplicativo React, inclua uma das muitas bibliotecas que o Workbox oferece, como workbox-webpack-plugin, no processo de build.
3. Fique de olho em quando a CRA será compatível com um arquivo de substituição workbox.config.js neste problema do GitHub.