/*
路由缓存策略
staleWhileRevalidate 请求的路由有对应的 cache 缓存就直接返回,同时在后台再次发起请求并更新 Cache
networkFirst 请求后,首先尝试拿到网路请求的返回结果,请求到就直接返回并且更新 cache,否则返回缓存中的内容
cacheFirst 请求后,直接从 Cache 中取得结果,没有的话在发起网络请求
networkOnly 强制使用网络请求
cacheOnly 强制使用 Cache 资源
————————————————
原文链接:https://blog.csdn.net/mjzhang1993/article/details/79570731
*/
// google 首先引入 Workbox 框架
// importScripts('https://storage.googleapis.com/workbox-cdn/releases/3.3.0/workbox-sw.js');
// 阿里
// importScripts('https://g.alicdn.com/kg/workbox/3.3.0/workbox-sw.js');
// 本地
importScripts('/assets_platform/workbox3/workbox-sw.js');
if (workbox) {
// 阿里
// workbox.setConfig({
// debug: true,
// modulePathPrefix: 'https://g.alicdn.com/kg/workbox/3.3.0/'
// });
// 本地
workbox.setConfig({
debug: false,
modulePathPrefix: '/assets_platform/workbox3/'
});
// workbox.core.setCacheNameDetails({
// prefix: 'xjr-pwa',
// suffix: 'v2'
// });
// precacheAndRoute 预缓存静态文件,会卡死
// 注册成功后要立即缓存的资源列表
// workbox.precaching.precacheAndRoute(cacheList)
console.log('Yay! Workbox is loaded 🎉');
// workbox.routing.registerRoute(
// new RegExp('.*\.css'),
// workbox.strategies.cacheFirst()
// );
// 创建一个函数用于生成带有统一配置的缓存策略
function createCacheFirstStrategy(cacheName, maxAgeSeconds) {
return workbox.strategies.cacheFirst({
cacheName: cacheName,
plugins: [
new workbox.expiration.Plugin({
maxAgeSeconds: maxAgeSeconds||7 * 24 * 60 * 60 // 统一设置过期时间为7天
}),
],
});
}
//---------指定路径缓存------------
// ------------element-ui----------------
workbox.routing.registerRoute(
new RegExp('/assets_platform/element-ui/.*\.js'),
// new RegExp('.*\.js'),// 这里是任何正则都行,只要能匹配得上的请求路由地址
// workbox.strategies.cacheFirst(),
createCacheFirstStrategy('elementUI_js')
);
workbox.routing.registerRoute(
new RegExp('/assets_platform/element-ui/.*\.css'),
// workbox.strategies.cacheFirst(),
createCacheFirstStrategy('elementUI_css')
);
workbox.routing.registerRoute(
new RegExp('/assets_platform/element-ui/.*\.(?:fnt|ttf|eot|woff|woff2)'),
// workbox.strategies.cacheFirst(),
createCacheFirstStrategy('elementUI_font')
);
// -----------jquery vue -------------
workbox.routing.registerRoute(
new RegExp('/assets_platform/jquery/.*\.js'),
createCacheFirstStrategy('jquery_js')
);
workbox.routing.registerRoute(
new RegExp('/assets_platform/vue/.*\.js'),
createCacheFirstStrategy('vue_js')
);
workbox.routing.registerRoute(
new RegExp('/assets_platform/vue-router/.*\.js'),
createCacheFirstStrategy('vueRouter_js')
);
workbox.routing.registerRoute(
new RegExp('/assets_platform/vuex/.*\.js'),
createCacheFirstStrategy('vuex_js')
);
workbox.routing.registerRoute(
new RegExp('/assets_platform/vue-i18n/.*\.js'),
createCacheFirstStrategy('vueI18n_js')
);
//--------bootstrap3--------------------
workbox.routing.registerRoute(
new RegExp('/assets_platform/bootstrap3/.*\.js'),
// new RegExp('.*\.js'),// 这里是任何正则都行,只要能匹配得上的请求路由地址
// workbox.strategies.cacheFirst(),
createCacheFirstStrategy('bootstrap3_js')
);
workbox.routing.registerRoute(
new RegExp('/assets_platform/bootstrap3/.*\.css'),
// workbox.strategies.cacheFirst(),
createCacheFirstStrategy('bootstrap3_css')
);
workbox.routing.registerRoute(
new RegExp('/assets_platform/bootstrap3/.*\.(?:fnt|ttf|eot|woff|woff2)'),
// workbox.strategies.cacheFirst(),
createCacheFirstStrategy('bootstrap3_font')
);
// workbox.routing.registerRoute(
// new RegExp('/static/web/music/.*\.(?:mp3|mp4|ogg|wav|avi|rm|wmv|fl|flv|rmvb|3gp)'),
// // workbox.strategies.cacheFirst(),
// createCacheFirstStrategy('webMusic_media')
// );
// workbox.routing.registerRoute(
// new RegExp('/static/web/images/index/.*\.(?:png|jpg|jpeg|svg|gif)'),
// // workbox.strategies.cacheFirst(),
// createCacheFirstStrategy('webImagesIndex_imgs')
// );
} else {
console.log('Boo! Workbox didn\'t load 😬');
}