08335 / hivui-platform-template
hivui平台项目模板
Newer
Older
hivui-platform-template / assets_platform / workbox3 / sw.js
caibinghong on 9 May @中文描述:
/*
路由缓存策略
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 😬");
}