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 está incluído no app Create React por padrão.

Houssein Djirdeh

O Workbox está integrado a Criar um aplicativo React (CRA) com uma configuração padrão que armazena todas as ativos estáticos em seu aplicativo a cada build.

Por que isso é útil?

Os service workers permitem que você armazene recursos importantes no cache deles (precaching) para que, quando um usuário carregar a página da Web pela segunda vez, o navegador pode recuperá-las do service worker em vez de fazer solicitações para na rede. Isso resulta em carregamentos de página mais rápidos em visitas repetidas, bem como na capacidade de exibir conteúdo quando o usuário está off-line.

Caixa de trabalho em CRA

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

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();

Aqui está um exemplo de aplicativo React criado com CRA que tem um service worker ativado por meio desse 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.

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 enquanto estiver off-line:

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

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

Como modificar estratégias de armazenamento em cache

A estratégia padrão de pré-armazenamento em cache 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. Isso é como o conteúdo ainda pode ser exibido aos usuários mesmo quando eles estão em um off-line.

Embora o Workbox ofereça suporte para definir diferentes estratégias e abordagens armazenar em cache recursos estáticos e dinâmicos, a configuração padrão no CRA não pode ser modificado ou substituído, a menos que você ejete totalmente. No entanto, existe uma abrir proposta para saber como adicionar suporte a um arquivo workbox.config.js externo. Isso os desenvolvedores poderiam substituir as configurações padrão criando um único arquivo workbox.config.js.

Como gerenciar uma estratégia que prioriza o cache

Depender do cache do service worker primeiro e depois voltar para a rede é uma excelente forma de criar sites que carregam mais rapidamente em visitas subsequentes e funcionar off-line até certo ponto. No entanto, algumas coisas precisam ser devem ser considerados:

• Como testar os comportamentos de armazenamento em cache de um service worker?
• Deve haver uma mensagem para os usuários informarem que estão consultando conteúdo armazenado em cache?

O CRA documentação 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 para seus usuários, bem como suporte off-line.

1. Se você estiver usando o CRA, ative o service worker pré-configurado em src/index.js:
2. Se você não estiver usando CRA para criar um aplicativo React, inclua um dos muitas bibliotecas que o Workbox oferece, como workbox-webpack-plugin, nos seus o processo de build.
3. Acompanhe quando o CRA oferecer suporte a um arquivo de substituição workbox.config.js neste Problema no GitHub.