Como configurar o comportamento de armazenamento em cache HTTP

Jeff Posnick

Este codelab mostra como alterar os cabeçalhos de cache HTTP retornados por uma Servidor da Web baseado em Node.js que executa a veiculação Express. de análise de dados em nuvem. Ele também mostra como confirmar se o comportamento de armazenamento em cache esperado está sendo aplicada, usando o painel Network no DevTools do Chrome.

Conhecer o projeto de exemplo

Estes são os principais arquivos com os quais você trabalhará no projeto de exemplo:

  • server.js contém o código Node.js que disponibiliza o serviço do app da Web conteúdo. Ele usa o Express para processar solicitações HTTP. e respostas. Mais especificamente, o express.static() é usado para exibir os arquivos locais no diretório público, para que o serve-static documentação serão muito úteis.
  • public/index.html é o HTML do app da Web. Como a maioria dos arquivos HTML, ele não conter qualquer informação de controle de versão como parte do URL.
  • public/app.15261a07.js e public/style.391484cf.css são o JavaScript do app da Web e CSS. Cada arquivo contém um hash em seus URLs, correspondentes ao seu conteúdo. O index.html é responsável por manter acompanhar qual URL específico será carregado.
.

Configure cabeçalhos de cache para nosso HTML

Ao responder a solicitações de URLs que não contêm informações de controle de versões, adicione Cache-Control: no-cache às suas mensagens de resposta. Junto com é recomendável definir um dos dois cabeçalhos de resposta adicionais: Last-Modified ou ETag. A index.html se encaixa nessa categoria. É possível dividir isso em duas etapas.

Primeiro, os cabeçalhos Last-Modified e ETag são controlados pelo etag e lastModified de configuração do Terraform. Na verdade, as duas opções são padronizadas como true para todos os respostas HTTP. Portanto, nesta configuração atual, você não precisa ativar para recebê-las do seu modelo. Mas é possível definir explicitamente a configuração de qualquer maneira.

Em segundo lugar, você precisa adicionar o cabeçalho Cache-Control: no-cache, mas somente para seus documentos HTML (neste caso, index.html). A maneira mais fácil de definir condicionalmente esse cabeçalho é gravar um setHeaders function, e, dentro dele, verifique se a solicitação de entrada é de um documento HTML.

  • Clique em Remixar para editar para tornar o projeto editável.

A configuração de exibição estática no server.js começa assim:

app.use(express.static('public'));
  • Faça as alterações descritas acima e você deve acabar com algo que é semelhante a:
app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

Configurar cabeçalhos de armazenamento em cache para URLs com controle de versão

Ao responder a solicitações de URLs que contêm "impressão digital" ou informações de controle de versões e cujo conteúdo não possa ser alterado, adicione Cache-Control: max-age=31536000 às suas respostas. Os métodos app.15261a07.js e style.391484cf.css se enquadram nessa categoria.

Desenvolvimento fora do setHeaders function usada na última etapa, é possível acrescentar lógica para verificar se um determinado é para um URL com controle de versão. Nesse caso, adicione o cabeçalho Cache-Control: max-age=31536000.

A maneira mais eficiente de fazer isso é usar uma expressão regular para ver se o recurso solicitado corresponde a um padrão específico que você saber que os hashes se enquadram. No caso deste exemplo de projeto, são sempre oito caracteres do conjunto de dígitos de 0 a 9 e as letras minúsculas de a a f (ou seja, hexadecimal). O hash são sempre separados por um caractere . em ambos os lados.

Uma expressão regular que corresponde às regras gerais pode ser expressa como new RegExp('\\.[0-9a-f]{8}\\.').

  • Modifique a função setHeaders para que ela fique assim:
app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

Confirmar o novo comportamento usando o DevTools

Com as modificações no servidor de arquivos estáticos, você pode verificar verifique se os cabeçalhos certos estão sendo definidos visualizando o aplicativo ativo com o painel DevTools Network aberto.

  • Para visualizar o site, pressione Ver app. Em seguida, pressione Tela cheia tela cheia

  • Personalize as colunas exibido no painel "Network" para incluir as informações mais relevantes, clicando com o botão direito no cabeçalho da coluna:

Como configurar o DevTools Network.

Aqui, as colunas a serem observadas são Name, Status, Cache-Control, ETag e Last-Modified.

  • Com o DevTools aberto no painel Network, atualize a página.

Após o carregamento da página, você verá entradas no painel Network que parecem como o seguinte:

Colunas do painel Network.

A primeira linha é para o documento HTML que você acessou. Isso é apropriado veiculado com Cache-Control: no-cache. O status da resposta HTTP para a solicitação é um 304. Isso significa que o navegador sabia não usar o HTML armazenado em cache imediatamente, mas em vez fez uma solicitação HTTP ao servidor da Web, usando Last-Modified e ETag para ver se há alguma atualização no HTML que ela já tinha no para o cache. A resposta HTTP 304 indica que não há HTML atualizado.

As próximas duas linhas são para os recursos JavaScript e CSS com controle de versão. Você deve vê-los veiculados com Cache-Control: max-age=31536000, e o status HTTP dos cada um é 200. Devido à configuração usada, nenhuma solicitação real é feita ao servidor Node.js. Clique na entrada para ver mais detalhes. incluindo que a resposta veio "(do cache de disco)".

Um status de resposta de rede de 200.

Os valores reais das colunas "ETag" e "Última modificação" não importam muito. A o mais importante é confirmar se eles estão sendo definidos.

Resumindo

Após concluir as etapas deste codelab, você sabe como configurar os cabeçalhos de resposta HTTP em um servidor da Web baseado em Node.js usando o Express; para otimizar o uso do cache HTTP. Você também tem as etapas de que precisa confirmar que o comportamento de armazenamento em cache esperado está sendo usado, por meio do painel Network no DevTools do Chrome.