стратегии рабочего ящика

Когда сервис-воркеры были впервые представлены, появился набор общих стратегий кэширования. Стратегия кэширования — это шаблон, определяющий, как сервис-воркер генерирует ответ после получения события выборки.

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

Мы не будем вдаваться в подробности, кроме стратегий, поддерживаемых Workbox, но вы можете узнать больше в Offline Cookbook .

Использование стратегий

В следующих примерах мы покажем вам, как использовать стратегии кэширования Workbox с workbox-routing . Для каждой стратегии можно определить несколько параметров, которые описаны в разделе «Настройка стратегий» этого документа .

В разделе «Расширенное использование» мы расскажем, как можно использовать стратегии кэширования напрямую, без workbox-routing .

Устарело во время повторной проверки

Устаревшая при повторной проверке диаграмма

Шаблон «устаревший при повторной проверке» позволяет вам ответить на запрос как можно быстрее с помощью кэшированного ответа, если он доступен, и вернуться к сетевому запросу, если он не кэширован. Затем сетевой запрос используется для обновления кеша. В отличие от некоторых реализаций устаревшего ответа при повторной проверке, эта стратегия всегда будет отправлять запрос на повторную проверку, независимо от возраста кэшированного ответа.

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

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/images/avatars/'),
  new StaleWhileRevalidate()
);

Сначала кэшируйте (кэш возвращается в сеть)

Кэшировать первую диаграмму

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

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

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(({request}) => request.destination === 'style', new CacheFirst());

Сеть прежде всего (сетевой возврат к кешу)

Первая диаграмма сети

Для запросов, которые часто обновляются, стратегия «Сначала сеть» является идеальным решением. По умолчанию он попытается получить последний ответ из сети. Если запрос успешен, ответ будет помещен в кеш. Если сеть не может вернуть ответ, будет использован кэшированный ответ.

import {registerRoute} from 'workbox-routing';
import {NetworkFirst} from 'workbox-strategies';

registerRoute(
  ({url}) => url.pathname.startsWith('/social-timeline/'),
  new NetworkFirst()
);

Только сеть

Схема только сети

Если вам требуется выполнение определенных запросов из сети, стратегия, которую можно использовать, — это только сеть .

import {registerRoute} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/admin/'), new NetworkOnly());

Только кэш

Диаграмма только кэша

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

import {registerRoute} from 'workbox-routing';
import {CacheOnly} from 'workbox-strategies';

registerRoute(({url}) => url.pathname.startsWith('/app/v2/'), new CacheOnly());

Настройка стратегий

Все стратегии позволяют настроить:

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

Изменение кеша, используемого стратегией

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

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
  })
);

Использование плагинов

Workbox поставляется с набором плагинов, которые можно использовать с этими стратегиями.

Чтобы использовать любой из этих плагинов (или собственный плагин), вам просто нужно передать экземпляры опции plugins .

import {registerRoute} from 'workbox-routing';
import {CacheFirst} from 'workbox-strategies';
import {ExpirationPlugin} from 'workbox-expiration';

registerRoute(
  ({request}) => request.destination === 'image',
  new CacheFirst({
    cacheName: 'image-cache',
    plugins: [
      new ExpirationPlugin({
        // Only cache requests for a week
        maxAgeSeconds: 7 * 24 * 60 * 60,
        // Only cache 10 requests.
        maxEntries: 10,
      }),
    ],
  })
);

Пользовательские стратегии

Помимо настройки стратегий, Workbox позволяет создавать собственные стратегии. Это можно сделать, импортировав и расширив базовый класс Strategy из workbox-strategies :

import {Strategy} from 'workbox-strategies';

class NewStrategy extends Strategy {
  _handle(request, handler) {
    // Define handling logic here
  }
}

В этом примере handle() используется в качестве стратегии запроса для определения конкретной логики обработки. Можно использовать две стратегии запроса:

  • handle() : выполняет стратегию запроса и возвращает Promise , которое будет разрешено с помощью Response , вызывая все соответствующие обратные вызовы плагина .
  • handleAll() : аналогично handle() , но возвращает два объекта Promise . Первое эквивалентно тому, что возвращает handle() , а второе будет разрешено после завершения обещаний, добавленных в event.waitUntil() внутри стратегии.

Обе стратегии запроса вызываются с двумя параметрами:

  • request : Request на который стратегия вернет ответ.
  • handler : экземпляр StrategyHandler автоматически создаваемый для текущей стратегии.

Создание новой стратегии

Ниже приведен пример новой стратегии, которая повторно реализует поведение NetworkOnly :

class NewNetworkOnlyStrategy extends Strategy {
  _handle(request, handler) {
    return handler.fetch(request);
  }
}

