HTML5 離線應用中怎樣打造零請求和無流量網站

今天就跟大家聊聊有關HTML5 離線應用中怎樣打造零請求和無流量網站，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

前言

今天Web應用程序已經很復雜了，以現在的發展，會將越來越復雜，但他有一個致命缺點，不能脫離internet鏈接，因此在HTML中新增了一API，

它使用一個本地存儲機制很好地解決了這個問題，為離線web應用鋪平了道路。
本地緩存于瀏覽器緩存

代碼如下:

本地緩存是為整個web應用程序服務
瀏覽器緩存只對單個網頁服務</p> <p>任何網頁都具有網頁緩存
本地緩存只緩存那些你指定緩存的頁面</p> <p>網頁緩存不可靠、不安全，因為我們不知道網站中到底緩存了哪些頁面、哪些資源
本地緩存可以控制對哪些內容進行緩存

manifest文件

web應用程序本地緩存是通過每個頁面的manifest文件來管理的，manifest是一簡單文本，在該文件中以清單的形式列舉了需要被緩存的不需要被緩存的文件的名字、路徑。

可以為每個頁面單獨指定manifest也可以為整個應用程序指定，例我們為hello.htm的設置：

代碼如下:

CACHE MANIFEST
CACHE:
other.html
hellow.js
images/myphoto.jpg
NETWORK:
http://LuLinniu/NotOffline
NotOffline.asp
*
FALLBACK:
online.js locale.js
CACHE:
newhellow.html
newhellow.js

在manifest文件中，第一行必須是CACHE MANIFEST，以把文本的作用告訴瀏覽器，即對本地緩存中的資源文件進行具體設置。
同時真正運行離線web應用程序時，需要對服務器進行配置，讓服務器支持text/cache-manifest這個mime類型。

在指定文件源文件時可以把資源文件分為三類，CACHE、NETWORK、FALLBACK

代碼如下:

</p> <p>在CACHE類別中指定需要被緩存在本地的資源文件，為某個頁面指定需要本地緩存的資源文件時，不需要把這個頁面本身指定在CACHE類別中，
因為如果一個頁面具有manifest文件，瀏覽器會自動對該頁面進行本地緩存</p> <p>NETWORK類別為顯式指定不進行緩存的資源文件，這些文件只有建立服務器端鏈接才能訪問，本例使用通配符*表示沒有進行記錄的都不緩存</p> <p>FALLBACK類別中的每行中指定兩個資源文件，第一個資源文件為能夠在線訪問時使用的資源文件，第二個為不能在線訪問時使用的本地緩存文件

瀏覽器與服務器交互過程

當使用離線web應用程序進行工作時，有必要了解瀏覽器與服務器之間的交互過程：

代碼如下:

比如一個http://LuLingniu，以index.htm為主頁，該主頁使用index.manifest，
在文件中緩存index.htm，hello.js，hello.jpg，首次訪問時流程如下：
瀏覽器請求url
服務器返回index.htm首頁
瀏覽器解析index.htm網頁，請求頁面上所有資源文件
服務器返回資源文件
瀏覽器處理manifest文件，請求manifest中需要緩存的文件，即使請求過亦會再請求
服務器返回需要緩存的文件
瀏覽器對本地緩存進行更新，存入資源文件，并觸發一個事件通知本地緩存更新</p> <p>再次打開該URL
請求url
瀏覽器發現頁面被緩存，于是使用本地緩存文件
解析文件
瀏覽器像服務器請求manifest文件
服務器返回304，通知manifest文件沒有變化（若是改變將會有所不同）

applicationCache對象

該對象代表了本地緩存，可以用它來通知用戶本地緩存已經被更新，也允許手動更新本地緩存。

前面當瀏覽器對本地緩存做了更新裝入新資源文件時，會觸發applicationCache對象的updateready事件，通知本地緩存已被修改，然后提示用戶手動刷新頁面。
swapCache

swapCache方法用來手動執行本地緩存的更新，它只能在applicationCache對象的updateReady事件觸發時調用，

即當資源文件發生改變時，可使用此方法手工緩存更新。

看完上述內容，你們對HTML5 離線應用中怎樣打造零請求和無流量網站有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。