@中文描述: @版本: @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1

08335 / hivui-platform-template

hivui平台项目模板

Browse code @中文描述: @版本: @升级登记:1 @同步后端:0 @同步数据库:0 @同步配置:0 @向下兼容:1 master
1 parent 38ff8a2 commit f3f05a1c312be8bc82196088406d961b61ad8abd caibinghong authored on 9 May

Showing 1 changed file

Ignore Space Show notes View assets_platform/workbox3/sw.js
/* 路由缓存策略 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 😬"); } / 路由缓存策略 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 😬'); }

Ignore Space Show notes View

assets_platform/workbox3/sw.js

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

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 😬');
}

Show line notes below