/* 路由缓存策略 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天 }), ], }); } //---------指定路径缓存------------ // ------------tinymce---------------- workbox.routing.registerRoute( new RegExp("/assets_platform/editor.md/.*.js"), // new RegExp('.*\.js'),// 这里是任何正则都行,只要能匹配得上的请求路由地址 // workbox.strategies.cacheFirst(), createCacheFirstStrategy("editorMd_js") ); workbox.routing.registerRoute( new RegExp("/assets_platform/editor.md/.*.css"), // workbox.strategies.cacheFirst(), createCacheFirstStrategy("editorMd_css") ); workbox.routing.registerRoute( new RegExp("/assets_platform/editor.md/.*.(?:fnt|ttf|eot|woff|woff2)"), // workbox.strategies.cacheFirst(), createCacheFirstStrategy("editorMd_font") ); // ------------tinymce---------------- workbox.routing.registerRoute( new RegExp("/assets_platform/monaco/.*.js"), // new RegExp('.*\.js'),// 这里是任何正则都行,只要能匹配得上的请求路由地址 // workbox.strategies.cacheFirst(), createCacheFirstStrategy("monaco_js") ); workbox.routing.registerRoute( new RegExp("/assets_platform/monaco/.*.css"), // workbox.strategies.cacheFirst(), createCacheFirstStrategy("monaco_css") ); workbox.routing.registerRoute( new RegExp("/assets_platform/monaco/.*.(?:fnt|ttf|eot|woff|woff2)"), // workbox.strategies.cacheFirst(), createCacheFirstStrategy("monaco_font") ); // ------------tinymce---------------- workbox.routing.registerRoute( new RegExp("/assets_platform/tinymce/.*.js"), // new RegExp('.*\.js'),// 这里是任何正则都行,只要能匹配得上的请求路由地址 // workbox.strategies.cacheFirst(), createCacheFirstStrategy("tinymce_js") ); workbox.routing.registerRoute( new RegExp("/assets_platform/tinymce/.*.css"), // workbox.strategies.cacheFirst(), createCacheFirstStrategy("tinymce_css") ); workbox.routing.registerRoute( new RegExp("/assets_platform/tinymce/.*.(?:fnt|ttf|eot|woff|woff2)"), // workbox.strategies.cacheFirst(), createCacheFirstStrategy("tinymce_font") ); // ------------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 😬"); }