離線web儲存

標籤：des   android   style   blog   http   io   os   使用   java   

本機快取與瀏覽器網頁的緩衝

本機快取與瀏覽器網頁緩衝的區別

離線緩衝需要 本機快取web應用程式的所有html css、 js 檔案本機快取服務於整個web應用

瀏覽器網頁緩衝只服務於單個網頁，

任何網頁都具有緩衝，而本機快取只緩衝你指定緩衝的網頁。網頁緩衝不安全、不可靠，我們不知道網站中緩衝了哪些網頁，緩衝了哪些網頁上的資源。本機快取是可靠，我們可以控制對那些沒內容進行緩衝，開發人員還可用編程的手段來控制緩衝的更新，利用緩衝對象的屬性、狀態事件開發更強大的離線web應用。

manifest檔案

  web應用的本機快取是通過每個頁面的manifest檔案進行管理的

CACHE MANIFEST   //必須的

 

#This is a comment

CACHE         //要快取檔案用於離線使用

index.html

style.css

NETWORK:   //  不進行本機快取儲存的檔案

search.php

login.php

FALLBACK:   //兩個檔案分別為能夠線上時訪問使用的資源，不能線上訪問時用的資源

/api offline.html

applicationCache對象：代表本機快取，用它來通知本機快取已被更新，也允許使用者手動更新

當瀏覽器對本機快取更新，裝入新檔案的時會觸發applicationCatche對象的updateready事件 來通知本機快取已被更新（可以用它來告訴使用者，使用者需要手工重新整理來擷取頁面的最新版本）

applicationCatche.onUpdateReady = function(){}

swapCatch方法用於手工執行本機快取的更新只能在applicationCatche的updateready事件被觸發時調用，updateReady事件只有在伺服器上的manifest檔案被修更新，且把manifest檔案中所要求的資源下載到本地時出發

    setInterval(function() {

        // 手工檢查是否有更新

        applicationCache.update();

    }, 5000);

    applicationCache.addEventListener("updateready", function() {

        if (confirm("本機快取已被更新,需要重新整理畫面來擷取應用程式最新版

本，是否重新整理？")) {

        // (3) 手工更新本機快取

            applicationCache.swapCache();

            // 重載畫面

            location.reload();

        }

    }, true);

 

applicationCatche的其他事件

function init()

{

    var msg=document.getElementById("msg");

    applicationCache.addEventListener("checking", function() {

        msg.innerHTML+="checking<br/>";

    }, true);

    applicationCache.addEventListener("noupdate", function() {

        msg.innerHTML+="noupdate<br/>";

    }, true);

    applicationCache.addEventListener("downloading", function() {

        msg.innerHTML+="downloading<br/>";

    }, true);

    applicationCache.addEventListener("progress", function() {

        msg.innerHTML+="progress<br/>";

    }, true);

    applicationCache.addEventListener("updateready", function() {

        msg.innerHTML+="updateready<br/>"; 

    }, true);

    applicationCache.addEventListener("cached", function() {

        msg.innerHTML+="cached<br/>";         

    }, true);

    applicationCache.addEventListener("error", function() {

msg.innerHTML+="error<br/>";

    }, true);

}

 

 

       HTML5近十年來發展得如火如荼，在HTML5平台上，視頻，音頻，圖象，動畫，以及同電腦的互動都被標準化。HTML功能越來越豐富，支援圖片上傳拖拽、支援localstorage、支援web sql database、支援檔案儲存體api等等。它任重而道遠，致力於將Web帶入一個更為成熟的應用平台。在所有炫酷特性中，最讓我喜歡的是它具有離線緩衝Web應用的功能。

開發離線Web 應用程式：三大核心功能

在開發支援離線的 Web 應用程式時，開發人員通常需要使用以下三個方面的功能：

1. 離線資源緩衝：需要一種方式來指明應用程式離線工作時所需的資源檔。這樣，瀏覽器才能在線上狀態時，把這些檔案快取到本地。此後，當使用者離線訪問應用程式時，這些資源檔會自動載入，從而讓使用者正常使用。HTML5 中，通過 cache manifest 檔案指明需要緩衝的資源，並支援自動和手動兩種緩衝更新方式。

2. 線上狀態檢測：開發人員需要知道瀏覽器是否線上，這樣才能夠針對線上或離線的狀態，做出對應的處理。在 HTML5 中，提供了兩種檢測當前網路是否線上的方式。

3. 本機資料儲存：離線時，需要能夠把資料存放區到本地，以便線上時同步到伺服器上。為了滿足不同的儲存需求，HTML5 提供了 DOM Storage 和 Web SQL Database 兩種儲存機制。前者提供了易用的 key/value 對儲存方式，而後者提供了基本的關聯式資料庫儲存功能。

 

離線儲存HTML5 Web SQL Database

Web SQL Database 提供了基本的關聯式資料庫功能，支援頁面上的複雜的、互動資料存放區。它既可以用來儲存使用者產生的資料，也可以作為從伺服器擷取資料的本地快取。例如可以把電子郵件、議程等資料存放區到資料庫中。Web SQL Database 支援資料庫事務的概念，從而保證了即使多個瀏覽器視窗操作同一資料，也不會產生衝突。

它還引入了一套使用 SQL 來操縱用戶端資料庫(client-side database)的 API，這些 API 是非同步(asynchronous)。所使用的 SQL 語言為 SQLite 3.6.19。其中 SQLite 是一款輕型的資料庫，佔用資源非常低，支援 Windows/Linux/Unix 等主流作業系統，同時能夠跟很多程式語言相結合，如 C#，PHP，Java，JavaScript 等，比起 Mysql，PostgreSQL 這兩款開源的資料庫管理系統來說，它的處理速度更快。目前iOS和Android平台支援運行Web SQL Database。

var db = window.openDatabase("DBName", "1.0", "description", 5*1024*1024); //5MB

 

db.transaction(function(tx) {

 

tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);

 

});

 

