1芥驳、什么是Cache Expiration
在緩存中應(yīng)該允許設(shè)置項(xiàng)目存儲(chǔ)在緩存中的時(shí)間長(zhǎng)度或者應(yīng)該在緩存中保留多少項(xiàng)目半哟，通常會(huì)對(duì)緩存施加限制绘证。 Workbox通過(guò)workbox-cache-expiration插件提供此功能撵割，該插件允許你限制緩存中的條目數(shù)和/或刪除已緩存很長(zhǎng)一段時(shí)間的條目歹叮。
2跑杭、限制緩存條目數(shù)
要限制存儲(chǔ)在緩存中的條目數(shù)，可以使用maxEntries選項(xiàng)咆耿，如下所示：
workbox.routing.registerRoute(
new RegExp('/images/'),
workbox.strategies.cacheFirst({
cacheName: 'image-cache',
plugins: [
new workbox.expiration.Plugin({
maxEntries: 20,
}),
],
})
);
有了這個(gè)德谅，插件將被添加到此路線。 使用緩存響應(yīng)或?qū)⑿抡?qǐng)求添加到緩存后萨螺，插件將查看配置的緩存并確保緩存條目的數(shù)量不超過(guò)限制窄做。 如果是，則刪除最舊的條目慰技。
3椭盏、限制緩存條目的有效時(shí)間
要限制緩存請(qǐng)求的時(shí)間長(zhǎng)度，你可以使用maxAgeSeconds選項(xiàng)定義最大有效時(shí)間（以秒為單位）吻商，如下所示：
workbox.routing.registerRoute(
/\/images\//,
workbox.strategies.cacheFirst({
cacheName: 'image-cache',
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: 24 * 60 * 60,
}),
],
})
);
插件將在每次請(qǐng)求或緩存更新后檢查并刪除條目掏颊。
注意：
- 由于打開(kāi)IndexedDB的速度很慢，因此在使用請(qǐng)求之前不會(huì)使其過(guò)期艾帐。 這意味著過(guò)期的請(qǐng)求可以使用一次乌叶，但在此之后將過(guò)期改化。
- 為了緩解這種情況，插件將檢查緩存響應(yīng)的“Date”標(biāo)頭枉昏，如果存在并且可以解析日期陈肛，它將基于此過(guò)期，因?yàn)樗恍枰狪ndexedDB查找兄裂。
4句旱、高級(jí)用法
如果您希望使用與任何其他Workbox模塊分開(kāi)的過(guò)期邏輯，則可以使用CacheExpiration類執(zhí)行此操作晰奖。
要對(duì)緩存應(yīng)用限制谈撒，您需要為要控制的緩存創(chuàng)建一個(gè)CacheExpiration實(shí)例，如下所示：
const cacheName = 'my-cache';
const expirationManager = new workbox.expiration.CacheExpiration(
cacheName,
{
maxAgeSeconds: 24 * 60 * 60,
maxEntries: 20,
}
);
每當(dāng)更新緩存條目時(shí)匾南，都需要調(diào)用updateTimestamp（）方法啃匿，以便更新它的有效期。
await openCache.put(
request,
response
);
await expirationManager.updateTimestamp(request.url);
然后蛆楞，只要您想要使一組條目到期溯乒，就可以調(diào)用expireEntries（）方法，該方法將強(qiáng)制執(zhí)行maxAgeSeconds和maxEntries配置豹爹。
await expirationManager.expireEntries();
筆者個(gè)人訂閱號(hào)~歡迎小伙伴們關(guān)注
微信公眾號(hào)-感謝關(guān)注
若有疑問(wèn)可以QQ聯(lián)系筆者裆悄，雖然不一定100%解決你的問(wèn)題，但是可以交流探討一波：2276604211
順便打個(gè)廣告：如果有想入職中國(guó)銀聯(lián)上海技術(shù)開(kāi)發(fā)的童鞋臂聋，也可以加上面的QQ資訊光稼，筆者可以幫你回答一些相關(guān)問(wèn)題~~
