142 lines
3.6 KiB
JavaScript
142 lines
3.6 KiB
JavaScript
import {precacheAndRoute, cleanupOutdatedCaches} from 'workbox-precaching'
|
|
import {registerRoute, setCatchHandler} from 'workbox-routing'
|
|
import {CacheFirst, NetworkFirst, StaleWhileRevalidate} from 'workbox-strategies'
|
|
import {ExpirationPlugin} from 'workbox-expiration'
|
|
import {CacheableResponsePlugin} from 'workbox-cacheable-response'
|
|
|
|
// 使用 self.__WB_MANIFEST 是 workbox 的一个特殊变量，会被实际的预缓存清单替换
|
|
precacheAndRoute(self.__WB_MANIFEST)
|
|
cleanupOutdatedCaches()
|
|
|
|
// JS 文件缓存
|
|
registerRoute(
|
|
/\.(?:js)$/i,
|
|
new StaleWhileRevalidate({
|
|
cacheName: 'js-cache',
|
|
plugins: [
|
|
new ExpirationPlugin({
|
|
maxEntries: 100,
|
|
maxAgeSeconds: 60 * 60 * 24 * 7 // 7 天
|
|
})
|
|
]
|
|
})
|
|
)
|
|
|
|
// CSS 文件缓存
|
|
registerRoute(
|
|
/\.(?:css)$/i,
|
|
new StaleWhileRevalidate({
|
|
cacheName: 'css-cache',
|
|
plugins: [
|
|
new ExpirationPlugin({
|
|
maxEntries: 50,
|
|
maxAgeSeconds: 60 * 60 * 24 * 7 // 7 天
|
|
})
|
|
]
|
|
})
|
|
)
|
|
|
|
// HTML 文件缓存
|
|
registerRoute(
|
|
/\.(?:html)$/i,
|
|
new NetworkFirst({
|
|
cacheName: 'html-cache',
|
|
plugins: [
|
|
new ExpirationPlugin({
|
|
maxEntries: 20,
|
|
maxAgeSeconds: 60 * 60 * 24 // 1 天
|
|
})
|
|
]
|
|
})
|
|
)
|
|
|
|
// 图片缓存
|
|
registerRoute(
|
|
/\.(?:png|jpg|jpeg|svg|gif)$/i,
|
|
new StaleWhileRevalidate({
|
|
cacheName: 'images-cache',
|
|
plugins: [
|
|
new ExpirationPlugin({
|
|
maxEntries: 50,
|
|
maxAgeSeconds: 60 * 60 * 24 * 30 // 30 天
|
|
})
|
|
]
|
|
})
|
|
)
|
|
|
|
// CDN 缓存
|
|
registerRoute(
|
|
/\/cdn-cgi\/.*/i,
|
|
new NetworkFirst({
|
|
cacheName: 'cdn-cgi-cache',
|
|
plugins: [
|
|
new ExpirationPlugin({
|
|
maxEntries: 50,
|
|
maxAgeSeconds: 60 * 60 * 24 // 1 天
|
|
})
|
|
],
|
|
networkTimeoutSeconds: 10
|
|
})
|
|
)
|
|
|
|
// 外部资源缓存
|
|
registerRoute(
|
|
({url}) => url.origin !== self.location.origin,
|
|
new NetworkFirst({
|
|
cacheName: 'external-resources',
|
|
plugins: [
|
|
new ExpirationPlugin({
|
|
maxEntries: 100,
|
|
maxAgeSeconds: 60 * 60 * 24 // 1 天
|
|
}),
|
|
new CacheableResponsePlugin({
|
|
statuses: [0, 200]
|
|
})
|
|
],
|
|
networkTimeoutSeconds: 10
|
|
})
|
|
)
|
|
|
|
// 添加缓存管理消息处理
|
|
self.addEventListener('message', (event) => {
|
|
if (event.data && event.data.type === 'CACHE_KEYS') {
|
|
// 获取所有缓存键
|
|
caches.keys().then((cacheNames) => {
|
|
event.ports[0].postMessage({cacheNames});
|
|
});
|
|
} else if (event.data && event.data.type === 'CACHE_CONTENT') {
|
|
// 获取特定缓存的内容
|
|
const cacheName = event.data.cacheName;
|
|
caches.open(cacheName).then((cache) => {
|
|
cache.keys().then((requests) => {
|
|
const urls = requests.map(request => request.url);
|
|
event.ports[0].postMessage({cacheName, urls});
|
|
});
|
|
});
|
|
} else if (event.data && event.data.type === 'CLEAR_CACHE') {
|
|
// 清除特定缓存
|
|
const cacheName = event.data.cacheName;
|
|
caches.delete(cacheName).then((success) => {
|
|
event.ports[0].postMessage({success, cacheName});
|
|
});
|
|
} else if (event.data && event.data.type === 'CLEAR_URL') {
|
|
// 清除特定URL的缓存
|
|
const cacheName = event.data.cacheName;
|
|
const url = event.data.url;
|
|
caches.open(cacheName).then((cache) => {
|
|
cache.delete(url).then((success) => {
|
|
event.ports[0].postMessage({success, cacheName, url});
|
|
});
|
|
});
|
|
} else if (event.data && event.data.type === 'CLEAR_ALL_CACHES') {
|
|
// 清除所有缓存
|
|
caches.keys().then((cacheNames) => {
|
|
Promise.all(
|
|
cacheNames.map(name => caches.delete(name))
|
|
).then(() => {
|
|
event.ports[0].postMessage({success: true});
|
|
});
|
|
});
|
|
}
|
|
});
|