/* 路由缓存策略 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 😬'); }