08335 / hivui-platform-template
hivui平台项目模板
Newer
Older
hivui-platform-template / assets_platform / workbox3 / sw.js
caibinghong on 8 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天
                }),
            ],
        });
    }


//---------指定路径缓存------------

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