Обратите внимание, что вместо собственного метода fetch вызывается handler.fetch() . Класс StrategyHandler предоставляет ряд действий выборки и кэширования, которые можно использовать всякий раз, когда используется handle() или handleAll() :

  • fetch : извлекает заданный запрос и вызывает методы жизненного цикла плагина requestWillFetch() , fetchDidSucceed() и fetchDidFail()
  • cacheMatch : Сопоставляет запрос из кеша и вызывает методы жизненного цикла плагина cacheKeyWillBeUsed() и cachedResponseWillBeUsed()
  • cachePut : помещает пару запрос/ответ в кеш и вызывает методы жизненного цикла cacheKeyWillBeUsed() , cacheWillUpdate() cacheDidUpdate()
  • fetchAndCachePut : вызывает fetch() и запускает cachePut() в фоновом режиме для ответа, сгенерированного fetch() .
  • hasCallback : принимает обратный вызов в качестве входных данных и возвращает true, если стратегия имеет хотя бы один плагин с данным обратным вызовом.
  • runCallbacks : запускает все обратные вызовы плагина, соответствующие заданному имени, по порядку, передавая заданный объект параметра (объединенный с текущим состоянием плагина) в качестве единственного аргумента.
  • iterateCallbacks : принимает обратный вызов и возвращает итерацию соответствующих обратных вызовов плагина, где каждый обратный вызов обернут текущим состоянием обработчика (т.е. когда вы вызываете каждый обратный вызов, какой бы параметр объекта вы ему ни передали, он будет объединен с текущим состоянием плагина).
  • waitUntil : добавляет обещание к обещаниям продления срока действия события, связанного с обрабатываемым запросом (обычно FetchEvent ).
  • doneWaiting : Возвращает обещание, которое разрешается после того, как все обещания, переданные в waitUntil() будут выполнены.
  • destroy : Останавливает выполнение стратегии и немедленно разрешает все ожидающие обещания waitUntil() .

Стратегия гонок в сети с пользовательским кэшем

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

import {Strategy} from 'workbox-strategies';

class CacheNetworkRace extends Strategy {
  _handle(request, handler) {
    const fetchAndCachePutDone = handler.fetchAndCachePut(request);
    const cacheMatchDone = handler.cacheMatch(request);

    return new Promise((resolve, reject) => {
      fetchAndCachePutDone.then(resolve);
      cacheMatchDone.then(response => response && resolve(response));

      // Reject if both network and cache error or find no response.
      Promise.allSettled([fetchAndCachePutDone, cacheMatchDone]).then(
        results => {
          const [fetchAndCachePutResult, cacheMatchResult] = results;
          if (
            fetchAndCachePutResult.status === 'rejected' &&
            !cacheMatchResult.value
          ) {
            reject(fetchAndCachePutResult.reason);
          }
        }
      );
    });
  }
}

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

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

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

self.addEventListener('fetch', event => {
  const {request} = event;
  const url = new URL(request.url);

  if (url.origin === location.origin && url.pathname === '/') {
    event.respondWith(new StaleWhileRevalidate().handle({event, request}));
  }
});

Список доступных классов вы можете найти в справочной документации workbox-strategies .

Типы

CacheFirst

Реализация стратегии запроса «сначала кэш» .

Стратегия кэширования полезна для ресурсов, которые были изменены, таких как URL-адреса, такие как /styles/example.a8f5f1.css , поскольку они могут кэшироваться в течение длительных периодов времени.

Если сетевой запрос завершается неудачно и совпадение с кэшем отсутствует, будет выдано исключение WorkboxError .

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

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

    пустота

    Создает новый экземпляр стратегии и устанавливает все документированные свойства параметров как общедоступные свойства экземпляра.

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

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

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

  • имя кэша

    нить

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

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

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

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

  • плагины

    Плагин Workbox []

  • _awaitComplete

    пустота

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

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

    • возвращает

      Обещание<void>

  • _getResponse

    пустота

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

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

    • возвращает

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

  • ручка

    пустота

    Выполняет стратегию запроса и возвращает 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], который можно использовать для определения того, когда ответ разрешится, а также когда обработчик завершит всю свою работу.

CacheOnly

Реализация стратегии запроса только кеширования .

Этот класс полезен, если вы хотите воспользоваться преимуществами любых плагинов Workbox .

Если совпадений с кэшем нет, это вызовет исключение WorkboxError .

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

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

    пустота

    Создает новый экземпляр стратегии и устанавливает все документированные свойства параметров как общедоступные свойства экземпляра.

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

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

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

  • имя кэша

    нить

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

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

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

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

  • _awaitComplete

    пустота

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

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

    • возвращает

      Обещание<void>

  • _getResponse

    пустота

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

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

    • возвращает

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

  • ручка

    пустота

    Выполняет стратегию запроса и возвращает 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], который можно использовать для определения того, когда ответ разрешится, а также когда обработчик завершит всю свою работу.

