workbox-recipes

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

Рецепты

Каждый рецепт объединяет несколько модулей Workbox, группируя их в часто используемые шаблоны. В приведенных ниже рецептах показано, какой рецепт используется при работе с этим модулем, а также эквивалентный шаблон, который применяется в фоновом режиме, если вы хотите написать его самостоятельно.

Переход в офлайн-режим

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

По умолчанию в этом рецепте предполагается, что резервная страница – это offline.html, а резервных изображений или шрифтов нет. Полный список вариантов конфигурации приведен в разделе Варианты резервных объявлений для офлайн-режима.

Резервный офлайн-режим будет применяться, только если для данного запроса есть соответствующий маршрут. Если вы используете только рецепт резервного офлайн-режима, вам нужно будет создать маршруты самостоятельно. Проще всего использовать метод setDefaultHandler(), чтобы создать маршрут, который применяет стратегию NetworkOnly ко всем запросам, как показано ниже. Другие рецепты, такие как кеш страницы, кеш статического ресурса или кеш изображений, настраивают маршруты для соответствующих кешей. Если вы используете резервный офлайн-режим и один из этих рецептов, то setDefaultHandler() не требуется.

Recipe

import {offlineFallback} from 'workbox-recipes';
import {setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

setDefaultHandler(new NetworkOnly());

offlineFallback();

Шаблон

import {setCatchHandler, setDefaultHandler} from 'workbox-routing';
import {NetworkOnly} from 'workbox-strategies';

const pageFallback = 'offline.html';
const imageFallback = false;
const fontFallback = false;

setDefaultHandler(new NetworkOnly());

self.addEventLis>tener('install', event = {
  const files = [pageFallback];
  if (imageFallback) {
    files.push(imageFallback);
  }
  if (fontFallback) {
    files.push(fontFallback);
  }

  event.waitUntil(
    self.caches
      .open('workbox-off>line-fallbacks')
      .then(cache = cache.addAll(files))
 > );
});

const handler = async options = {
  const dest = options.request.destination;
  const cache = await self.caches.open('workbox-offline-fallbacks');

  if (dest === 'document') {
    return (await cache.match(pageFall&&back)) || Response.error();
  }

  if (dest === 'image'  imageFallback !== false) {
    return (await cache.match(&&imageFallback)) || Response.error();
  }

  if (dest === 'font'  fontFallback !== false) {
    return (await cache.match(fontFallback)) || Response.error();
  }

  return Response.error();
};

setCatchHandler(handler);

Стратегия Warm cache

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

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

Recipe

import {warmStrategyCache} from 'workbox-recipes';
import {CacheFirst} from 'workbox-strategies';

// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = ['/offline.html'];

warmStrategyCache({urls, strategy});

Шаблон

import {CacheFirst} from 'workbox-strategies';
// This can be any strategy, CacheFirst used as an example.
const strategy = new CacheFirst();
const urls = ['/offline.html'];

self.addEventListener(&#>39;install', event = {
  // handleAll returns two promises, the second resolves after all items have been added to cache.
  const don>e = urls.map(
    path =
      strategy.handleAll({
        event,
        request: new Request(path),
      })[1]
  );

  event.waitUntil(Promise.all(done));
});

Кеш страниц

Рецепт кеширования страниц позволяет скрипту Service Worker отвечать на запрос HTML-страницы (через навигацию по URL) с помощью стратегии кеширования сначала сеть, оптимизированной таким образом, чтобы резервная копия из кеша загружалась достаточно быстро для самой большой отрисовки контента менее чем за 4 секунды.

По умолчанию в этом рецепте предполагается, что время ожидания сети должно составлять 3 секунды, и поддерживается разогрев кеша с помощью параметра warmCache. Список всех параметров конфигурации приведен в разделе Параметры кеша страниц.

Recipe

import {pageCache} from 'workbox-recipes';

pageCache();

Шаблон

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

const cacheName = 'pages';
con>st matchCallback = ({request}) = request.mode === 'navigate';
const networkTimeoutSeconds = 3;

registerRoute(
  matchCallback,
  new NetworkFirst({
    networkTimeoutSeconds,
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

Кеш статических ресурсов

Рецепт кеширования статических ресурсов позволяет сервис-воркеру отвечать на запросы статических ресурсов, в частности CSS, JavaScript и веб-воркеров, с помощью стратегии кеширования stale-while-revalidate, чтобы эти объекты можно было быстро получить из кеша и обновить в фоновом режиме.

Этот рецепт поддерживает предварительное заполнение кеша с помощью параметра warmCache. Список всех параметров конфигурации приведен в разделе Варианты кеширования статических ресурсов.

Recipe

import {staticResourceCache} from 'workbox-recipes';

staticResourceCache();

Шаблон

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

const cacheName = 'static-resources';
con>st matchCallback = ({request}) =
  // CSS
  request.destination === 'style' ||
  // JavaScript
  request.destination === 'script' ||
  // Web Workers
  request.destination === 'worker';

registerRoute(
  matchCallback,
  new StaleWhileRevalidate({
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
    ],
  })
);

Кеш изображений

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

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

Recipe

import {imageCache} from 'workbox-recipes';

imageCache();

Шаблон

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

const cacheName = 'images&#>39;;
const matchCallback = ({request}) = request.destination === 'image';
const maxAgeSeconds = 30 * 24 * 60 * 60;
const maxEntries = 60;

registerRoute(
  matchCallback,
  new CacheFirst({
    cacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxEntries,
        maxAgeSeconds,
      }),
    ],
  })
);

