通過(guò)代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5脫機(jī)應(yīng)用技術(shù)及實(shí)例-展示頁(yè)
2024-11-20 20:20本頁(yè)面
【正文】 。為了滿足不同的存儲(chǔ)方式的需求， HTML5 提供了本地存儲(chǔ)（ Web Storage）和 Web SQL Database 兩種存儲(chǔ)機(jī)制。在 HTML5 中，提供了兩種檢測(cè)當(dāng)前網(wǎng)絡(luò)是否在線的方式。在 HTML5 中，主要通過(guò)在“ Cache Manifest”文件中指明需要緩存的資源文件名稱。為此，需要告訴瀏覽器緩存哪些資源文件，瀏覽器才能在處于在線狀態(tài)時(shí)，把這些相關(guān)的資源文件緩存到本地。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 3/19 頁(yè) 3 3) 服務(wù)器負(fù)載更少：瀏覽器只會(huì)從發(fā)生了更改的服務(wù)器下載資源。 另外， HTML5 中所提供的離線資源緩存與瀏覽器中常規(guī)的緩存機(jī)制是完全不同的，瀏覽器中常規(guī)的緩存機(jī)制通常只緩存那些已被以前訪問(wèn)過(guò)的網(wǎng)頁(yè)和資源，而 HTML5 中所提供的離線資源緩存不僅允許開發(fā)人員指定所要緩存的頁(yè)面和資源文件，也可以緩存那些從未訪問(wèn)過(guò)的資源文件。 這種機(jī)制不僅提高了瀏覽的速度，而且也有助于減少服務(wù)器的負(fù)載，因?yàn)殡x線應(yīng)用只加載被修改過(guò)的資源。 而 HTML5 提供了脫機(jī)應(yīng)用程序方面的支持 —— 也稱應(yīng)用緩存（ Application Cache）接口，從而實(shí)現(xiàn)將 Web 應(yīng)用中的相關(guān)文件離線存儲(chǔ)。 （ 1）脫機(jī)應(yīng)用程序 大多數(shù)瀏覽器在本地緩存中存儲(chǔ) Web 頁(yè)面，從而即使用戶脫機(jī)（離線）時(shí)也可以查看這些頁(yè)面。楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 1/19 頁(yè) 1 目錄 跟我學(xué) Html5 相關(guān)技術(shù) —— HTML5 脫機(jī)應(yīng)用技術(shù)及實(shí)例 ................................. 2 HTML5 脫機(jī)（離線， Offline Storage）概述 .................................................. 2 Cache Manifest 文件及資源緩存示例 ............................................................... 4 離線應(yīng)用示例 .................................................................................................... 12 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 2/19 頁(yè) 2 跟我學(xué) Html5 相關(guān)技術(shù) —— HTML5 脫機(jī)應(yīng)用技術(shù)及實(shí)例 HTML5 脫機(jī)（離線， Offline Storage） 概述 HTML5 提供了脫機(jī)應(yīng)用程序方面的支持 所謂的“脫機(jī)應(yīng)用程序”也稱為“可離線訪問(wèn) 程序”或者“可離線瀏覽的程序”，離線訪問(wèn)對(duì)基于網(wǎng)絡(luò)的應(yīng)用而言越來(lái)越重要。目前所有的主流的瀏覽器都有緩存機(jī)制，但它們?cè)趯?shí)際應(yīng)用中表現(xiàn)出很不可靠，也不一定總能起到預(yù)期的作用。這對(duì)于靜態(tài)頁(yè)面非常好，但是無(wú)法應(yīng)用于數(shù)據(jù)庫(kù)驅(qū)動(dòng)的動(dòng)態(tài)內(nèi)容。也就是瀏覽器會(huì)下載脫機(jī)使用 應(yīng)用程序時(shí)所需要的所有文件，當(dāng)該 Web 應(yīng)用程序處于脫機(jī)使用狀況時(shí)，瀏覽器可以允許在脫機(jī)使用狀況時(shí)進(jìn)行數(shù)據(jù)的修改，但在 Web 應(yīng)用重新連接到服務(wù)器時(shí)將自動(dòng)地上傳數(shù)據(jù)到服務(wù)器中。 （ 2） HTML5 是如何實(shí)現(xiàn)對(duì)脫機(jī)應(yīng)用程序的支持 在 HTML5 中，主要是通過(guò)在“ Cache Manifest”文件中指明需要緩存的資源文件名稱—— 如果該文件不存在，整個(gè)緩存效果就無(wú)法實(shí)現(xiàn)，頁(yè)面也不能實(shí)現(xiàn)離線緩存；而且支持自動(dòng)和手動(dòng)兩種緩存更新 方式。 （ 3）使用 HTML5 離線緩存技術(shù)的主要優(yōu)點(diǎn) 1) 離線瀏覽：用戶可在離線時(shí)瀏覽您的完整網(wǎng)站 2) 速度：緩存資源為本地資源，因此加載速度較快。 開發(fā)支持離線的 Web 應(yīng)用程序所需要考慮的三 個(gè)問(wèn)題 （ 1）離線資源緩存（也稱為 AppCache） 為了保證 Web 應(yīng)用在離線狀況下也能夠正常地應(yīng)用，首先需要緩存在離線狀況下所需要的所有資源文件。 此后，當(dāng) Web 應(yīng)用在離線使用時(shí)，這些資源文件會(huì)自動(dòng)加載，從而使得 Web 應(yīng)用即使是處于離線狀態(tài)，但也能夠正常地被使用。 （ 2）在線狀態(tài)檢測(cè) Web 應(yīng)用系統(tǒng)需要知道瀏覽器目前 是否在線，這樣才能夠區(qū)分當(dāng)前是否處于在線或離線狀況，并分別做出對(duì)應(yīng)的處理。 （ 3）本地?cái)?shù)據(jù)存儲(chǔ) 離線時(shí)，需要能夠把數(shù)據(jù)存儲(chǔ)到本地（客戶所在的計(jì)算機(jī)中），以便在線時(shí)同步到服務(wù)器上。本地存儲(chǔ)主要提供以“ key/value”鍵值對(duì)的存儲(chǔ)方式存儲(chǔ)數(shù)據(jù)，而 Web SQL Database 則提供了對(duì)基本的關(guān)系數(shù)據(jù)庫(kù)的存儲(chǔ)功能的支持 。 該文件是一個(gè)文本類型的文件，文件沒(méi)有固定的命名規(guī)則，后綴名也沒(méi)有要求，唯一的要求就是需要把后綴名在服務(wù)器端以“ text/cachemanifest”的 MIME 類型定義出。聲明白名單使用 NETWORK：標(biāo)識(shí)符，用于指定不需要被緩存的各個(gè)資源文楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 4/19 頁(yè) 4 件 —— 它們必須要在連機(jī)狀態(tài)下從服務(wù)器端獲得，而不適用于離線狀態(tài)下被訪問(wèn)； 4) 如果在白名單后還要補(bǔ)充需要緩存的資源，可以使用 CACHE：標(biāo)識(shí)符；在所聲明的 CACHE 后面可以羅列出系統(tǒng)中需要離線緩存的各個(gè)資源文件。其后的每一行包含兩個(gè) URI 并由空格分隔，當(dāng)?shù)谝粋€(gè) URI 不可訪問(wèn)時(shí)，瀏覽器將嘗試使用第二個(gè) URI。 （ 3）“ Cache Manifest”文件中所有的資源文件的 URLs 都是相對(duì)的 任何 相對(duì) URLs 地址必須是相對(duì)于緩存清單文件“ Cache Manifest”文件，而緩存清單文件“ Cache Manifest”一般都位于 Web 應(yīng)用程序所在的根目錄中。 （ 2）文件內(nèi)容示例 CACHE MANIFEST 上一行是必須書寫的。 CACHE: style/ FALLBACK: /files/projects / （ 3）所應(yīng)該要注意的問(wèn)題 在“ Cache Manifest”文件 的 CACHE、 FALLBACK 和 NETWORK 等標(biāo)志是沒(méi)有先后順序的，而且在同一個(gè)“ Cache Manifest”文件中可以多次出現(xiàn) 。 （ 2） 頁(yè)面文件中的內(nèi)容 !DOCTYPE HTML html head titleClock/title link rel=stylesheet href= /head body pThe time is: output id=clock/output/p /body /html （ 3） 樣式單文件中的內(nèi)容 output{ font:2em sansserif。clock39。 }, 1000)。 為了能夠使得該 Web 應(yīng)用在離線狀況下也能夠被訪問(wèn)，開發(fā)者必須在 Web 應(yīng)用中創(chuàng)建一個(gè)“ Ca
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1