Blend 離線緩存方案

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

1. 存儲量有限，存儲形式太過單一；

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

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

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

3. 無法滿足對文件內(nèi)容的存儲和獲?。?/h5>

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

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

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

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

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

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

Clouda+離線方案

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

1. 存儲模塊

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

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

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

3. 文件模塊

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

4. 安全模塊

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

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

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

方案優(yōu)勢

1. 存儲量不再受限制；

存儲量僅和用戶手機空間大小相關(guān)；

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

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

3. 不受手機自身webview版本的限制；

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

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

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

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

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

如何使用

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

智能化配置

1. 首頁載入cache模塊且進行初始化；

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

2. 頁面head頭部引入meta標簽，配置需要緩存的資源；

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

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

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

主動調(diào)用

1. 首先載入cache模塊；

Blend.lightInit({
    ak:  'xxxxxxxxxx', // 百度開發(fā)者平臺提供的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)境下進行讀取緩存資源；

3. 打開攔截器

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

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

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