Blend 離線緩存方案

在 webapp 開發(fā)中，數(shù)據(jù)存儲(chǔ)和離線可訪問是每個(gè)開發(fā)者遇到的難題，也是影響用戶體驗(yàn)的主要一環(huán)；為了克服缺陷，HTML不斷推出新接口，從Cookie延續(xù)到 localStorage、 Web SQL DataBase和AppCache，但現(xiàn)存的接口依然存成如下問題：

1. 存儲(chǔ)量有限，存儲(chǔ)形式太過單一；

cookie存儲(chǔ)數(shù)量和大小都有所限制，存儲(chǔ)形式上按照字符串進(jìn)行拼接； 新推出的localStorage對(duì)cookie有很好補(bǔ)充作用，提供key-value鍵值對(duì)存儲(chǔ)，但大小依然受限，不提供結(jié)構(gòu)化存儲(chǔ)；

2. 系統(tǒng)支持程度不統(tǒng)一，無法保證成功率；

android分支越來越多，對(duì)應(yīng)的web api支持情況也更加多樣；如對(duì)結(jié)構(gòu)化存儲(chǔ)支持很好的indexedDB接口，必須運(yùn)行在android大于4.3，ios大于8.1的版本；接口支持的不統(tǒng)一，很難保證成功率；

3. 無法滿足對(duì)文件內(nèi)容的存儲(chǔ)和獲??；

現(xiàn)在還沒有接口可以讀取和存儲(chǔ)文件, 為了保證離線可訪問必須對(duì)文件內(nèi)容進(jìn)行存?。?/p>

4. 無法實(shí)時(shí)更新，最終結(jié)果無法預(yù)料；

頁(yè)面采用Cache Manifest可實(shí)現(xiàn)頁(yè)面離線可訪問， 但用戶無法實(shí)時(shí)更新，內(nèi)容更新之后須修改配置文件當(dāng)用戶第二次刷新時(shí)可看到新的內(nèi)容；

5. 接口使用太過復(fù)雜，各個(gè)接口互相孤立;

保證webapp離線可訪問是個(gè)系統(tǒng)工程，牽涉到存儲(chǔ)、網(wǎng)絡(luò)檢測(cè)、文件讀取、安全等，現(xiàn)存的接口是不同時(shí)期推出，每個(gè)接口僅是為了解決局部問題引入，沒有系統(tǒng)性的集合起來供用戶使用；

從分析情況來看，依靠純web提供的接口無法完全滿足需求，百度Clouda+近期1.2版本發(fā)布，提供了另一種離線緩存方案；

Clouda+離線方案

通過分析web提供的api，須在自己控制的系統(tǒng)中設(shè)計(jì)一套獨(dú)立的API，需要有下面幾個(gè)模塊：

1. 存儲(chǔ)模塊

   為了提高檢索速度，支持結(jié)構(gòu)化存儲(chǔ)和索引查詢數(shù)據(jù)；因要存儲(chǔ)大量靜態(tài)資源文件，存儲(chǔ)大小應(yīng)該不受限制；

2. 網(wǎng)絡(luò)模塊

   此模塊內(nèi)可以攔截網(wǎng)絡(luò)請(qǐng)求，對(duì)攔截的請(qǐng)求內(nèi)容存儲(chǔ)到本地，保證離線時(shí)獲?。贿€可以對(duì)網(wǎng)絡(luò)情況進(jìn)行判斷，使其從不同渠道獲取內(nèi)容；

3. 文件模塊

   攔截了請(qǐng)求之后，下一步就必須把此請(qǐng)求的文件內(nèi)容進(jìn)行存儲(chǔ)或者讀取，文件I/O操作必不可少；

4. 安全模塊

   數(shù)據(jù)下載到了手機(jī)空間中，必須對(duì)文件進(jìn)行安全加密和訪問限制，保證數(shù)據(jù)安全

Clouda+的Runtime提供了webapp運(yùn)行環(huán)境，此方案設(shè)計(jì)也架構(gòu)在了Runtime之中，下面是其架構(gòu)圖： 

