通過代碼示例跟我學html5相關技術——html5脫機應用技術及實例-文庫吧
2024-10-19 20:20 本頁面
【正文】 Cache Manifest 文件 及 資源緩存示例 “ Cache Manifest”文件的一個應用示例 （ 1）“ Cache Manifest”文本文件的主要作用 為了能夠讓用戶在離線狀態(tài)下繼續(xù)訪問 Web 應用，開發(fā)者需要提供一個“ Cache Manifest”的文本文件，在該文件中列出所有需要在離線狀態(tài)下使用的資源文件清單，瀏覽器會把這些 資源文件緩存到本地。 （ 2）文件內(nèi)容示例 CACHE MANIFEST 上一行是必須書寫的。 images/ images/ NETWORK: 下面是另一些需要緩存的資源，在這個示例中只有一個 css 文件。 CACHE: style/ FALLBACK: /files/projects / （ 3）所應該要注意的問題 在“ Cache Manifest”文件 的 CACHE、 FALLBACK 和 NETWORK 等標志是沒有先后順序的，而且在同一個“ Cache Manifest”文件中可以多次出現(xiàn) 。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 5/19 頁 5 離線資源緩存的相關實現(xiàn)技術及示例 （ 1）離線資源緩存的示例文件說明 下面為 W3C 本身所提供的示例 Clock Web 應用，該 Web 應用主要是由三個文件“ ”、“ ”和“ ”所組成。 （ 2） 頁面文件中的內(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。 } （ 4） 文件中的內(nèi)容 setTimeout(function () { (39。clock39。).value = new Date()。 }, 1000)。 當用戶在離線狀態(tài)下訪問“ ”頁面文件時，頁面將無法正常地展現(xiàn)，因為該頁面還需要另外兩個文件 —— 樣式單文件和 腳本程序文件。 為了能夠使得該 Web 應用在離線狀況下也能夠被訪問，開發(fā)者必須在 Web 應用中創(chuàng)建一個“ Cache Manifest”文件，在該文件中指明需要緩存的資源文件名稱。本示例中的“ Cache Manifest”文件為“ ”，擴展名為 *.manifest，這個擴展名可以任意選擇，但需要在服務器端的相關文件如 中定義。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 6/19 頁 6 在本示例的 中聲明了本示例中 3 個需要緩存的資源文件：“ ”、“ ”和“ ”。 （ 5） Cache Manifest 文件 示例的內(nèi)容 CACHE MANIFEST Version 這個文件列示了離線應用 程序正常工作所需的所有文件，其中包括 HTML 文件、JavaScript、 CSS 和圖像。當然，它還可以包括視頻、 PDFs、 XML 文件等。只要列示在清單中，所有這些文件都將被瀏覽器緩存并可在離線模式中使用。 另外，其中的版本信息也并不是規(guī)范中的一部分。在本示例中，它其實只是 Cache Manifest 文件中的一個注釋。但是，擁有這樣的信息很關鍵，因為可以使用該信息來告知瀏覽器您的應用程序有一個新版本。因此，可以通過這個注釋，一方面修改版本號，另一方面讓瀏覽器更新緩存。 （ 6）引用 清單文件 要啟用某個應用的應用緩存，請在文檔的 html 標記中添加 manifest 屬性以引用 清單文件。因為在 Web 應用中添加了“ Cache Manifest”文件 后，還需要向瀏覽器提供一些信息。 Web 瀏覽器需要知道是否啟用緩存以及到哪里去找到緩存清單文件。 因此，需要修改 頁面中的相關標簽的屬性定義實現(xiàn)將 文件鏈接到 HTML 文檔中。只需要修改 頁面，并將頁面中的 html標簽中 的“ manifest”屬性設置為對前面的“ ”文件名的引用。 這個 manifest 的文件路徑可以使用絕對路徑或者相對路徑，當然也可以引用其它的服務器上的 manifest 文件。修改后的 頁面的標簽代碼如下： !DOCTYPE HTML html manifest= head titleClock/title 也可以指定相對的文件目錄 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權所有，盜版必究 ， 7/19 頁 7 link rel=stylesheet href= /head body pThe time is: output id=clock/output/p /body /html 當用戶在線訪問“ ”時，瀏覽器會緩存“ ”頁面本身以及與它相關的其它資源文件 —— “ ”和“ ”等文件；而當用戶離線訪問時，這個 Web 應用也同樣可以正常使用了。 注意： 需要在 Web 應用中所有要緩存訪問的每個頁面的 html標簽內(nèi)都要添加 manifest 屬性，并指定相關的“ Cache Manifest”文件名稱 —— 因此，如果 Web 系統(tǒng)中有多個不同的Web 頁面需要緩存，則要在每個頁面中設計對應的“ Cache Manifest”文件。 如果在頁面的 html標簽內(nèi)不包含有 manifest 屬性，瀏覽器就不會緩存該頁面（除非該頁面已經(jīng)在“ Cache Manifest”清單文件中明確定義了）。 這就意味著用戶瀏覽的每個 html標簽內(nèi)包含有 manifest 屬性的網(wǎng)頁，瀏覽器都會隱式地添加到應用的緩存中加以緩存。因此，開發(fā)人員無需再在“ Cache Manifest”清單文件中羅列定義出這些 Web 頁面文件本身。 （ 7）在 Web 服務器端配置檢查緩存清單的 MIME 類型 根據(jù) HTML5 的緩存清單規(guī)范規(guī)定，瀏覽器在下載和處理緩存清單文件時必須要執(zhí)行一個額外的驗 證步驟， 即檢查緩 存清單 的 MIME 類 型，該 MIME 類 型必須為 text/cachemanifest。 為此，需要配置 Web 服務器設置一個靜態(tài)文件的 MIME 類型，或者必須編寫一些代碼來動態(tài)創(chuàng)建該文件并設置 MIME 類型。前者當然是更有效的方法，但是有時也可能需要使用后一種方法，比如 Web 應用的 系統(tǒng)管理人員沒有對服務器配置的控制權（比如在一個共享或托管環(huán)境中）。 如果系統(tǒng)管理人員對服務器擁有控制權且正在使用一個 J2EE 應用程序服務器，只需要在 Web 應用程序的 文件中配置這個 MIME 類型參數(shù)。 ?xml version= encoding=utf8? webapp xmlns:xsi=
教學課件相關推薦
鄂ICP備17016276號-1