此文主要描述Workbox的示例缓存策略
缓存字体（以google服务为例）
Google字体服务由两部分组成:
- 包含@font-face的样式文件
- 内部静态的，修订的字体库。
我们知道，样式文件更新比较频繁，优先用“StaleWhileRevalidate”的缓存策略； 而字体库本身不会改变，所以用“cache first”缓存策略。
在这里，我们将缓存的”字体库“的时间限制为一年（匹配HTTP Cache-Control标头），将最大条目限制为30（以确保我们不会在用户的设备上占用过多的存储空间）
// Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
workbox.routing.registerRoute(
/^https:\/\/fonts\.googleapis\.com/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'google-fonts-stylesheets',
})
);
// Cache the underlying font files with a cache-first strategy for 1 year.
workbox.routing.registerRoute(
/^https:\/\/fonts\.gstatic\.com/,
new workbox.strategies.CacheFirst({
cacheName: 'google-fonts-webfonts',
plugins: [
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
new workbox.expiration.Plugin({
maxAgeSeconds: 60 * 60 * 24 * 365,
maxEntries: 30,
}),
],
})
);
缓存图片
你可能希望通过匹配文件“后缀名”，采用“cache-first”策略来缓存图片
workbox.routing.registerRoute(
/\.(?:png|gif|jpg|jpeg|webp|svg)$/,
new workbox.strategies.CacheFirst({
cacheName: 'images',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 60,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
}),
],
})
);
缓存css和JS文件
您可能希望对未预先缓存的CSS和JavaScript文件，使用stale-while-revalidate策略。
workbox.routing.registerRoute(
/\.(?:js|css)$/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'static-resources',
})
);
从多个来源缓存内容
您可以创建正则表达式来缓存来自单个路径中的多个源的类似请求。例如下面，缓存来自googleapis.com和gstatic.com来源的资源
workbox.routing.registerRoute(
/.*(?:googleapis|gstatic)\.com/,
new workbox.strategies.StaleWhileRevalidate(),
);
其实就是下面的替代方案
workbox.routing.registerRoute(
/.*(?:googleapis)\.com/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'googleapis',
})
);
workbox.routing.registerRoute(
/.*(?:gstatic)\.com/,
new workbox.strategies.StaleWhileRevalidate({
cacheName: 'gstatic',
})
);
针对来源设置缓存规则
例如，下面的示例缓存最多50个请求，最多5分钟。
workbox.routing.registerRoute(
'https://hacker-news.firebaseio.com/v0/api',
new workbox.strategies.CacheFirst({
cacheName: 'stories',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 50, // 50个
maxAgeSeconds: 5 * 60, // 5 分钟
}),
new workbox.cacheableResponse.Plugin({
statuses: [0, 200],
}),
],
})
);
强制网络请求超时
可能存在一些网络请求，他们花费的时间很长，那么通过一些配置，让任何在超时内无法响应的网络请求都强制回退到缓存获取。 为此，您可以使用NetworkFirst策略并配置networkTimeoutSeconds选项。
workbox.routing.registerRoute(
'https://hacker-news.firebaseio.com/v0/api',
new workbox.strategies.NetworkFirst({
networkTimeoutSeconds: 3,
cacheName: 'stories',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 50,
maxAgeSeconds: 5 * 60, // 5 minutes
}),
],
})
);
从特定子目录缓存资源
您可以使用正则表达式轻松地将请求路由匹配到特定目录中的文件。如果我们想将请求路由匹配到/static/中的文件，我们可以使用正则表达式new RegExp（'/ static /'），如下所示：
workbox.routing.registerRoute(
new RegExp('/static/'),
new workbox.strategies.StaleWhileRevalidate()
);
基于资源类型的缓存资源
你可以使用RequestDestination确定策略的请求目标类型。比如，当目标是<audio>数据
workbox.routing.registerRoute(
// Custom `matchCallback` function
({event}) => event.request.destination === 'audio',
new workbox.strategies.CacheFirst({
cacheName: 'audio',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 60,
maxAgeSeconds: 30 * 24 * 60 * 60, // 30 Days
}),
],
})
);
从Web应用程序代码访问缓存
Cache Storage API可用于service worker和客户端（window）的上下文中。如果要更改缓存 - 添加或删除条目，或从Web应用程序的上下文获取缓存URL列表，您可以直接执行此操作，而无需通过postMessage（）与service worker通信。
例如，如果要将URL添加到给定缓存，以响应Web应用程序中的用户操作，则可以使用如下代码：
// Inside app.js:
async function addToCache(urls) {
const myCache = await window.caches.open('my-cache');
await myCache.addAll(urls);
}
//随时调用addToCache。例如，在DOM加载后，添加某些路径到缓存：
window.addEventListener('load', () => {
// ...determine the list of related URLs for the current page...
addToCache(['/static/relatedUrl1', '/static/relatedUrl2']);
});
在service worker设置缓存规则时，可以引用缓存名称
// Inside service-worker.js:
workbox.routing.registerRoute(
new RegExp('/static/'),
new workbox.strategies.StaleWhileRevalidate({
//'my-cache是之前已经配置缓存名称，这里可以直接指定使用
cacheName: 'my-cache',
})
);
以上为workbox 官网common-recipes章节的搬运，如理解有误，请指正，感谢；
原文： common-recipes