網(wǎng)絡(luò)攔截和網(wǎng)絡(luò)環(huán)境模塊提供網(wǎng)絡(luò)接口，通過對(duì)網(wǎng)絡(luò)環(huán)境的判斷來確定是否攔截網(wǎng)絡(luò)請(qǐng)求；數(shù)據(jù)存儲(chǔ)模塊是個(gè)精簡(jiǎn)的數(shù)據(jù)庫(kù)系統(tǒng)，用戶可存儲(chǔ)或者索引數(shù)據(jù)；文件存儲(chǔ)提供了對(duì)文件的下載和讀??；訪問策略和安全加密提供了安全模塊，來限制文件的自由讀取；

方案優(yōu)勢(shì)

1. 存儲(chǔ)量不再受限制；

存儲(chǔ)量?jī)H和用戶手機(jī)空間大小相關(guān)；

2. 支持了文件下載和讀取；

通過對(duì)文件下載和讀取接口，用戶可以把圖片、頁(yè)面內(nèi)容或者數(shù)據(jù)等方便下載到手機(jī)空間中，突破web無法操作文件的限制；

3. 不受手機(jī)自身webview版本的限制；

Clouda+的數(shù)據(jù)或者文件存儲(chǔ)都是依靠框架自身能力實(shí)現(xiàn)，不依賴手機(jī)本身，也就是只要升級(jí)到Clouda+最新版本，都完美支持此功能；

4. 離線訪問可自由控制，保證實(shí)時(shí)性和離線可訪問性；

Clouda+設(shè)置了攔截器開關(guān)，可自由攔截網(wǎng)絡(luò)資源，是否用離線數(shù)據(jù)用戶可自由控制；

5. 對(duì)接口就行了整合封裝，幾乎可零配置支持網(wǎng)絡(luò)資源離線訪問；

Clouda+對(duì)各個(gè)接口基礎(chǔ)上進(jìn)行了封裝，用戶幾乎零配置就可以讓其webapp支持離線訪問；

如何使用

使用Clouda+離線緩存技術(shù)必須在其提供的Runtime環(huán)境下進(jìn)行開發(fā), 引入clouda+入口腳本文件loader；提供了智能的離線緩存和主動(dòng)調(diào)用方式：

智能化配置

1. 首頁(yè)載入cache模塊且進(jìn)行初始化；

Blend.lightInit({
    ak:  'xxxxxxxxxx', // 百度開發(fā)者平臺(tái)提供的appKey
    module: ['cache']
},  function(){
    Blend.device.cache.init()；// 加載完成后初始化
})；

2. 頁(yè)面head頭部引入meta標(biāo)簽，配置需要緩存的資源；

如自動(dòng)緩存圖片資源側(cè)添加如下：

<meta name="Cache-Type" content='image/gif,image/png', image/jpg />

添加完之后，不需要任何代碼，webapp就可以對(duì)圖片資源進(jìn)行了攔截，離線時(shí)候就可適用緩存資源；

主動(dòng)調(diào)用

1. 首先載入cache模塊；

Blend.lightInit({
    ak:  'xxxxxxxxxx', // 百度開發(fā)者平臺(tái)提供的appKey
    module: ['cache']
})；

2. 調(diào)用set緩存相應(yīng)資源

Blend.device.cache.set({
    url:'xxxxxxxxxxxxxx', // 要離線的資源文件
    onsuccess: function( data ){
        //成功回調(diào)
    },
    onfail: function(){data}{
        // 失敗回調(diào)
    }
})；

回調(diào)中可傳入?yún)?shù)filedata，告訴攔截器什么網(wǎng)絡(luò)環(huán)境下進(jìn)行讀取緩存資源；

3. 打開攔截器

Blend.device.interceptor.set({
    status: 1, // 1打開,0 關(guān)閉
    onsuccess: function( data ){
        //成功回調(diào)
    },
    onfail: function(){data}{
        // 失敗回調(diào)
    }
})；

之后再次請(qǐng)求緩存的資源地址，攔截器根據(jù)網(wǎng)絡(luò)環(huán)境和配置，自動(dòng)判斷獲取緩存或者線上拉取;

以上只是智能離線緩存使用方法，此次升級(jí)把所依賴的底層接口fs、 database、connection、interceptor都已開放，可在此基礎(chǔ)上延伸出更多技術(shù)方案。