HTML5新增了離線應用，離線應用使得我們可以在網頁或應用在沒有網絡的情況下依然可以使用。

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

離線檢測(確定是否聯網)

訪問一定的資源

有一塊本地空間用于保存數據(無論是否上網都不妨礙讀寫)

使用HTML5離線web應用

1、檢查瀏覽器的支持情況的方法

if(window.applicationCache){

//瀏覽器支持離線應用

}

2、關于描述文件

描述文件用來列出需要緩存和不需要緩存的資源，以備離線時使用。

描述文件的擴展名以前用.manifest，現在推薦使用.appcache，并且描述文件需要配置正確的MIME-type，即"text/cache-manifest"，必須在web服務器上進行配置(文件編碼必須是UTF-8)。不同的服務器有不同的配置方法，具體這里不詳述。

首行必須以以下字符串開始

CACHE MANIFEST

剩下的就是要緩存的文件的URL，一行一個(相對URL是相對于清單文件而言的，不是相對于文件)

#以“#”開頭的是注釋

common.css

common.js

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

在清單中，可以使用特殊的區域頭來標識頭信息之后的清單項的類型，上面的最簡單的緩存屬于"CACHE:"區域。

像這樣

#該頭信息之后的內容需要緩存

CACHE:

common.css

connom.js

以"NETWORK:"開頭的區域列舉的文件，總是從線上獲取，不緩存

NETWORK:頭信息支持通配符"*",表示任何未明確列舉的資源，都將通過網絡加載

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

NETWORK:

a.css

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

name/

以"FALLBACK:"開頭的區域中的內容，提供了獲取不到緩存資源時的備選資源路徑

該區域中的內容，每一行包含兩個URL(第一個URL是一個前綴，任何匹配的資源都不被緩存，第二個URL表示需要被緩存的資源)

FALLBACK:

name/ example.html

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

3、搭建離線應用程序

假設我們要構建一個包含css，js，html的單頁應用，同時要為這個單頁應用添加離線支持。

要將描述文件與頁面關聯起來，需要使用html標簽的manifest特性指定描述文件的路徑

開發離線應用的第一步就是檢測設備是否離線

HTML5新增了navigator.onLine屬性

當該屬性為true的時候表示聯網，值為false的時候，表示離線

if(navigator.onLine){

//聯網

}else{

//離線

}

** 注：IE6及以上瀏覽器及其他標準瀏覽器都支持這個屬性 **

online事件(IE9+瀏覽器支持)

當網絡從離線變為在線的時候觸發該事件，在window上觸發該事件，不需要刷新

window.online = function(){

//需要觸發的事件

}

offline事件(IE9+瀏覽器支持)

當網絡從在線變為離線的時候觸發該事件，和online事件一樣，在window上觸發該事件，不需要刷新

window.offline = function(){

//需要觸發的事件

}

應用緩存

應用緩存(Application Cache)是從瀏覽器的緩存中分出來的一塊緩存區(大小根據具體瀏覽器而定，一般是5M)

應用緩存和網頁緩存的區別：

應用緩存為整個web應用程序服務，網頁緩存服務于單個網頁

應用緩存只緩存指定頁面需要的指定資源(可人為控制)，任何網頁都具有網頁緩存(瀏覽器默認行為)

應用緩存不會隨著清除瀏覽器緩存而消失

應用緩存不會像網頁緩存那樣，老數據會被最新一次的新數據替代

應用緩存可以離線訪問，網頁緩存必須在線訪問

應用緩存可靠，可控，網頁緩存不可控

應用緩存的優勢

離線瀏覽

速度更快--已緩存資源加載更快

減少負載--瀏覽器只從服務器下載更新過的文件

一個web應用首次下載并緩存之后，任何加載請求都優先來自于緩存，因此可以實現離線緩存。如果不需要使用離線緩存了，就需要在服務器端刪除描述文件，或者刪除HTML頁面中的manifest屬性。

一旦應用被緩存，則緩存始終不變。那么，怎樣才能改變緩存

用戶清空應用緩存

manifest文件被修改

使用update()方法更新緩存

如果服務器上的文件有所修改的話，那么修改描述文件中注釋行的日期或者版本號是一個不錯的使瀏覽器重新緩存文件的辦法

此外，我們還可以使用HTML5提供的API來操作和更新緩存

applicationCache API

applicationCache API是一個操作應用緩存的接口。新的window.applicationCache對象可以觸發一系列與緩存狀態相關的事件。

這個對象有一個status屬性，值為常量，表示緩存狀態

0：沒有與頁面相關的應用緩存(未緩存)

1：應用緩存未得到更新(空閑)

2：正在下載描述文件并檢查更新(檢查中)

3：應用緩存正在下載描述文件中指定的資源(下載中)

4：應用緩存已經更新了資源，而且所有資源都已下載完畢，可以通過swapCache()來使用了(更新就緒)

5：應用緩存的描述文件不存在了，頁面無法再訪問應用緩存(已過期)

這個對象有以下事件，表示其狀態的改變

每次載入一個設置了manifest屬性的HTML文件，首先會觸發checking事件

如果應用程序已經緩存，并且清單文件沒有改動，則瀏覽器觸發noupdate事件

如果應用程序已經緩存，并且清單文件發生改動，則瀏覽器觸發downloading事件，下載完畢后觸發updateready事件

如果應用程序未緩存，則downloading事件和progress事件都會觸發，但是下載完成后觸發cached事件而不是updateready事件

如果處于離線，無法檢測清單狀態，則觸發error事件，如果引用一個不存在的清單文件，也會觸發error事件

如果處于在線，應用也緩存了，但是清單文件不存在，則會觸發obsolete事件，并將應用程序從緩存中清除。

一般來講，這些事件會隨著頁面加載按上述順序依次觸發

update()方法

通過update()方法也可以手工干預，讓應用緩存為檢查更新而觸發上述事件

applicationCache.update();

update()一經調用，應用緩存就會去檢查描述文件是否更新，觸發checking事件，然后頁面就會像剛剛加載一樣，繼續執行后續操作。如果觸發了cached事件，則說明應用緩存已經準備就緒，不會再發生其他操作。

swapCache()方法

如果觸發了updateready事件，則說明新版本的應用緩存已經可用，需要調用swapCache()方法來啟用新的應用緩存。

applicationCache.onupdateready = function(){

applicationCache.swapCache();

};

瀏覽器檢查清單文件，以及更新緩存的操作是異步的，因此可能是在載入舊緩存之后進行，因此可能需要載入兩次才能顯示最新的內容，因此需要提示用戶

window.applicationCache.onupdateready = function(){

var con = comfirm('有新內容可用，是否重新加載？');

if(con){

location.reload();

}

}

總結

以上是生活随笔為你收集整理的手机修改html离线网页内容,HTML5--离线web应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。