рецепты рабочего ящика

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

Рецепты

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

Офлайн-резервный вариант

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

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

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

Рецепт 

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.addEventListener('install', event => {
  const files = [pageFallback];
  if (imageFallback) {
    files.push(imageFallback);
  }
  if (fontFallback) {
    files.push(fontFallback);
  }

  event.waitUntil(
    self.caches
      .open('workbox-offline-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(pageFallback)) || 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);

Теплый кэш стратегий

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

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

Рецепт 

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('install', event => {
  // handleAll returns two promises, the second resolves after all items have been added to cache.
  const done = urls.map(
    path =>
      strategy.handleAll({
        event,
        request: new Request(path),
      })[1]
  );

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

Кэш страниц

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

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

Рецепт 

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';
const matchCallback = ({request}) => request.mode === 'navigate';
const networkTimeoutSeconds = 3;

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

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

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

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

Рецепт 

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';
const 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 . См. параметры кэша изображений для получения списка всех параметров конфигурации.

Рецепт 

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';
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 , которые ссылаются на файлы шрифтов.
  • Статические измененные файлы шрифтов.

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

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

Рецепт 

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 with 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,
      }),
    ],
  })
);

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

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

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

pageCache();

googleFontsCache();

staticResourceCache();

imageCache();

offlineFallback();

Типы

GoogleFontCacheOptions

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

  • кэшПрефикс

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

  • maxAgeSeconds

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

  • maxEntries

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

ImageCacheOptions

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

  • имя кэша

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

  • matchОбратный вызов

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

  • maxAgeSeconds

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

  • maxEntries

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

  • плагины

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

  • Теплый кэш

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

OfflineFallbackOptions

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

  • шрифтFallback

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

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

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

  • страницаРезервный вариант

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

PageCacheOptions

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

  • имя кэша

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

  • matchОбратный вызов

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

  • сетьTimeoutSeconds

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

  • плагины

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

  • Теплый кэш

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

StaticResourceOptions

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

  • имя кэша

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

  • matchОбратный вызов

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

  • плагины

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

  • Теплый кэш

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

WarmStrategyCacheOptions

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

Методы

googleFontsCache()

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

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

Параметры

imageCache()

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

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

Параметры

offlineFallback()

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

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

Параметры

pageCache()

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

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

Параметры

staticResourceCache()

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

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

Параметры

warmStrategyCache()

workbox-recipes.warmStrategyCache(
  options: WarmStrategyCacheOptions,
)

Параметры