NetworkFirst

Реализация стратегии первого запроса сети .

По умолчанию эта стратегия кэширует ответы с кодом состояния 200, а также непрозрачные ответы . Непрозрачные ответы — это запросы между источниками, в которых ответ не поддерживает CORS .

Если сетевой запрос завершается неудачно и совпадение с кэшем отсутствует, будет выдано исключение WorkboxError .

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

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

    пустота

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

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

  • имя кэша

    нить

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

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

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

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

  • _awaitComplete

    пустота

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

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

    • возвращает

      Обещание<void>

  • _getResponse

    пустота

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

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

    • возвращает

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

  • ручка

    пустота

    Выполняет стратегию запроса и возвращает 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], который можно использовать для определения того, когда ответ разрешится, а также когда обработчик завершит всю свою работу.

NetworkFirstOptions

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

  • имя кэша

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

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

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

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

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

  • сетьTimeoutSeconds

    номер необязательно

  • плагины

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

NetworkOnly

Реализация стратегии запросов только по сети .

Этот класс полезен, если вы хотите воспользоваться преимуществами любых плагинов Workbox .

Если сетевой запрос завершается неудачей, это приведет к возникновению исключения WorkboxError .

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

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

    пустота

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

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

  • имя кэша

    нить

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

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

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

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

  • _awaitComplete

    пустота

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

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

    • возвращает

      Обещание<void>

  • _getResponse

    пустота

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

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

    • возвращает

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

  • ручка

    пустота

    Выполняет стратегию запроса и возвращает 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], который можно использовать для определения того, когда ответ разрешится, а также когда обработчик завершит всю свою работу.

NetworkOnlyOptions

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

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

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

  • сетьTimeoutSeconds

    номер необязательно

  • плагины

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

StaleWhileRevalidate

Реализация стратегии устаревших запросов с повторной проверкой .

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

По умолчанию эта стратегия кэширует ответы с кодом состояния 200, а также непрозрачные ответы . Непрозрачные ответы — это запросы между источниками, в которых ответ не поддерживает CORS .

Если сетевой запрос завершается неудачно и совпадение с кэшем отсутствует, будет выдано исключение WorkboxError .

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

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

    пустота

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

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

  • имя кэша

    нить

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

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

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

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

  • _awaitComplete

    пустота

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

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

    • возвращает

      Обещание<void>

  • _getResponse

    пустота

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

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

    • возвращает

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

  • ручка

    пустота

    Выполняет стратегию запроса и возвращает 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], который можно использовать для определения того, когда ответ разрешится, а также когда обработчик завершит всю свою работу.

Strategy

Абстрактный базовый класс, от которого должны наследоваться все остальные классы стратегий:

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

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

    пустота

    Создает новый экземпляр стратегии и устанавливает все документированные свойства параметров как общедоступные свойства экземпляра.

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

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

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

  • имя кэша

    нить

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

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

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

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

  • _awaitComplete

    пустота

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

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

    • возвращает

      Обещание<void>

  • _getResponse

    пустота

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

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

    • возвращает

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

  • _ручка

    пустота

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

    (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], который можно использовать для определения того, когда ответ разрешится, а также когда обработчик завершит всю свою работу.

StrategyHandler

Класс, создаваемый каждый раз, когда экземпляр экземпляра Strategy вызывает workbox-strategies.Strategy~handle или workbox-strategies.Strategy~handleAll , который оборачивает все действия выборки и кэширования вокруг обратных вызовов плагина и отслеживает, когда стратегия «выполнена» (т. е. все добавлены Обещания event.waitUntil() решены).

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

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

    пустота

    Создает новый экземпляр, связанный с переданной стратегией и событием, обрабатывающим запрос.

    Конструктор также инициализирует состояние, которое будет передано каждому из плагинов, обрабатывающих этот запрос.

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

    (strategy: Strategy, options: HandlerCallbackOptions) => {...}

  • событие

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

  • параметры

    любые дополнительные

  • запрос

    Запрос

  • URL

    URL-адрес необязательно

  • кэшМатч

    пустота

    Сопоставляет запрос из кэша (и вызывает любые применимые методы обратного вызова плагина), используя cacheName , matchOptions и plugins определенные в объекте стратегии.

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

    • кэшКейВиллБеИсед()
    • кэшированныйОтветВиллБеИсед()

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

    (key: RequestInfo) => {...}

    • ключ

      ЗапросИнформация

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

    • возвращает

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

      Соответствующий ответ, если он найден.

  • кэшПуть

    пустота

    Помещает пару запрос/ответ в кеш (и вызывает любые применимые методы обратного вызова плагина), используя cacheName и plugins определенные в объекте стратегии.

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

    • кэшКейВиллБеИсед()
    • кэшВиллОбновление()
    • кэшДидОбновление()

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

    (key: RequestInfo, response: Response) => {...}

    • ключ

      ЗапросИнформация

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

    • ответ

      Ответ

      Ответ на кэш.

    • возвращает

      Обещание <логическое значение>

      false , если кэшWillUpdate привел к тому, что ответ не кэшируется, и true в противном случае.

  • разрушать

    пустота

    Останавливает выполнение стратегии и немедленно разрешает все ожидающие обещания waitUntil() .

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

    () => {...}

  • сделаноОжидание

    пустота

    Возвращает обещание, которое разрешается после того, как все обещания, переданные в workbox-strategies.StrategyHandler~waitUntil будут выполнены.

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

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

    () => {...}

    • возвращает

      Обещание<void>

  • принести

    пустота

    Извлекает заданный запрос (и вызывает любые применимые методы обратного вызова плагина), используя fetchOptions (для запросов, не связанных с навигацией) и plugins определенные в объекте Strategy .

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

    • requestWillFetch()
    • fetchDidSucceed()
    • fetchDidFail()

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

    (input: RequestInfo) => {...}

    • вход

      ЗапросИнформация

      URL-адрес или запрос для получения.

    • возвращает

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

  • fetchAndCachePut

    пустота

    Вызывает this.fetch() и (в фоновом режиме) запускает this.cachePut() для ответа, сгенерированного this.fetch() .

    Вызов this.cachePut() автоматически вызывает this.waitUntil() , поэтому вам не нужно вручную вызывать waitUntil() для события.

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

    (input: RequestInfo) => {...}

    • вход

      ЗапросИнформация

      Запрос или URL-адрес для выборки и кэширования.

    • возвращает

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

  • getCacheKey

    пустота

    Проверяет список плагинов для обратного вызова cacheKeyWillBeUsed и выполняет любой из этих обратных вызовов, найденных последовательно. Последний объект Request , возвращаемый последним плагином, рассматривается как ключ кэша для чтения и/или записи кэша. Если обратные вызовы плагина cacheKeyWillBeUsed не были зарегистрированы, переданный запрос возвращается без изменений.

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

    (request: Request, mode: "read" 
          | "write" 
         ) => {...}

    • запрос

      Запрос

    • режим

      "читать"
      | "писать"

    • возвращает

      Обещание<Запрос>

  • имеет обратный вызов

    пустота

    Возвращает true, если стратегия имеет хотя бы один плагин с заданным обратным вызовом.

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

    (name: C) => {...}

    • имя

      С

      Имя обратного вызова, который нужно проверить.

    • возвращает

      логическое значение

  • итерироватьОбратные вызовы

    пустота

    Принимает обратный вызов и возвращает итерацию соответствующих обратных вызовов плагина, где каждый обратный вызов обернут текущим состоянием обработчика (т. е. когда вы вызываете каждый обратный вызов, какой бы параметр объекта вы ни передали, он будет объединен с текущим состоянием плагина).

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

    (name: C) => {...}

    • имя

      С

      Имя обратного вызова для запуска

    • возвращает

      Генератор<NonNullable<indexedAccess>anyunknown>

  • запустить обратные вызовы

    пустота

    Запускает все обратные вызовы плагина, соответствующие заданному имени, по порядку, передавая заданный объект параметра (объединенный с текущим состоянием плагина) в качестве единственного аргумента.

    Примечание. Поскольку этот метод запускает все плагины, он не подходит для случаев, когда возвращаемое значение обратного вызова необходимо применить до вызова следующего обратного вызова. См. ниже workbox-strategies.StrategyHandler#iterateCallbacks , как действовать в этом случае.

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

    (name: C, param: Omit<indexedAccess"state" 
         >) => {...}

    • имя

      С

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

    • параметр

      Опустить <indexedAccess "состояние"
      >

      Объект, передаваемый в качестве первого (и единственного) параметра при выполнении каждого обратного вызова. Этот объект будет объединен с текущим состоянием плагина перед выполнением обратного вызова.

    • возвращает

      Обещание<void>

  • подождите, пока

    пустота

    Добавляет обещание к [обещаниям продления срока службы] https://w3c.github.io/ServiceWorker/#extendableevent-extend-lifetime-promises события события, связанного с обрабатываемым запросом (обычно FetchEvent ).

    Примечание: вы можете дождаться workbox-strategies.StrategyHandler~doneWaiting , чтобы узнать, когда все добавленные обещания будут выполнены.

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

    (promise: Promise<T>) => {...}

    • обещать

      Обещание<T>

      Обещание добавить к обещаниям продления срока действия события, вызвавшего запрос.

    • возвращает

      Обещание<T>

StrategyOptions

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

  • имя кэша

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

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

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

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

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

  • плагины

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