.jpg)
所謂離線應(yīng)用，就是在離線時(shí)能夠把數(shù)據(jù)存儲(chǔ)到本地，在線時(shí)同步到服務(wù)器上。html5提供了程序緩存和本地存儲(chǔ)兩種機(jī)制來實(shí)現(xiàn)， 可以用cache manifest和indexeddb來搜索相關(guān)內(nèi)容。各個(gè)瀏覽器對(duì)此支持都不太一樣，本文嘗試出一種可行的方案。 程序緩存 程序緩存比
所謂離線應(yīng)用，就是在離線時(shí)能夠把數(shù)據(jù)存儲(chǔ)到本地，在線時(shí)同步到服務(wù)器上。html5提供了程序緩存和本地存儲(chǔ)兩種機(jī)制來實(shí)現(xiàn)， 可以用cache manifest和indexeddb來搜索相關(guān)內(nèi)容。各個(gè)瀏覽器對(duì)此支持都不太一樣，本文嘗試出一種可行的方案。
程序緩存
程序緩存比較容易設(shè)置，只要寫一個(gè).manifest文件，服務(wù)器空間，再把它寫到html元素的屬性就可以了。我遇到的一些問題：
因此對(duì)離線應(yīng)用而言，我認(rèn)為程序緩存的作用就是保存靜態(tài)文件。
本地存儲(chǔ)與數(shù)據(jù)庫(kù)
據(jù)說瀏覽器限制本地存儲(chǔ)為5M，所以就不考慮了。主要是利用瀏覽器支持的indexedDB來完成數(shù)據(jù)操作。
數(shù)據(jù)流/對(duì)象交互設(shè)計(jì)
瀏覽器中的視圖view一般直接從服務(wù)器中存取數(shù)據(jù)。考慮了離線應(yīng)用之后，需要加入一個(gè)中介mediator，如上圖所示，為視圖屏蔽掉在線與離線的區(qū)別，簡(jiǎn)化視圖設(shè)計(jì)。在此有兩者實(shí)現(xiàn)方式：
1.????????以原有的在線方式為主，在原有的數(shù)據(jù)流上開分路。好處是不改變?cè)械臄?shù)據(jù)格式，服務(wù)器空間，不中斷原來網(wǎng)站的運(yùn)行。
2.????????以離線方式為主，無論在線與否，視圖都只對(duì)indexedDB進(jìn)行數(shù)據(jù)存取，在后臺(tái)進(jìn)行indexedDB與服務(wù)器的數(shù)據(jù)復(fù)制replication。
方式1的測(cè)試成本要比方式2高一些。方式1要測(cè)試視圖到服務(wù)器，視圖到indexedDB和indexedDB到服務(wù)器三條路徑。方式2只要測(cè)試視圖到indexedDB和indexedDB到服務(wù)器兩條路徑。因此我選擇了方式2。
數(shù)據(jù)復(fù)制replication
視圖到indexedDB的數(shù)據(jù)存取理論上是比較容易的，實(shí)際上有很多莫名其妙的地方。這里只討論數(shù)據(jù)復(fù)制。需要考慮的是數(shù)據(jù)的版本控制。
復(fù)制過程需要考慮數(shù)據(jù)表中每一條數(shù)據(jù)的狀態(tài)，其轉(zhuǎn)換圖如下：
總結(jié)
從本文的方案可以看出，離線應(yīng)用的難題在于本地?cái)?shù)據(jù)與服務(wù)區(qū)數(shù)據(jù)的同步，網(wǎng)站空間，最好能得到瀏覽器的支持。
.png)
