工作框食谱

许多常见模式（尤其是与路由和缓存相关的模式）都很常见，可以将其标准化为可重复使用的配方。workbox-recipes 以易于使用的软件包的形式提供这些功能，让您能够快速上手使用功能强大的 Service Worker。

食谱

每个方案都会将多个 Workbox 模块组合在一起，将它们打包为常用的模式。如果您希望自行编写，以下配方将显示您在使用此模块时使用的配方，以及它在后台使用的等效模式。

离线回退

离线回退方案允许您的 Service Worker 在三个方面出现路由错误时提供网页、图片或字体，例如，用户离线且没有缓存命中。在 Workbox 食谱的 6.1.0 版中，移除了使用预缓存缓存这些项的要求；为了实现向后兼容，它会先在预缓存中查找项，然后再尝试使用自己的缓存。

默认情况下，此方案假定后备页面为 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);

预热策略缓存

通过温策略缓存配方，您可以在 Service Worker 的 install 阶段将提供的网址加载到缓存中，并使用提供的策略选项缓存这些网址。如果您知道要缓存的具体网址、想要预热路线的缓存，或者想要在安装期间缓存网址的类似位置，则可以将此方法用作预缓存的替代方案。

如需查看所有配置选项的列表，请参阅温策略缓存选项。

食谱

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)); });

页面缓存

通过页面缓存配方，您的 Service Worker 可以使用网络优先缓存策略响应对 HTML 页面的请求（通过网址导航），该缓存策略理想情况下能够实现缓存回退的足够快速到达，从而能够获得小于 4.0 秒的 Largest Contentful Paint（最大内容渲染）得分。

默认情况下，此方案假定网络超时时间应为 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],       }),     ],   }) );

静态资源缓存

借助静态资源缓存方案，您的 Service Worker 可以使用“在重新验证时使用过时数据”缓存策略来响应静态资源（尤其是 CSS、JavaScript 和 Web Worker 请求）请求，以便从缓存中快速提供这些资源并在后台进行更新

此方案通过 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],       }),     ],   }) );

图片缓存

借助图片缓存配方，您的 Service Worker 可以使用缓存优先缓存策略响应对图片的请求，这样一来，当图片在缓存中有可用图片时，用户就无需为其发出其他请求。

默认情况下，此配方最多可缓存 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 定义的样式表，链接到字体文件。
  • 经过修订的静态字体文件。

由于样式表可能频繁更改，因此使用了 stale-while-revalidate 缓存策略。另一方面，字体文件本身不会发生变化，并且可以利用缓存优先策略。

默认情况下，此方案最多会缓存 30 个字体文件，每个文件的缓存期限为 1 年。如需查看所有配置选项的列表，请参阅 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,       }),     ],   }) );

快速使用

将所有这些方案组合在一起，您将获得一个 Service Worker，它会使用网络优先缓存策略响应网页请求，使用过时时重新验证策略响应 CSS、JavaScript 和 Web Worker 请求，使用缓存优先策略响应图片请求，正确缓存 Google Fonts，并为网页请求提供离线回退。这一切都可以通过以下方法完成：

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

类型

GoogleFontCacheOptions

属性

  • cachePrefix

    字符串（选填）

  • maxAgeSeconds

    编号（选填）

  • maxEntries

    编号（可选）

ImageCacheOptions

属性

  • cacheName

    字符串（选填）

  • matchCallback

    RouteMatchCallback（可选）

  • maxAgeSeconds

    编号（选填）

  • maxEntries

    编号（选填）

  • 插件

    WorkboxPlugin[] 可选

  • warmCache

    string[] 可选

OfflineFallbackOptions

属性

  • fontFallback

    字符串（可选）

  • imageFallback

    字符串（可选）

  • pageFallback

    字符串（可选）

PageCacheOptions

属性

  • cacheName

    字符串（选填）

  • matchCallback

    RouteMatchCallback（可选）

  • networkTimeoutSeconds

    编号（可选）

  • 插件

    WorkboxPlugin[] 可选

  • warmCache

    string[] 可选

StaticResourceOptions

属性

WarmStrategyCacheOptions

属性

  • 策略

    战略

  • 网址

    字符串[]

方法

googleFontsCache()

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

[Google 字体]https://developers.google.com/web/tools/workbox/guides/common-recipes#google_fonts 缓存方案的实现

参数

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,
)

参数