Workbox 使用记录
修改在 Cache Storage 中的缓存名。
程序保存在 Cache Storage 的默认缓存有两个，一个是预缓存一个是运行时缓存。
缓存名的格式是 <prefix>-<Cache ID>-<suffix>，通过修改缓存前缀和后缀，可以让缓存名独一无二，避免在使用 localhost 调试程序时因为端口号相同引发的冲突。
修改前后缀：
workbox.core.setCacheNameDetails({
prefix: 'my-app',
suffix: 'v1'
});
也可以传入prechache和runtime来完全定制缓存名：
workbox.core.setCacheNameDetails({
prefix: 'my-app',
suffix: 'v1',
precache: 'custom-precache-name',
runtime: 'custom-runtime-name'
});
Workbox 的策略（Strategies）
Workbox 有以下几种策略：
- Stale-While-Revalidate
- Cache First
- Network First
- Network Only
- Cache Only
Workbox 的 Strategies 是一种模式，用于决定 service worker 在触发 fetch 事件时该如何响应。
下面介绍的是 Workbox 的几种 Strategies 和如何在 workbox-routing 中使用 Strategies。
Stale-While-Revalidate
stale-while-revalidate.png
Stale-While-Revalidate 倾向于当存在缓存文件时，尽可能快地利用缓存返回响应。当无缓存存在时这种策略就会失效，网络请求只用于更新缓存。
这种 Strategies 适用于对实时数据要求不高的应用。
Cache First（缓存不行了就走网络）
cache-first.png
对非关键性，可以逐步获取的资源，可以采用“缓存优先”策略。
当要请求的资源在缓存中存在时，会优先使用缓存中的文件而不发起网络请求。而如果请求的资源缓存中不存在时 Serevice Worker 会发起网络请求，并缓存该请求返回的结果，作为下一次发起相同请求时的回应。
Network First（网络不行了就走缓存）
network-first.png
如果你的应用需要频繁的网络请求，Network first 将是一个理想的方案。如果网络可用，那么应用中的每个请求将通过网络请求，并保存为缓存，一旦网络不可用，就会使用缓存中的内容。
Network Only
network-only.png
不对请求进行缓存，只使用网络请求的资源。这种 Strategies 的应用场景一般是想要对网络请求进行特殊的控制。
Cache Only
cache-only.png
不走网络请求，资源仅从缓存中获取。这是一种在 Workbox 中不太常见的 Strategies。除非应用已经做了很好的预缓存。
Strategies 的配置
你可以对 Strategies 做以下操作：
- 给使用了某个 Strategies 的缓存命名；
workbox.routing.registerRoute(
new RegExp('/images/'),
workbox.strategies.cacheFirst({
cacheName: 'image-cache',
})
);
- 对使用了某个 Strategies 的缓存设置过期时间；
- 可以设置一组插件，当响应或缓存一个请求的时候，触发他们的生命周期。
Workbox 准备了一系列的插件，可以配合 Strategies 使用：- workbox.expiration.Plugin
- workbox.cacheableResponse.Plugin
- workbox.broadcastUpdate.Plugin
- workbox.backgroundSync.Plugin
使用方法：
workbox.routing.registerRoute(
new RegExp('/images/'),
workbox.strategies.cacheFirst({
cacheName: 'image-cache',
plugins: [
new workbox.expiration.Plugin({
// Only cache requests for a week
maxAgeSeconds: 7 * 24 * 60 * 60,
// Only cache 10 requests.
maxEntries: 10,
}),
]
})
);
Strategies 的高级使用方法
上面介绍的方法都是在 workbox 的 workbox-routing中使用 Strategies，如果想要在自己的 fetch 事件中使用，你可以使用 Strategies 类，通过一个特殊的策略类去发起并处理一个请求。
self.addEventListener('fetch', (event) => {
if (event.request.url === '/') {
const staleWhileRevalidate = new workbox.strategies.StaleWhileRevalidate();
event.respondWith(staleWhileRevalidate.handle({event}));
}
});
