Skip to content

[FeatureRequest]一个不成熟的建议:增加压缩打包 #651

Description

@nenge123

随着PWA功能的发展,增加更快的WEB相应,减少http响应
这个功能主要应用在编辑器一类,文件贼多那种

    Object.assign(this,
        {
            async load_tinymce(){
                if('serviceWorker' in navigator){
                    //worker is open
                    let mycache = await caches.open('XIUNOBBS');
                    let path = T.JSpath+'tinymce/tinymce.min.js';//此地址虚假,不存在文件
                    let response = await mycache.match(path);
                    if(!response){
                        //下载并且用 (gildas-lormeau/zip.js)解压
                        let files = await T.FetchItem({url:T.JSpath+'zip/tinymce.zip',unpack:true});
                        await I.Async(I.toArr(files).map(async entry=>{
                            let re = new Response(
                                new File([entry[1]],F.getname(entry[0]),{type:F.getMime(entry[0])}),
                                {headers:{status:200,'Content-Length':entry[1].byteLength}}
                            );
                            //写入至serverWorker缓存中
                            await mycache.put(T.JSpath+entry[0],re);
                        }));
                    }
                    T.addJS(path);
                }else{
                    T.addJS('https://cdn.staticfile.org/tinymce/6.5.0/tinymce.min.js');
                }
            }
        }
    );
  //load_tinymce().then(...)

serverWorker

var CACHE_NAME = 'XIUNOBBS';//if you have any version update change here
var CACHE_PATH = serviceWorker.scriptURL.split('/').slice(0, -1).join('/') + '/';
//定义一个特点缓存版本
//var VERSION = caches.match('my_cache_data_version', { cacheName: CACHE_NAME });
Object.entries(
    {
        install(event) {
            console.log('serviceWorker install');
            return self.skipWaiting();//跳过等待
        },
        activate(event) {
            console.log('serviceWorker activate');
            return self.skipWaiting();//跳过等待
        },
        fetch(event) {
            //拦截请求 event.request 一个请求对象
            return event.respondWith(new Promise(async resolve => {
                var url = event.request.url.replace(CACHE_PATH, ''), cacheTime;
                const cache = await caches.open(CACHE_NAME);
                var response = await cache.match(event.request);
                if (navigator.onLine) {
                    //联网状态
                    if (!response) {
                        response = await fetch(event.request);
                        if(response&&response.status==200){
                            if (url.match(/(static\/)[^\s]+\.\w+$/)) {
                                //特定条件缓存
                                cache.put(event.request, response.clone());
                            } else {
                                //console.log(event.request.url);
                            }
                        }
                    }
                    /* else if (url.match(/cache\/(data|css)\/\w+\.(js|css)\?\d+$/)) {
                        //特地缓存自动更新管理规则 xx?time
                        var version = url.split('?')[1];
                        var responseVer = await VERSION;
                        if (!responseVer || responseVer.headers.get('ver') != version) {
                            var list = await cache.matchAll(url.split('?')[0], { ignoreSearch: true });
                            if (list) list = list.filter(v => {
                                var bool = v.url == url;
                                if (!bool) {
                                    cache.delete(v);
                                    console.log('remove ' + v.url);
                                }
                                return bool;
                            });
                            if (!list.length) {
                                response = await fetch(event.request);
                                cache.put(event.request, response.clone());
                            }
                            cache.put('my_cache_data_version', new Response('', { headers: { ver: version } }));
                        }
                    }
                    */
                }
                resolve(response);

            }));
        },
        message(event) {
            console.log(event.data);
        }
    }
).forEach(
    entry => {
        self.addEventListener(entry[0], entry[1]);
    }
);

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions