Настройка поведения HTTP-кэширования

Jeff Posnick

Чтобы следовать этой кодовой лаборатории, откройте этот глюк на второй вкладке.

Примечание. В этой лаборатории кода используются Chrome DevTools. Загрузите Chrome, если у вас его еще нет.

В этой лаборатории кода показано, как изменить заголовки кэширования HTTP, возвращаемые веб-сервером на базе Node.js, на котором работает платформа экспресс- обслуживания. Также будет показано, как подтвердить, что ожидаемое поведение кэширования действительно применяется, используя панель «Сеть» в Chrome DevTools.

Примечание. Хотя конкретные инструкции предназначены для Express, общие принципы выбора правильных заголовков кэширования применимы к любой среде веб-сервера.

Ознакомьтесь с примером проекта

Вот ключевые файлы, с которыми вы будете работать в примере проекта:

• server.js содержит код Node.js, который обслуживает содержимое веб-приложения. Он использует Express для обработки HTTP-запросов и ответов. В частности, express.static() используется для обслуживания всех локальных файлов в общедоступном каталоге, поэтому документация serve-static может оказаться полезной.
• public/index.html — это HTML-код веб-приложения. Как и большинство HTML-файлов, он не содержит никакой информации о версии как часть своего URL-адреса.
• public/app.15261a07.js и public/style.391484cf.css — это ресурсы JavaScript и CSS веб-приложения. Каждый из этих файлов содержит хэш в своих URL-адресах, соответствующий их содержимому. index.html отвечает за отслеживание того, какую конкретную версию URL-адреса следует загрузить.

Примечание. В «реальном мире» процесс назначения хешей и обновления HTML-файлов для включения ссылок на URL-адрес с последней версией будет выполняться с помощью инструмента сборки, такого как webpack . Для целей этой лаборатории предположим, что хэши были сгенерированы как часть уже имевшего место процесса сборки.

Настройте заголовки кэширования для нашего HTML

Отвечая на запросы URL-адресов, которые не содержат информации о версии, обязательно добавьте Cache-Control: no-cache в свои ответные сообщения. При этом рекомендуется установить один из двух дополнительных заголовков ответа: Last-Modified или ETag . index.html попадает в эту категорию. Вы можете разбить это на два этапа.

Во-первых, заголовки Last-Modified и ETag управляются параметрами конфигурации etag и lastModified . Оба этих параметра фактически по умолчанию имеют значение true для всех HTTP-ответов, поэтому в этой текущей настройке вам не нужно соглашаться, чтобы получить такое поведение. Но в любом случае вы можете указать явную конфигурацию.

Во-вторых, вам нужно иметь возможность добавлять заголовок Cache-Control: no-cache , но только для ваших HTML-документов (в данном случае index.html ). Самый простой способ условно установить этот заголовок — написать собственную setHeaders function и внутри нее проверить, относится ли входящий запрос к HTML-документу.

• Нажмите Remix to Edit, чтобы сделать проект доступным для редактирования.

Статическая конфигурация обслуживания в server.js начинается так:

app.use(express.static('public'));

• Внесите изменения, описанные выше, и в итоге у вас должно получиться что-то похожее:

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');
    }
  },
}));

Настройте заголовки кэширования для версионных URL-адресов.

При ответе на запросы URL-адресов, которые содержат « отпечаток пальца » или информацию о версии и чье содержимое никогда не должно меняться, добавьте в свои ответы Cache-Control: max-age=31536000 . В эту категорию попадают app.15261a07.js и style.391484cf.css .

Создав setHeaders function использованную на последнем шаге, вы можете добавить дополнительную логику, чтобы проверить, относится ли данный запрос к версионному URL-адресу, и если да, добавить заголовок Cache-Control: max-age=31536000 .

Самый надежный способ сделать это — использовать регулярное выражение , чтобы увидеть, соответствует ли запрашиваемый ресурс определенному шаблону, которому, как вы знаете, соответствуют хеши. В случае этого примера проекта это всегда восемь символов из набора цифр 0–9 и строчных букв a–f (т. е. шестнадцатеричных символов). Хэш всегда отделяется . персонаж с обеих сторон.

Регулярное выражение, соответствующее этим общим правилам, может быть выражено как new RegExp('\\.[0-9a-f]{8}\\.') .

Примечание. При разработке этих правил полезно быть как можно более конкретным, чтобы защититься от будущих проблем. Более общее совпадение, такое как проверка расширения файла .js или .css , может в конечном итоге стать проблемой, если вы добавите в свой проект дополнительные неверсионные ресурсы JavaScript или CSS.

• Измените функцию setHeaders , чтобы она выглядела следующим образом:

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');
    }
  },
}));

Подтвердите новое поведение с помощью DevTools.

Примечание. Вы можете ознакомиться с панелью «Сеть» в Chrome DevTools, пройдя эту кодовую лабораторию .

После внесения изменений в статический файловый сервер вы можете проверить, установлены ли правильные заголовки, просмотрев активное приложение с открытой панелью DevTools Network.

• Чтобы просмотреть сайт, нажмите «Просмотреть приложение» . Затем нажмите Полноэкранный режим .

• Настройте столбцы, отображаемые на панели «Сеть», чтобы включить наиболее важную информацию, щелкнув правой кнопкой мыши заголовок столбца:

Здесь следует обратить внимание на столбцы Name , Status , Cache-Control , ETag и Last-Modified .

• Открыв инструменты разработчика на панели «Сеть», обновите страницу.

После загрузки страницы вы должны увидеть записи на панели «Сеть», которые выглядят следующим образом:

Первая строка предназначена для HTML-документа, к которому вы перешли. Это правильно выполняется с помощью Cache-Control: no-cache . Статус ответа HTTP для этого запроса — 304 . Это означает, что браузер знал, что не следует использовать кэшированный HTML немедленно, а вместо этого отправил HTTP-запрос к веб-серверу, используя информацию Last-Modified и ETag чтобы узнать, было ли какое-либо обновление HTML, которое уже было в его кеше. . Ответ HTTP 304 указывает на отсутствие обновленного HTML.

Примечание. Cache-Control: no-cache не означает «никогда не использовать кэшированную копию». Это означает «всегда сначала проверяйте сервер и используйте кэшированную копию, если есть ответ HTTP 304».

Следующие две строки предназначены для версионных ресурсов JavaScript и CSS. Вы должны увидеть, что они обслуживаются с помощью Cache-Control: max-age=31536000 , а статус HTTP для каждого равен 200 . Из-за используемой конфигурации фактический запрос к серверу Node.js не выполняется, и нажатие на запись покажет вам дополнительную информацию, в том числе то, что пришел ответ «(из дискового кэша)».

Фактические значения столбцов ETag и Last-Modified не имеют большого значения. Важно подтвердить, что они установлены.

Подводя итоги

Выполнив действия, описанные в этой лаборатории кода, вы теперь знакомы с тем, как настроить заголовки ответов HTTP на веб-сервере на базе Node.js с помощью Express для оптимального использования кэша HTTP. У вас также есть шаги, необходимые для подтверждения того, что используется ожидаемое поведение кэширования, через панель «Сеть» в Chrome DevTools.