通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——html5脫機(jī)應(yīng)用技術(shù)及實(shí)例-wenkub
2022-11-19 20:20:40 本頁(yè)面
【正文】 ifest”文件的內(nèi)容而產(chǎn)生自動(dòng)觸發(fā)更新的效果。 為此，需要配置 Web 服務(wù)器設(shè)置一個(gè)靜態(tài)文件的 MIME 類型，或者必須編寫一些代碼來(lái)動(dòng)態(tài)創(chuàng)建該文件并設(shè)置 MIME 類型。 如果在頁(yè)面的 html標(biāo)簽內(nèi)不包含有 manifest 屬性，瀏覽器就不會(huì)緩存該頁(yè)面（除非該頁(yè)面已經(jīng)在“ Cache Manifest”清單文件中明確定義了）。只需要修改 頁(yè)面，并將頁(yè)面中的 html標(biāo)簽中 的“ manifest”屬性設(shè)置為對(duì)前面的“ ”文件名的引用。 （ 6）引用 清單文件 要啟用某個(gè)應(yīng)用的應(yīng)用緩存，請(qǐng)?jiān)谖臋n的 html 標(biāo)記中添加 manifest 屬性以引用 清單文件。 另外，其中的版本信息也并不是規(guī)范中的一部分。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 6/19 頁(yè) 6 在本示例的 中聲明了本示例中 3 個(gè)需要緩存的資源文件：“ ”、“ ”和“ ”。 }, 1000)。 （ 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。 （ 2）文件內(nèi)容示例 CACHE MANIFEST 上一行是必須書寫的。其后的每一行包含兩個(gè) URI 并由空格分隔，當(dāng)?shù)谝粋€(gè) URI 不可訪問時(shí)，瀏覽器將嘗試使用第二個(gè) URI。 該文件是一個(gè)文本類型的文件，文件沒有固定的命名規(guī)則，后綴名也沒有要求，唯一的要求就是需要把后綴名在服務(wù)器端以“ text/cachemanifest”的 MIME 類型定義出。 （ 3）本地?cái)?shù)據(jù)存儲(chǔ) 離線時(shí)，需要能夠把數(shù)據(jù)存儲(chǔ)到本地（客戶所在的計(jì)算機(jī)中），以便在線時(shí)同步到服務(wù)器上。 此后，當(dāng) Web 應(yīng)用在離線使用時(shí)，這些資源文件會(huì)自動(dòng)加載，從而使得 Web 應(yīng)用即使是處于離線狀態(tài)，但也能夠正常地被使用。 （ 3）使用 HTML5 離線緩存技術(shù)的主要優(yōu)點(diǎn) 1) 離線瀏覽：用戶可在離線時(shí)瀏覽您的完整網(wǎng)站 2) 速度：緩存資源為本地資源，因此加載速度較快。也就是瀏覽器會(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ù)器中。目前所有的主流的瀏覽器都有緩存機(jī)制，但它們?cè)趯?shí)際應(yīng)用中表現(xiàn)出很不可靠，也不一定總能起到預(yù)期的作用。 （ 1）脫機(jī)應(yīng)用程序 大多數(shù)瀏覽器在本地緩存中存儲(chǔ) Web 頁(yè)面，從而即使用戶脫機(jī)（離線）時(shí)也可以查看這些頁(yè)面。 這種機(jī)制不僅提高了瀏覽的速度，而且也有助于減少服務(wù)器的負(fù)載，因?yàn)殡x線應(yīng)用只加載被修改過的資源。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 3/19 頁(yè) 3 3) 服務(wù)器負(fù)載更少：瀏覽器只會(huì)從發(fā)生了更改的服務(wù)器下載資源。在 HTML5 中，主要通過在“ Cache Manifest”文件中指明需要緩存的資源文件名稱。為了滿足不同的存儲(chǔ)方式的需求， HTML5 提供了本地存儲(chǔ)（ Web Storage）和 Web SQL Database 兩種存儲(chǔ)機(jī)制。 （ 2）“ Cache Manifest”文件的 語(yǔ)法格式要求 1) 首行必須是 CACHE MANIFEST，它標(biāo)識(shí)這是 manifest 的配置文件； 2) 其后，每一行列出一個(gè)需要緩存的資源文件名，而且文件名是區(qū)分大小寫的； 3) 可根據(jù)應(yīng)用的需要列出在線訪問的白名單（也就是只能在網(wǎng)絡(luò)連接的狀態(tài)下才能使用的資源文件名單），但白名單中的所有資源不會(huì)被緩存，在使用時(shí)將直接在線訪問。 6) 注釋要另起一行，并以 號(hào)開頭。 images/ images/ NETWORK: 下面是另一些需要緩存的資源，在這個(gè)示例中只有一個(gè) css 文件。 } （ 4） 文件中的內(nèi)容 setTimeout(function () { (39。 當(dāng)用戶在離線狀態(tài)下訪問“ ”頁(yè)面文件時(shí)，頁(yè)面將無(wú)法正常地展現(xiàn)，因?yàn)樵擁?yè)面還需要另外兩個(gè)文件 —— 樣式單文件和 腳本程序文件。 （ 5） Cache Manifest 文件 示例的內(nèi)容 CACHE MANIFEST Version 這個(gè)文件列示了離線應(yīng)用 程序正常工作所需的所有文件，其中包括 HTML 文件、JavaScript、 CSS 和圖像。在本示例中，它其實(shí)只是 Cache Manifest 文件中的一個(gè)注釋。因?yàn)樵?Web 應(yīng)用中添加了“ Cache Manifest”文件 后，還需要向?yàn)g覽器提供一些信息。 這個(gè) manifest 的文件路徑可以使用絕對(duì)路徑或者相對(duì)路徑，當(dāng)然也可以引用其它的服務(wù)器上的 manifest 文件。 這就意味著用戶瀏覽的每個(gè) html標(biāo)簽內(nèi)包含有 manifest 屬性的網(wǎng)頁(yè)，瀏覽器都會(huì)隱式地添加到應(yīng)用的緩存中加以緩存。前者當(dāng)然是更有效的方法，但是有時(shí)也可能需要使用后一種方法，比如 Web 應(yīng)用的 系統(tǒng)管理人員沒有對(duì)服務(wù)器配置的控制權(quán)（比如在一個(gè)共享或托管環(huán)境中）。 比如，可以在“ Cache Manifest”文件添加注釋文件的版本或者修改其中的版本號(hào)達(dá)到“ Cache Manifest”文件被修改的效果。 ｝ 通過調(diào)用 ()函數(shù)使得瀏覽器開始嘗試更新的行為，但前提是“ Cache Manifest”文件是更新過的（比如前面所說(shuō)的修改版本號(hào)）。圖片不會(huì)重新加載，樣式和腳本也不會(huì)重新渲染或解析，唯一的變化是在此之后發(fā)出請(qǐng)求頁(yè)面的資源是最新的。 /** 請(qǐng)求 manifest 文件時(shí)返回 404 或 410 下載失敗或 manifest 文件在下載過程中源文件被修改會(huì)觸發(fā) error 事件 */ (39。不能正確地更新緩存！ 39。因此，可以在 updateready 事件中編寫代碼，實(shí)時(shí)監(jiān)測(cè)本地緩存是否完成更新的信息。 (39。, updateCurrentWebPage, false)。)) { ()。但在開發(fā)支持離線的 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 12/19 頁(yè) 12 Web 應(yīng)用時(shí)，就不能僅僅滿足于靜態(tài)頁(yè)面的展現(xiàn)，還必需考慮如何讓用戶在離線狀態(tài)下也可以操作數(shù)據(jù)。 HTML5 提供了兩種檢測(cè)是否在線的方式： 屬性和 online/offline 事件。 （ 2） online/offline 事件 當(dāng)開發(fā)離線應(yīng)用時(shí)，僅僅通過 屬性獲取網(wǎng)絡(luò)狀態(tài)通常是不夠的，否則開發(fā)者需要在狀態(tài)查詢的相關(guān)代碼中不斷地查詢網(wǎng)絡(luò)的當(dāng)前連接狀態(tài)，處于被動(dòng)狀態(tài)。
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1