HTML5 構(gòu)建簡(jiǎn)單的離線(xiàn)應(yīng)用程序

HTML5新增了離線(xiàn)應(yīng)用，使得網(wǎng)頁(yè)或應(yīng)用在沒(méi)有網(wǎng)絡(luò)的情況下依然可以使用。

離線(xiàn)應(yīng)用的使用需要以下幾個(gè)步驟：

    01.離線(xiàn)檢測(cè)（確定是否聯(lián)網(wǎng)）。

    02.訪(fǎng)問(wèn)一定的資源。

    03.有一塊本地空間用于保存數(shù)據(jù)（無(wú)論是否上網(wǎng)，都不妨礙讀寫(xiě)）。

當(dāng)然，首先需要對(duì)瀏覽器進(jìn)行檢測(cè)，看一下瀏覽器是否支持離線(xiàn)Web應(yīng)用，代碼如下:

    if(window.applicationCache){

    //瀏覽器支持離線(xiàn)應(yīng)用

    alert ("您的瀏覽器支持離線(xiàn)應(yīng)用")

    }else{

    //瀏覽器不支持離線(xiàn)應(yīng)用

    alert ("您的瀏覽器弱爆了,不支持離線(xiàn)應(yīng)甩，快去");

    }

    描述文件用來(lái)列出需要和不需要緩存的資源，以備離線(xiàn)時(shí)使用。描述文件的擴(kuò)展名以前用.manifest,現(xiàn)在推薦使用.appcache，并且描述文件需要配置正確的MIME-type, 即text/cachemanifest,必須在Web服務(wù)器上進(jìn)行配置（文件編碼必須是UTF-8)。但是不同的服務(wù)器有不同的 配置方法。

    首行必須以以下字符串開(kāi)始，代碼如下：

    CACHE MANIFEST

    接下來(lái)就是要緩存文件的URL,—行一個(gè)（相對(duì)URL是相對(duì)于清單文件而言的，不是相對(duì)于文件），代碼如下：

    #以"#"開(kāi)頭的是注釋

    common.css

    Common.js

    這個(gè)文件中列舉的所有的文件都會(huì)被緩存。

    在清單中，可以使用特殊的區(qū)域頭來(lái)標(biāo)識(shí)頭信息之后的清單項(xiàng)的類(lèi)型，上面最簡(jiǎn)單的緩存屬于CACHE:區(qū)域，代碼如下：

    #該頭信息之后的內(nèi)容需要緩存

    CACHE:

    common.css

    Connom.js

    以NETWORK:開(kāi)頭的區(qū)域列舉的文件總是從線(xiàn)上獲取，不緩存。NETWORK:頭信息支持通配符“*”，表示任何未明確列舉的資源，都將通過(guò)網(wǎng)絡(luò)加載，代碼如下：

    #該頭信息之后的內(nèi)容不需要緩存，總是從線(xiàn)上獲取

    NETWORK:

    a.css

    #表示以name開(kāi)頭的資源都不要緩存

    name/

    以FALLBACK:開(kāi)頭的區(qū)域中的內(nèi)容提供了獲取不到緩存資源時(shí)的備選資源路徑。該區(qū)域中的內(nèi)容，每一行包含兩個(gè)URL。第一個(gè)URL是一個(gè)前綴，任何匹配的資源都不被緩存，第二個(gè)URL表示需要被緩存的資源，代碼如下：

    FALLBACK:

    name/ example.html

    一個(gè)清單可以有任意多個(gè)區(qū)域，且位置沒(méi)有限制。