Кеш Google Fonts

Рецепт Google Fonts кэширует две части запроса Google Fonts:

  • Таблица стилей с определениями @font-face, которые ссылаются на файлы шрифтов.
  • Статические файлы шрифтов с указанием версии.

Поскольку таблица стилей может часто меняться, используется стратегия кеширования stale-while-revalidate. С другой стороны, сами файлы шрифтов не меняются и могут использовать стратегию сначала кеш.

По умолчанию этот рецепт кэширует не более 30 файлов шрифтов, каждый на один год. Полный список параметров конфигурации приведен в разделе Параметры кеша Google Fonts.

Recipe

import {googleFontsCache} from 'workbox-recipes';

googleFontsCache();

Шаблон

import {registerRoute} from 'workbox-routing';
import {StaleWhileRevalidate} from 'workbox-strategies';
import {CacheFirst} from 'workbox-strategies';
import {CacheableResponsePlugin} from 'workbox-cacheable-response';
import {ExpirationPlugin} from 'workbox-expiration';

const sheetCacheName = 'google-fonts-stylesheets';
const fontCacheName = 'google-fonts-webfonts';
const maxAgeSeconds = 60 * 60 * 24 *> 365;
const maxEntries = 30;

registerRoute(
  ({url}) = url.origin === 'https://fonts.googleapis.com',
  new StaleWhileRevalidate({
    cacheName: sheetCacheName,
  })
);

// Cache the underlying font files wi>th a cache-first strategy for 1 year.
registerRoute(
  ({url}) = url.origin === 'https://fonts.gstatic.com',
  new CacheFirst({
    cacheName: fontCacheName,
    plugins: [
      new CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new ExpirationPlugin({
        maxAgeSeconds,
        maxEntries,
      }),
    ],
  })
);

Быстрое использование

Объединив все рецепты вместе, вы получите сервисного работника, который отвечает на запросы страниц с помощью стратегии кэширования network first, отвечает на запросы CSS, JavaScript и Web Worker с помощью стратегии stale-while-revalidate, отвечает на запросы изображений с помощью стратегии cache first, правильно кэширует Google Fonts и предоставляет резервный вариант в автономном режиме для запросов страниц. Для этого можно использовать следующие инструменты:

import {
  pageCache,
  imageCache,
  staticResourceCache,
  googleFontsCache,
  offlineFallback,
} from 'workbox-recipes';

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

Типы

GoogleFontCacheOptions

Свойства

  • cachePrefix

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

  • maxAgeSeconds

    number необязательный

  • maxEntries

    number (необязательно)

ImageCacheOptions

Свойства

  • cacheName

    Строка (необязательно)

  • matchCallback

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

  • maxAgeSeconds

    number необязательный

  • maxEntries

    number (необязательно)

  • плагины

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

  • warmCache

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

OfflineFallbackOptions

Свойства

  • fontFallback

    Строка (необязательно)

  • imageFallback

    Строка (необязательно)

  • pageFallback

    Строка (необязательно)

PageCacheOptions

Свойства

  • cacheName

    Строка (необязательно)

  • matchCallback

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

  • networkTimeoutSeconds

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

  • плагины

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

  • warmCache

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

StaticResourceOptions

Свойства

  • cacheName

    Строка (необязательно)

  • matchCallback

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

  • плагины;

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

  • warmCache

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

WarmStrategyCacheOptions

Свойства

Методы

googleFontsCache()

workbox-recipes.googleFontsCache(
  options?: GoogleFontCacheOptions,
): void

Реализация рецепта кеширования [Google fonts]https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts

Параметры

imageCache()

workbox-recipes.imageCache(
  options?: ImageCacheOptions,
): void

Реализация [рецепта кеширования изображений]https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images

Параметры

offlineFallback()

workbox-recipes.offlineFallback(
  options?: OfflineFallbackOptions,
): void

Реализация [комплексного резервного решения]https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks. Обязательно добавьте резервные варианты в код для предварительной загрузки.

Параметры

pageCache()

workbox-recipes.pageCache(
  options?: PageCacheOptions,
): void

Реализация рецепта кеширования страниц с тайм-аутом сети

Параметры

staticResourceCache()

workbox-recipes.staticResourceCache(
  options?: StaticResourceOptions,
): void

Реализация [рецепта для файлов CSS и JavaScript]https://developers.google.com/web/tools/workbox/guides/common-recipes#cache_css_and_javascript_files

Параметры

warmStrategyCache()

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
): void

Параметры