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

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

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

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-precaching позволяли манифесту предварительного кэширования содержать строковые URL-адреса в дополнение к объектам со свойством url и revision . В версии 5 это устарело. Теперь вы всегда должны передавать объект, и чтобы запретить Workbox изменять URL-адрес в кеше, вы должны явно установить для свойства revision значение null . Передача строки будет продолжать работать (с предупреждением) в версии 5, но в версии 6 это больше не будет поддерживаться.

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

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

Предупреждение. Настоятельно рекомендуется использовать один из инструментов сборки Workbox для создания этого манифеста предварительного кэширования. Никогда не кодируйте информацию о ревизии в «рукописный» манифест, поскольку предварительно кэшированные URL-адреса не будут обновляться, если информация о ревизии не отражает содержимое URL-адреса!

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

Одна вещь, которую 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');

Примечание. Если вы используете свой собственный экземпляр PrecacheController , вместо использования экземпляра по умолчанию через precacheAndRoute вам следует вызвать методы matchPrecache() или getCacheKeyForURL() непосредственно в этом экземпляре.

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

Большинство выпусков 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.

Типы

CleanupResult

Характеристики

• удаленные запросы кэша

  нить[]

InstallResult

Характеристики

• notUpdatedURLs

  нить[]

• обновленыURL

  нить[]

PrecacheController

Выполняет эффективное предварительное кэширование активов.

Характеристики

• конструктор

  пустота

  Создайте новый PrecacheController.

  Функция constructor выглядит так:

  (options?: PrecacheControllerOptions)=> {...}

  • параметры

    PrecacheControllerOptions необязательно

  • возвращает

    Прекэшконтроллер

• стратегия

  Стратегия

• активировать

  пустота

  Удаляет ресурсы, которых больше нет в текущем манифесте предварительного кэширования. Вызовите этот метод из события активации сервисного работника.

  Примечание. Этот метод вызывает для вас event.waitUntil() , поэтому вам не нужно вызывать его самостоятельно в обработчиках событий.

  Функция activate выглядит так:

  (event: ExtendableEvent)=> {...}

  • событие

    РасширяемоеСобытие

  • возвращает

    Обещание < Результат Очистки >

• добавитьToCacheList

  пустота

  Этот метод добавит элементы в список предварительного кэширования, удалив дубликаты и гарантируя достоверность информации.

  Функция addToCacheList выглядит так:

  (entries: (string|PrecacheEntry)[])=> {...}

  • записи

    (строка| PrecacheEntry )[]

    Массив записей для предварительного кэширования.

• createHandlerBoundToURL

  пустота

  Возвращает функцию, которая ищет url в предварительном кэше (с учетом информации о версии) и возвращает соответствующий Response .

  Функция createHandlerBoundToURL выглядит так:

  (url: string)=> {...}

  • URL

    нить

    Предварительно кэшированный URL-адрес, который будет использоваться для поиска Response .

  • возвращает

    Обработчик маршрутаОбратный вызов

