Ряд общих шаблонов, особенно связанных с маршрутизацией и кэшированием , настолько распространены, что их можно стандартизировать в рецепты многократного использования. 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
Характеристики
- стратегия
- URL-адреса
нить[]
Методы
googleFontsCache()
workbox-recipes.googleFontsCache(
options?: GoogleFontCacheOptions,
)
Реализация https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts
рецепта кэширования [шрифтов Google]
Параметры
- параметры
GoogleFontCacheOptions необязательно
imageCache()
workbox-recipes.imageCache(
options?: ImageCacheOptions,
)
Реализация [рецепта кэширования изображений] https://developers.google.com/web/tools/workbox/guides/common-recipes#caching_images
Параметры
- параметры
ImageCacheOptions необязательно
offlineFallback()
workbox-recipes.offlineFallback(
options?: OfflineFallbackOptions,
)
Реализация [комплексного рецепта резервного копирования] https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks
. Обязательно включите резервные варианты в инъекцию предварительного кэширования.
Параметры
- параметры
OfflineFallbackOptions необязательно.
pageCache()
workbox-recipes.pageCache(
options?: PageCacheOptions,
)
Реализация рецепта кэширования страниц с сетевым таймаутом
Параметры
- параметры
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,
)
Параметры
- параметры