HTML5離線應用

今天學習了一下離線應用,感覺棒棒噠~向前端又走進了一步~

下面就說一下我理解的離線應用,此篇先寫簡單一點的離線應用。

 首先呢,HTML5爲我們提供了離線應用這個功能,這個功能主要包括3部分:

(1)在線打開頁面的同時,緩存離線文件(HTML/CSS/JS/圖片/其它)​

      manifest文件,從現在開始我們就要牢牢記住這個名字,因爲這個文件就是實現離線的關鍵。在這個文件中,列出了所有需要緩存資源的列表。通過在HTML文件中添加manifest文件,可以在打開網頁的同時訪問manifest文件,將其中所列出的資源列表全部緩存在瀏覽器中。在HTML文件中如下引用manifest文件。

例如:manifest文件名稱爲a.manifest

在HTML文件中

      在HTML文件中manifest文件引用格式​已經給出來啦,接下來是簡單的manifest文件內部各式的介紹。

首先在這個文件中第一行必須是CACHE MANIFEST ​開頭,然後第二部分爲NETWORK即爲在線的文件,可寫可不寫,接下來第三部分是FALLBACK部分,寫入的是離線的替代文件,即原文件打不開的時候就選用替代文件,可寫可不寫。第四部分​是最重要的CACHE部分,其下爲所有需要離線的資源的列表。

例如:

CACHE MANIFEST

#此爲註釋符號​

NETWORK

FALLBACK

offline.html

CACHE

b.html(加入本頁面爲a.html,也就是a.html文件引用了manifest文件,就無需在manifst文件緩存資源列表中寫a.html了,它會自行緩存下來)

c.html

../other/c.html(此處注意“..”部分代表的是公共根目錄,使用..代替即可)​

有關緩存文件部分介紹完啦~~我是萌萌噠程序猿~(*^__^*) ~​

(2)緩存文件更新(先介紹簡單的方法)

接下來介紹一種很簡單的文件緩存更新的方法。

這裏一定要聲明幾個問題:

      只有當manifest文件內容發生改變的時候,在線的時候才能更新緩存文件。大概過程就是在線時刷新出在線的頁面,在讀取到時,就會讀取服務器上manifest文件,重新緩存​新的資源列表。如果只是更改了比如js文件內部的內容,那麼緩存資源不會更新,因爲manifest文件沒發生改變。

      我們可以通過​​添加註釋行或者增加減少資源列表等方式使manifest文件發生改變,從而達到更新緩存資源的目的。

這就是簡單的緩存更新方法啦~​

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章