HTML5 構建簡單的離線應用程序

HTML5新增了離線應用，使得網(wǎng)頁或應用在沒有網(wǎng)絡的情況下依然可以使用。

離線應用的使用需要以下幾個步驟：

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

    02.訪問一定的資源。

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

當然，首先需要對瀏覽器進行檢測，看一下瀏覽器是否支持離線Web應用，代碼如下:

    if(window.applicationCache){

    //瀏覽器支持離線應用

    alert ("您的瀏覽器支持離線應用")

    }else{

    //瀏覽器不支持離線應用

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

    }

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

    首行必須以以下字符串開始，代碼如下：

    CACHE MANIFEST

    接下來就是要緩存文件的URL,—行一個（相對URL是相對于清單文件而言的，不是相對于文件），代碼如下：

    #以"#"開頭的是注釋

    common.css

    Common.js

    這個文件中列舉的所有的文件都會被緩存。

    在清單中，可以使用特殊的區(qū)域頭來標識頭信息之后的清單項的類型，上面最簡單的緩存屬于CACHE:區(qū)域，代碼如下：

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

    CACHE:

    common.css

    Connom.js

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

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

    NETWORK:

    a.css

    #表示以name開頭的資源都不要緩存

    name/

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

    FALLBACK:

    name/ example.html

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