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

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

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

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.

Типы

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) => {...}

    • событие

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

  • matchPrecache

    пустота

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

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

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

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

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

    • запрос

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

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

    • возвращает

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

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

    пустота

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

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

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

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

PrecacheEntry

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

  • честность

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

  • пересмотр

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

  • URL

    нить

PrecacheFallbackPlugin

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

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

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

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

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

    пустота

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

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

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

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

      объект

      • резервныйURL

        нить

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

      • PrecacheController

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

PrecacheRoute

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

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

PrecacheRouteOptions

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

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

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

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

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

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

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

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

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

PrecacheStrategy

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

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

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

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

    пустота

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

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

    • параметры

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

  • имя кэша

    нить

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

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

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

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

  • copyRedirectedCacheableResponsesPlugin
  • defaultPrecacheCacheabilityPlugin
  • _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) => {...}

    • возвращает

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

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

    пустота

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

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

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

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

    • возвращает

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

      Кортеж обещаний [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 .

Параметры

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 .

Параметры

precacheAndRoute()

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

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

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

Параметры

  • записи

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

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

  • параметры

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