Web Workers

 

main.js:

 

var worker = new Worker(‘task.js‘);

 

worker.onmessage = function(event) { alert(event.data); };

 

worker.postMessage(‘data‘);

 

task.js:

 

self.onmessage = function(event) {

 

// Do some work.

 

self.postMessage("recv‘d: " + event.data);

 

};

 

 

  HTML5 IndexedDB:輕量級NoSQL資料庫

IndexedDB是HTML5-WebStorage的重要一環，是一種輕量級NoSQL資料庫。

w3c為IndexedDB定義了很多介面，其中Database對象被定義為IDBDataBase。

瀏覽器對象中，實現了IDBFactory的只有indexedDB這個執行個體。

 

五步建立HTML5離線Web應用

在HTML5提供的所有炫酷功能裡，建立離線緩衝網頁是我最喜歡的一個特性，以下是五步快速建立HTML5離線Web應用的步驟

 

1. 第一步：建立一個有效HTML5文檔，HTML5 doctype比xhtml更易於識記。

建立一個名為index.html的檔案，這裡學習如何使用CSS3來策劃網站布局。

http://www.catswhocode.com/blog/create-an-adaptable-website-layout-with-css3-media-queries

2. 新增.htaccess支援

我們要建立的快取頁面面稱為manifest檔案，假設你所使用的伺服器是Apache，我們在建立檔案之前，需要往.htaccess檔案新增一個指令。

開啟.htaccess檔案，該檔案部署在網站的根目錄下，新增以下代碼：

AddType text/cache-manifest .manifest

該指令可以確保每一個.manifest檔案文本快取。如果該檔案不存在，整個緩衝效果就無法實現，頁面也不能實現離線緩衝。

 

3. 建立.manifest檔案

在我們建立好了.manifest檔案後，事情就變得有趣多了。建立好新檔案，命名為offline.manifest，嵌入以下代碼。

CACHE MANIFEST

 

#This is a comment

 

CACHE

 

index.html

 

style.css

 

image.jpg

 

image-med.jpg

 

image-small.jpg

 

notre-dame.jpg

 

 

現在你擁有了一個完美的manifest列表。其實原理很簡單，在聲明CACHE後，你可以列出自己想要離線緩衝的檔案。這個對於緩衝一個簡單的網頁，已經是綽綽有餘了，而HTML5的緩衝有其它一些有趣的功能。

CACHE MANIFEST   //必須的

 

#This is a comment

 

CACHE         //要快取檔案用於離線使用

 

index.html

 

style.css

 

NETWORK:   //  不進行本機快取儲存的檔案

 

search.php

 

login.php

 

FALLBACK:   //兩個檔案分別為能夠線上時訪問使用的資源，不能線上訪問時用的資源

 

/api offline.html

 

在這個樣本中，manifest檔案聲明了CACHE，用於緩衝index.html和style.css。同時，我們聲明了NETWORK，用於指定不被緩衝的檔案，比如登入頁面。

最後聲明的是FALLBACK，這個聲明允許將使用者轉入一個指定的頁面，比如本例中如果不打算離線查看API資源的話，可以轉向Off.html頁面。

 

4. 將manifest 檔案連結到HTML文檔中。

在manifest檔案和主要的html文檔準備好了以後，你唯一還需要做的事情是將manifest檔案連結到html文檔中。

操作方法很簡單，只需在html元算中添加manifest 屬性，代碼如下：

 

 

本機資料庫

 1.建立訪問資料庫的對象                  //var db = openDatabase(‘mysql‘,‘1.0‘,‘Test DB‘,2*1024*1024) 當資料庫不存在時會建立資料庫

2.使用交易處理                                   //訪問資料庫調用transaction方法執行交易處理  參數為一個回呼函數

Eg bd.transaction(function(tx){

         tx.executeSql(‘CREATE TABLE IF NOT EXISTS MsgData(name TEXT, message TEXT, time INTEGER)‘,[]); 

        tx.executeSql(‘SELECT * FROM MsgData‘, [], function(tx, rs)

        { //removeAllData(); 

            for(var i = 0; i < rs.rows.length; i++)

            { 

                showData(rs.rows.item(i)); 

            } 

        });  });  });

Tx.executeSql(‘sql參數用？‘,[為？賦值]，funsuccess，funerror)

 

本機快取通過每個頁面的mainfest檔案來管理。 

瀏覽器和伺服器的互動過程： 

  瀏覽器請求URL->伺服器返回頁面->瀏覽器解析頁面->伺服器返回所有資源->瀏覽器處理mainfest檔案->伺服器返回所有要求本機快取的檔案->瀏覽器對本機快取進行更新 

  瀏覽器再次請求URL->瀏覽器發現緩衝->瀏覽器解析快取頁面面->瀏覽器請求mainfest->（無更新）伺服器返回304（【如果已更新】->瀏覽器再次請求URL->瀏覽器發現快取頁面面->瀏覽器解析快取頁面面->瀏覽器請求mainfest檔案->伺服器返回更新過的mainfest->瀏覽器處理mainfest->瀏覽器返回本機快取->瀏覽器對本機快取進行更新） 

【緩衝更新在本機快取更新完還是不能用，只有重新開啟這個頁面的時候才能使用更新過的資源檔】 

      通過觸發applicationCache對象的onUpdateReady事件，告訴使用者本機快取已經被更新，需手工重新整理頁面來得到最新版本的應用程式。 

    通過觸發applicationCache對象的swapcache方法手工執行本機快取更新操作，他只能在applicationCache對象的updataReady事件裡被觸發調用。 

離線web儲存