• getCacheKeyForURL

  пустота

  Возвращает ключ кэша, используемый для хранения данного URL-адреса. Если этот URL-адрес не версионирован, например `/index.html', то ключом кэша будет исходный URL-адрес с добавленным к нему параметром поиска.

  Функция getCacheKeyForURL выглядит так:

  (url: string)=> {...}

  • URL

    нить

    URL-адрес, ключ кэша которого вы хотите найти.

  • возвращает

    нить

    Версионный URL-адрес, соответствующий ключу кэша для исходного URL-адреса, или неопределенный, если этот URL-адрес не кэшируется предварительно.

• getCachedURLs

  пустота

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

  Функция getCachedURLs выглядит так:

  ()=> {...}

  • возвращает

    нить[]

    Предварительно кэшированные URL-адреса.

• getIntegrityForCacheKey

  пустота

  Функция getIntegrityForCacheKey выглядит так:

  (cacheKey: string)=> {...}

  • кэшКлюч

    нить

  • возвращает

    нить

    Целостность подресурса, связанная с ключом кэша, или неопределенная, если она не установлена.

• getURLsToCacheKeys

  пустота

  Возвращает сопоставление предварительно кэшированного URL-адреса с соответствующим ключом кэша с учетом информации о версии URL-адреса.

  Функция getURLsToCacheKeys выглядит так:

  ()=> {...}

  • возвращает

    Карта<строка>

    URL-адрес для кэширования сопоставления ключей.

• установить

  пустота

  Предварительно кэширует новые и обновленные ресурсы. Вызовите этот метод из события установки сервисного работника.

  Примечание. Этот метод вызывает для вас event.waitUntil() , поэтому вам не нужно вызывать его самостоятельно в обработчиках событий.

  Функция install выглядит так:

  (event: ExtendableEvent)=> {...}

  • событие

    РасширяемоеСобытие

  • возвращает

    Обещание <InstallResult>

• matchPrecache

  пустота

  Это действует как замена cache.match() со следующими отличиями:

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

  Например, matchPrecache('index.html') найдет правильный предварительно кэшированный ответ для текущего активного сервис-воркера, даже если фактический ключ кэша равен '/index.html?__WB_REVISION__=1234abcd' .

  Функция matchPrecache выглядит так:

  (request: string|Request)=> {...}

  • запрос

    строка|Запрос

    Ключ (без параметров изменения), который нужно найти в предварительном кэше.

  • возвращает

    Обещание<Ответ>

• предварительное кэширование

  пустота

  Добавляет элементы в список предварительного кэширования, удаляет все дубликаты и сохраняет файлы в кеше при установке сервис-воркера.

  Этот метод можно вызывать несколько раз.

  Функция precache выглядит так:

  (entries: (string|PrecacheEntry)[])=> {...}

  • записи

    (строка| PrecacheEntry )[]

PrecacheEntry

Характеристики

• честность

  строка необязательна

• пересмотр

  строка необязательна

• URL

  нить

PrecacheFallbackPlugin

PrecacheFallbackPlugin позволяет вам указать «резервный автономный» ответ, который будет использоваться, когда данная стратегия не может сгенерировать ответ.

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

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

Характеристики

• конструктор

  пустота

  Создает новый PrecacheFallbackPlugin со связанным резервным URL-адресом.

  Функция constructor выглядит так:

  (config: object)=> {...}

  • конфигурация

    объект

    • резервный URL-адрес

      нить

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

    • PrecacheController

      PrecacheController необязательно

  • возвращает

    PrecacheFallbackПлагин

PrecacheRoute

Подкласс workbox-routing.Route , который принимает экземпляр workbox-precaching.PrecacheController и использует его для сопоставления входящих запросов и обработки получения ответов из предварительного кэша.

Характеристики

• конструктор

  пустота

  Функция constructor выглядит так:

  (precacheController: PrecacheController,options?: PrecacheRouteOptions)=> {...}

  • PrecacheController

    Прекэшконтроллер

    Экземпляр PrecacheController , используемый как для сопоставления запросов, так и для ответа на события выборки.

  • параметры

    PrecacheRouteOptions необязательно

  • возвращает

    PrecacheRoute

• catchHandler

  RouteHandlerObject необязательно

• обработчик

  RouteHandlerObject

• соответствовать

  МаршрутMatchОбратный вызов

• метод

  HTTPМетод

• УстановитьCatchHandler

  пустота

  Функция setCatchHandler выглядит так:

  (handler: RouteHandler)=> {...}

  • обработчик

    Обработчик маршрута

    Функция обратного вызова, которая возвращает обещание, преобразующееся в ответ.

PrecacheRouteOptions

Характеристики

• чистые URL-адреса

  логическое значение необязательно

• индекс каталога

  строка необязательна

• игнорироватьURLParametersMatching

  RegExp[] необязательно

• URLМанипуляция

  urlManipulation необязательно

PrecacheStrategy

Реализация workbox-strategies.Strategy , специально разработанная для работы с workbox-precaching.PrecacheController для кэширования и извлечения предварительно кэшированных ресурсов.

Примечание: экземпляр этого класса создается автоматически при создании PrecacheController ; как правило, нет необходимости создавать это самостоятельно.

Характеристики

• конструктор

  пустота

  Функция constructor выглядит так:

  (options?: PrecacheStrategyOptions)=> {...}

  • параметры

    PrecacheStrategyOptions необязательно

  • возвращает

    PrecacheСтратегия

• имя кэша

  нить

• параметры выборки

  RequestInit необязательно

• параметры совпадения

  CacheQueryOptions необязательно

• плагины

  Плагин рабочего ящика []

• copyRedirectedCacheableResponsesPlugin

  Плагин Workbox

• defaultPrecacheCacheabilityPlugin

  Плагин Workbox

• _awaitComplete

  пустота

  Функция _awaitComplete выглядит так:

  (responseDone: Promise<Response>,handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

  • ответГотово

    Обещание<Ответ>

  • обработчик

    Обработчик стратегии

  • запрос

    Запрос

  • событие

    РасширяемоеСобытие

  • возвращает

    Обещание<void>

• _getResponse

  пустота

  Функция _getResponse выглядит так:

  (handler: StrategyHandler,request: Request,event: ExtendableEvent)=> {...}

  • обработчик

    Обработчик стратегии

  • запрос

    Запрос

  • событие

    РасширяемоеСобытие

  • возвращает

    Обещание<Ответ>

• _handleFetch

  пустота

  Функция _handleFetch выглядит так:

  (request: Request,handler: StrategyHandler)=> {...}

  • запрос

    Запрос

  • обработчик

    Обработчик стратегии

  • возвращает

    Обещание<Ответ>

• _handleInstall

  пустота

  Функция _handleInstall выглядит так:

  (request: Request,handler: StrategyHandler)=> {...}

  • запрос

    Запрос

  • обработчик

    Обработчик стратегии

  • возвращает

    Обещание<Ответ>

• ручка

  пустота

  Выполняет стратегию запроса и возвращает Promise , который разрешается с помощью Response , вызывая все соответствующие обратные вызовы плагина.

  Когда экземпляр стратегии регистрируется в Workbox workbox-routing.Route , этот метод автоматически вызывается при совпадении маршрута.

  Альтернативно этот метод можно использовать в автономном прослушивателе FetchEvent , передав его в event.respondWith() .

  Функция handle выглядит так:

  (options: FetchEvent|HandlerCallbackOptions)=> {...}

  • параметры

    FetchEvent| Параметры обработчика обратного вызова

    FetchEvent или объект со свойствами, перечисленными ниже.

  • возвращает

    Обещание<Ответ>

• обрабатывать все

  пустота

  Подобно workbox-strategies.Strategy~handle , но вместо того, чтобы просто возвращать Promise , которое преобразуется в Response , оно вернет кортеж обещаний [response, done] , где первое ( response ) эквивалентно тому, что возвращает handle() , а последний — это промис, который будет выполнен после завершения любых промисов, добавленных в event.waitUntil() в рамках реализации стратегии.

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

  Функция handleAll выглядит так:

  (options: FetchEvent|HandlerCallbackOptions)=> {...}

  • параметры

    FetchEvent| Параметры обработчика обратного вызова

    FetchEvent или объект со свойствами, перечисленными ниже.

  • возвращает

    [Обещание<ответ>,Обещание<недействительный>]

    Кортеж обещаний [response, Done], который можно использовать для определения того, когда ответ разрешится, а также когда обработчик завершит всю свою работу.

urlManipulation()

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

Тип

функция

Параметры

• { URL }

  объект

  • URL

    URL-адрес

Возврат

• URL[]

Методы

addPlugins()

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

Добавляет плагины в стратегию предварительного кэширования.

Параметры

• плагины

  Плагин рабочего ящика []

addRoute()

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

Добавьте прослушиватель fetch к сервисному работнику, который будет отвечать на [сетевые запросы] https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#Custom_responses_to_requests с помощью предварительно кэшированных ресурсов.

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

Параметры

• параметры

  PrecacheRouteOptions необязательно

cleanupOutdatedCaches()

workbox-precaching.cleanupOutdatedCaches()

Добавляет прослушиватель событий activate , который будет очищать несовместимые прекеши, созданные более старыми версиями Workbox.

createHandlerBoundToURL()

workbox-precaching.createHandlerBoundToURL(
  url: string,
)

Вспомогательная функция, которая вызывает PrecacheController#createHandlerBoundToURL в экземпляре PrecacheController по умолчанию.

Если вы создаете свой собственный PrecacheController , вызовите PrecacheController#createHandlerBoundToURL в этом экземпляре вместо использования этой функции.

Параметры

• URL

  нить

  Предварительно кэшированный URL-адрес, который будет использоваться для поиска Response .

Возврат

• Обработчик маршрутаОбратный вызов

getCacheKeyForURL()

workbox-precaching.getCacheKeyForURL(
  url: string,
)

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

Если указан относительный URL-адрес, в качестве основы будет использоваться расположение файла сервисного работника.

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

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

Параметры

• URL

  нить

  URL-адрес, ключ кэша которого нужно найти.

Возврат

• строка|не определено

  Ключ кэша, соответствующий этому URL-адресу.

matchPrecache()

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

Вспомогательная функция, которая вызывает PrecacheController#matchPrecache в экземпляре PrecacheController по умолчанию.

Если вы создаете свой собственный PrecacheController , вызовите PrecacheController#matchPrecache для этого экземпляра вместо использования этой функции.

Параметры

• запрос

  строка|Запрос

  Ключ (без параметров изменения), который нужно найти в предварительном кэше.

Возврат

• Обещание<Ответ|не определено>

precache()

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

Добавляет элементы в список предварительного кэширования, удаляет все дубликаты и сохраняет файлы в кеше при установке сервис-воркера.

Этот метод можно вызывать несколько раз.

Обратите внимание: этот метод не будет обслуживать ни один из кэшированных файлов. Он только предварительно кэширует файлы. Чтобы ответить на сетевой запрос, вы вызываете workbox-precaching.addRoute .

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

Параметры

• записи

  (строка| PrecacheEntry )[]

precacheAndRoute()

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

Этот метод добавит записи в список предварительного кэширования и добавит маршрут для ответа на события выборки.

Это удобный метод, который вызывает workbox-precaching.precache и workbox-precaching.addRoute за один вызов.

Параметры

• записи

  (строка| PrecacheEntry )[]

  Массив записей для предварительного кэширования.

• параметры

  PrecacheRouteOptions необязательно