предварительное кэширование рабочего ящика

Одной из особенностей сервис-воркеров является возможность сохранять набор файлов в кэше при установке сервис-воркеров. Это часто называют «предварительным кэшированием», поскольку вы кэшируете контент до использования сервисного работника.

Основная причина этого заключается в том, что это дает разработчикам контроль над кешем, то есть они могут определять, когда и как долго кэшируется файл, а также передавать его в браузер, не обращаясь к сети, то есть его можно использовать для создания веб-сайтов. приложения, которые работают в автономном режиме.

Workbox берет на себя большую часть тяжелой работы по предварительному кэшированию, упрощая API и обеспечивая эффективную загрузку ресурсов.

Как работает предварительное кэширование рабочего ящика

Когда веб-приложение загружается в первый раз, workbox-precaching проверит все ресурсы, которые вы хотите загрузить, удалит все дубликаты и подключит соответствующие события сервис-воркера для загрузки и хранения ресурсов. URL-адреса, которые уже содержат информацию о версии (например, хеш контента), используются в качестве ключей кэша без каких-либо дальнейших изменений. URL-адреса, которые не включают информацию о версии, имеют дополнительный параметр запроса URL-адреса, добавленный к их ключу кэша, представляющий собой хэш их содержимого, который Workbox генерирует во время сборки.

workbox-precaching делает все это во время события install сервис-воркера.

Когда пользователь позже повторно посещает ваше веб-приложение и у вас появляется новый сервис-воркер с различными предварительно кэшированными активами, workbox-precaching будет просматривать новый список и определять, какие активы являются совершенно новыми, а какие из существующих активов требуют обновления, на основе их изменений. Любые новые ресурсы или обновленные версии будут добавлены в кэш во время события install нового сервис-воркера.

Этот новый сервис-воркер не будет использоваться для ответа на запросы до тех пор, пока не будет инициировано его событие activate . Именно в событии activate workbox-precaching проверит наличие любых кэшированных ресурсов, которые больше не присутствуют в списке текущих URL-адресов, и удалит их из кеша.

workbox-precaching будет выполнять эти шаги каждый раз, когда ваш сервис-воркер будет установлен и активирован, гарантируя, что у пользователя будут самые последние ресурсы, и загружая только те файлы, которые были изменены.

Обслуживание предварительно кэшированных ответов

Вызов precacheAndRoute() или addRoute() создаст маршрут , соответствующий запросам предварительно кэшированных URL-адресов.

В этом маршруте используется стратегия ответа «сначала кэш» : будет использоваться предварительно кэшированный ответ, если только этот кэшированный ответ отсутствует (из-за какой-либо неожиданной ошибки), и в этом случае вместо него будет использоваться сетевой ответ.

Важен порядок вызова precacheAndRoute() или addRoute() . Обычно вы хотите вызвать его на ранней стадии вашего файла сервис-воркера, прежде чем регистрировать какие-либо дополнительные маршруты с помощью registerRoute() . Если вы сначала вызвали registerRoute() и этот маршрут соответствует входящему запросу, для ответа будет использоваться любая стратегия, которую вы определили в этом дополнительном маршруте, вместо стратегии кэширования, используемой workbox-precaching .

Объяснение списка прекэша

workbox-precaching ожидает массив объектов со свойством url и revision . Этот массив иногда называют манифестом предварительного кэширования:

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([
  {url: '/index.html', revision: '383676'},
  {url: '/styles/app.0c9a31.css', revision: null},
  {url: '/scripts/app.0d5770.js', revision: null},
  // ... other entries ...
]);

Этот список ссылается на набор URL-адресов, каждый из которых содержит свою часть информации о «пересмотре».

Для второго и третьего объекта в приведенном выше примере свойство revision имеет значение null . Это связано с тем, что информация о версии находится в самом URL-адресе , что обычно является лучшей практикой для статических ресурсов.

Первый объект ( /index.html ) явно задает свойство редакции, которое представляет собой автоматически созданный хеш содержимого файла. В отличие от ресурсов JavaScript и CSS, файлы HTML обычно не могут включать информацию об изменениях в свои URL-адреса, иначе ссылки на эти файлы в Интернете будут прерываться при каждом изменении содержимого страницы.

Передавая свойство редакции в precacheAndRoute() , Workbox может узнать, когда файл изменился, и соответствующим образом обновить его.

Workbox поставляется с инструментами, которые помогут создать этот список:

