Weex的JS緩存實(shí)現(xiàn)

原理

??服務(wù)端將weex可用的模塊打包成JS Bundle下發(fā)到客戶(hù)端恩袱,JS Bundle沒(méi)有分具體模塊所以文件較大,每次進(jìn)入頁(yè)面去請(qǐng)求會(huì)產(chǎn)生多余的通信流量及下載時(shí)間。

??所以加入weex緩存策略,將服務(wù)端下發(fā)的JS Bundle緩存到本地文件,請(qǐng)求下載時(shí)獲取服務(wù)端JS_Bundle文件MD5并與本地緩存文件MD5校驗(yàn)汁掠,校驗(yàn)成功直接使用緩存,校驗(yàn)失敗清除緩存并從服務(wù)端下載新的文件集币,最后緩存考阱。(服務(wù)端JS_Bundle地址為空時(shí)直接使用本地可用緩存)


緩存原理圖

實(shí)現(xiàn)

??實(shí)現(xiàn)代碼很簡(jiǎn)單,只需要自定義一個(gè)WXSDKInstance鞠苟,重寫(xiě)renderByUrl及render方法即可乞榨。

STEP1 下載JS前重寫(xiě)renderByUrl

??在拿到服務(wù)端JS的url后秽之,首先判斷是否有本地JS緩存,若有則對(duì)比本地JS及服務(wù)端JS的MD5進(jìn)行校驗(yàn)吃既,校驗(yàn)通過(guò)則直接使用本地JS考榨,否則按原計(jì)劃下載服務(wù)端JS。Weex支持使用本地JS文件鹦倚。

@Override
public void renderByUrl(String pageName, String url, Map<String, Object> options, String jsonInitData, WXRenderStrategy flag) {

    String local = "";
    if(TextUtils.isEmpty(url) || md5Check(url)){
        local = getLocalJs();//獲取本地JS路徑
    }

    if(!TextUtils.isEmpty(local){
        super.renderByUrl(pageName, local, options, jsonInitData, flag);
    }else {
        super.renderByUrl(pageName, url, options, jsonInitData, flag);
    }
}
/**
 * 獲取本地JS路徑
 */
private String getLocalJs(){
    try {
        File f = new File(context.getFilesDir(), "local_js.txt");
        if(f.exists()) {
            return "file://" + f.getAbsolutePath();
        }
    } catch (Exception e) {
    }
    return "";
}

STEP2 渲染時(shí)重寫(xiě)render

??JS文件獲取成功后河质,若是從服務(wù)端下載的JS,則需要進(jìn)行文件緩存震叙。

@Override
public void render(String pageName, String template, Map<String, Object> options, String jsonInitData, WXRenderStrategy flag) {
    saveWeexFile(template);
    super.render(pageName, template, options, jsonInitData, flag);
}
/**
 * 異步存儲(chǔ)JS Bundle RX實(shí)現(xiàn)
 * @param template
 */
private void saveWeexFile(String template){
    if(isLocalFile(getBundleUrl())){
        return;
    }
    Observable
            .just(template)
            .map(new Function<String, Boolean>() {
                @Override
                public Boolean apply(String s) throws Exception {
                    //weex對(duì)文件名不敏感掀鹅,存txt文件
                    return FileUtil.saveFile(context.getFilesDir().getAbsolutePath(), "local_js.txt", s.getBytes("UTF-8"));
                    }
                })
            .subscribeOn(Schedulers.io())
            .subscribe(new Consumer<Boolean>() {
                @Override
                public void accept(Boolean aBoolean) throws Exception {
                    if(aBoolean){
                        //緩存成功
                    }
                }
            },new Consumer<Throwable>(){
                @Override
                public void accept(Throwable throwable) throws Exception {
                    throwable.printStackTrace();
                }
            });
    }
/**
 * 異步存儲(chǔ)JS Bundle
 * @param template
 */
private void saveWeexFile(String template){
    if(isLocalFile(getBundleUrl())){
        return;
    }
    Thread thread = new Thread( new Runnable(){
        @Override
        public void run(){
            FileUtil.saveFile(context.getFilesDir().getAbsolutePath(), "local_js.txt", template.getBytes("UTF-8"));
        }
    });
    thread.start();
}
/**
 * 判斷是本地文件還是網(wǎng)絡(luò)url
 */
private boolean isLocalFile(String url){
    if(TextUtils.isEmpty(url){
        return false;
    }
    Uri uri = Uri.parse(url);
    if (uri != null && TextUtils.equals(uri.getScheme(), "file")) {
        return true;
    }
    return false;
}

STEP3 在頁(yè)面使用自定義WXSDKInstance替換原WXSDKInstance

PS

??如果weex頁(yè)面更新不頻繁,就沒(méi)必要每次都進(jìn)行文件校驗(yàn)捐友。每次啟動(dòng)app只進(jìn)行一次文件校驗(yàn)并緩存MD5淫半,后續(xù)打開(kāi)頁(yè)面進(jìn)行本地MD5校驗(yàn)溃槐。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末匣砖,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子昏滴,更是在濱河造成了極大的恐慌猴鲫,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,907評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件谣殊,死亡現(xiàn)場(chǎng)離奇詭異拂共,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)姻几,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)宜狐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人蛇捌,你說(shuō)我怎么就攤上這事抚恒。” “怎么了络拌?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,298評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵俭驮,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我春贸,道長(zhǎng)混萝,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,586評(píng)論 1 293
  • 正文 為了忘掉前任萍恕,我火速辦了婚禮逸嘀,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘允粤。我一直安慰自己崭倘,他們只是感情好屯蹦,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,633評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著绳姨,像睡著了一般登澜。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上飘庄,一...
    開(kāi)封第一講書(shū)人閱讀 51,488評(píng)論 1 302
  • 那天脑蠕,我揣著相機(jī)與錄音,去河邊找鬼跪削。 笑死谴仙,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的碾盐。 我是一名探鬼主播晃跺,決...
    沈念sama閱讀 40,275評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼毫玖!你這毒婦竟也來(lái)了掀虎?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 39,176評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤付枫,失蹤者是張志新(化名)和其女友劉穎烹玉,沒(méi)想到半個(gè)月后女仰,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體孩灯,經(jīng)...
    沈念sama閱讀 45,619評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,819評(píng)論 3 336
  • 正文 我和宋清朗相戀三年僧凰,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了掂榔。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片继效。...
    茶點(diǎn)故事閱讀 39,932評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖装获,靈堂內(nèi)的尸體忽然破棺而出瑞信,到底是詐尸還是另有隱情,我是刑警寧澤饱溢,帶...
    沈念sama閱讀 35,655評(píng)論 5 346
  • 正文 年R本政府宣布喧伞,位于F島的核電站,受9級(jí)特大地震影響绩郎,放射性物質(zhì)發(fā)生泄漏潘鲫。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,265評(píng)論 3 329
  • 文/蒙蒙 一肋杖、第九天 我趴在偏房一處隱蔽的房頂上張望溉仑。 院中可真熱鬧,春花似錦状植、人聲如沸浊竟。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,871評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)振定。三九已至必怜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間后频,已是汗流浹背梳庆。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,994評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留卑惜,地道東北人膏执。 一個(gè)月前我還...
    沈念sama閱讀 48,095評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像露久,于是被迫代替她去往敵國(guó)和親更米。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,884評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容