• workbox-build : это пакет узла, который можно использовать в задаче gulp или в качестве сценария запуска npm.
• workbox-webpack-plugin : пользователи веб-пакета могут использовать этот плагин.
• workbox-cli : наш CLI также можно использовать для создания списка ресурсов и добавления их в ваш сервис-воркер.

Входящие запросы на предварительно кэшированные файлы

Одна вещь, которую workbox-precaching будет делать «из коробки», — это манипулировать входящими сетевыми запросами, чтобы попытаться сопоставить предварительно кэшированные файлы. Это соответствует общепринятым практикам в Интернете.

Например, запрос / обычно может быть удовлетворен файлом /index.html .

Ниже приведен список манипуляций, которые workbox-precaching выполняет по умолчанию, и способы изменения этого поведения.

Игнорировать параметры URL

Запросы с параметрами поиска можно изменить, чтобы удалить определенные значения или удалить все значения.

По умолчанию параметры поиска, начинающиеся с utm_ или точно соответствующие fbclid , удаляются. Это означает, что запрос /about.html?utm_campaign=abcd будет выполнен с предварительно кэшированной записью для /about.html .

Вы можете игнорировать другой набор параметров поиска, используя ignoreURLParametersMatching :

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    // Ignore all URL parameters.
    ignoreURLParametersMatching: [/.*/],
  }
);

Индекс каталога

Запросы, оканчивающиеся на / , по умолчанию будут сопоставляться с записями с добавленным в конце index.html . Это означает, что входящий запрос / может автоматически обрабатываться с помощью предварительно кэшированной записи /index.html .

Вы можете изменить это на что-то другое или полностью отключить, установив directoryIndex :

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    directoryIndex: null,
  }
);

Чистые URL-адреса

Если запрос не соответствует предварительному кэшу, мы добавим .html в конец для поддержки «чистых» URL-адресов (так называемых «красивых» URL-адресов). Это означает, что запрос типа /about будет обрабатываться предварительно кэшированной записью /about.html .

Вы можете отключить это поведение, установив cleanUrls :

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute([{url: '/about.html', revision: 'b79cd4'}], {
  cleanUrls: false,
});

Пользовательские манипуляции

Если вы хотите определить пользовательские совпадения входящих запросов с предварительно кэшированными ресурсами, вы можете сделать это с помощью параметра urlManipulation . Это должен быть обратный вызов, который возвращает массив возможных совпадений.

import {precacheAndRoute} from 'workbox-precaching';

precacheAndRoute(
  [
    {url: '/index.html', revision: '383676'},
    {url: '/styles/app.0c9a31.css', revision: null},
    {url: '/scripts/app.0d5770.js', revision: null},
  ],
  {
    urlManipulation: ({url}) => {
      // Your logic goes here...
      return [alteredUrlOption1, alteredUrlOption2];
    },
  }
);

Расширенное использование

Использование PrecacheController напрямую

По умолчанию workbox-precaching настроит за вас install и activate прослушивателей. Для разработчиков, знакомых с сервис-воркерами, это может быть нежелательно, если вам нужно больше контроля.

Вместо использования экспорта по умолчанию вы можете использовать PrecacheController напрямую, чтобы добавлять элементы в прекэш, определять, когда эти ресурсы будут установлены и когда должна произойти очистка.

import {PrecacheController} from 'workbox-precaching';

const precacheController = new PrecacheController();
precacheController.addToCacheList([
  {url: '/styles/example-1.abcd.css', revision: null},
  {url: '/styles/example-2.1234.css', revision: null},
  {url: '/scripts/example-1.abcd.js', revision: null},
  {url: '/scripts/example-2.1234.js', revision: null},
]);

precacheController.addToCacheList([{
  url: '/index.html',
  revision: 'abcd',
}, {
  url: '/about.html',
  revision: '1234',
}]);

self.addEventListener('install', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.install(event));
});

self.addEventListener('activate', (event) => {
  // Passing in event is required in Workbox v6+
  event.waitUntil(precacheController.activate(event));
});

self.addEventListener('fetch', (event) => {
  const cacheKey = precacheController.getCacheKeyForURL(event.request.url);
  event.respondWith(caches.match(cacheKey).then(...));
});

Чтение предварительно кэшированных ресурсов напрямую

Бывают случаи, когда вам может потребоваться прочитать предварительно кэшированный ресурс напрямую, вне контекста маршрутизации, которую может автоматически выполнять workbox-precaching . Например, вы можете захотеть предварительно кэшировать частичные шаблоны HTML, которые затем необходимо будет получить и использовать при построении полного ответа.

В общем, вы можете использовать Cache Storage API для получения предварительно кэшированных объектов Response , но есть одна проблема: ключ кэша URL-адреса, который необходимо использовать при вызове метода cache.match() может содержать параметр управления версиями, который автоматически создает workbox-precaching и поддерживает.

Чтобы получить правильный ключ кэша, вы можете вызвать getCacheKeyForURL() , передав исходный URL-адрес, а затем использовать результат для выполнения метода cache.match() в соответствующем кеше.

import {cacheNames} from 'workbox-core';
import {getCacheKeyForURL} from 'workbox-precaching';

const cache = await caches.open(cacheNames.precache);
const response = await cache.match(getCacheKeyForURL('/precached-file.html'));

В качестве альтернативы, если вам нужен только предварительно кэшированный объект Response , вы можете вызвать matchPrecache() , который автоматически будет использовать правильный ключ кэша и выполнять поиск в правильном кэше:

import {matchPrecache} from 'workbox-precaching';

const response = await matchPrecache('/precached-file.html');

Очистка старых прекешей

Большинство выпусков Workbox поддерживают один и тот же формат хранения предварительно кэшированных данных, а прекеши, созданные в более старых версиях Workbox, обычно могут использоваться в новых выпусках как есть. Однако в редких случаях в хранилище предварительного кэширования происходят кардинальные изменения, которые требуют от существующих пользователей повторной загрузки всего и что делает ранее предварительно кэшированные данные устаревшими. (Такое изменение произошло между выпусками Workbox v3 и v4.)

Эти устаревшие данные не должны мешать нормальной работе, но они способствуют общему использованию квоты хранилища, и для ваших пользователей может быть удобнее явно удалить их. Вы можете сделать это, добавив cleanupOutdatedCaches() к своему сервисному работнику или установив cleanupOutdatedCaches: true , если вы используете один из инструментов сборки Workbox для создания своего сервисного работника.

Использование целостности подресурса

Некоторым разработчикам могут потребоваться дополнительные гарантии, обеспечиваемые обеспечением целостности подресурсов при получении предварительно кэшированных URL-адресов из сети.

Дополнительное, необязательное свойство, называемое integrity , можно добавить к любой записи в манифесте прекэша. Если оно предоставлено, оно будет использоваться в качестве значения integrity при построении Request используемого для заполнения кэша. Если есть несоответствие, процесс предварительного кэширования завершится неудачно.

Определение того, какие записи манифеста предварительного кэширования должны иметь свойства integrity , и определение соответствующих значений для использования выходит за рамки инструментов сборки Workbox. Вместо этого разработчики, желающие воспользоваться этой функцией, должны изменить манифест предварительного кэширования, создаваемый Workbox, чтобы самостоятельно добавить соответствующую информацию. Параметр manifestTransform в конфигурации инструментов сборки Workbox может помочь:

const ssri = require('ssri');

const integrityManifestTransform = (originalManifest, compilation) => {
  const warnings = [];
  const manifest = originalManifest.map(entry => {
    // If some criteria match:
    if (entry.url.startsWith('...')) {
      // This has to be a synchronous function call, for example:
      // compilation will be set when using workbox-webpack-plugin.
      // When using workbox-build directly, you can read the file's
      // contents from disk using, e.g., the fs module.
      const asset = compilation.getAsset(entry.url);
      entry.integrity = ssri.fromData(asset.source.source()).toString();

      // Push a message to warnings if needed.
    }
    return entry;
  });

  return {warnings, manifest};
};

// Then add manifestTransform: [integrityManifestTransform]
// to your Workbox build configuration.

workbox-precaching.urlManipulation(
  { url }: object,
)

workbox-precaching.addPlugins(
  plugins: WorkboxPlugin[],
)

workbox-precaching.addRoute(
  options?: PrecacheRouteOptions,
)

workbox-precaching.cleanupOutdatedCaches()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

workbox-precaching.getCacheKeyForURL(
  url: string,
)

workbox-precaching.matchPrecache(
  request: string | Request,
)

workbox-precaching.precache(
  entries: (string | PrecacheEntry)[],
)

workbox-precaching.precacheAndRoute(
  entries: (string | PrecacheEntry)[],
  options?: PrecacheRouteOptions,
)