2012年11月24日 星期六

HTML5 : CACHE MANIFEST 離線使用與快取

2012年11月24日 星期六
支援 HTML5 的瀏覽器可以幫我們把程式執行所需的相關檔案預先下載並儲存，這樣，在沒有連網路時，依然可以使用。瀏覽器怎麼知道哪些檔案要離線使用，而哪些檔案是一定要連線使用？當然是由我們在 HTML5 的網頁中指定一個清單檔，瀏覽器再根據檔案的內容來決定哪些東西要「預載備用」。秘密就在 HTML tag 的語法中：

  • <html manifest="cache.manifest">

上面的例子，「html」 後多了「manifest="cache.manifest"」，它告訴瀏覽器：先下載設定檔「cache.manifest」，然後依照裡面的清單下載到「快取」中，或不要儲存到「快取」中。不過，這個檔案能不能有作用，還要看網頁主機有沒有送出合適的資料，讓瀏覽器能「認得」。以 Apache Server 來說，必須在設定檔中加入底下這行：

  • AddType text/cache-manifest .manifest

如果剛加完，記得要重新啟動 Apache 的服務，讓它生效。這樣，以後如果瀏覽器收到檔名結尾是「.manifest」的檔案，就知道它是快取的設定檔(cache-manifest)。

假設範例設定檔 cache.manifest 中的內容如下：

CACHE MANIFEST

# Updated on: 2012-11-24 21:44:18

basketball.js
basketball_set.js
basketball_menu_set.js
assets/basketball.png

NETWORK:
*
上面幾個重要的關鍵如下：

  • 「CACHE MANIFEST」 以下的幾行是要瀏覽器保留在「快取」中的檔案清單。
  • 「NETWORK:」以下的清單則是一定要使用時要由網路連線的檔案。它的路徑如果是使用相對路徑，是相對於載入 .mainifest 的網頁 (MASTER)。
  • 「# Updated on:」後面接的則是這個檔案更新的時間，如果檔案有異動，就修改一下這串時間，讓它比之前的時間更新即可。

理論上，我們只要把要離線使用的檔案清單，通通加到「CACHE MANIFEST」和「NETWORK:」之間即可。不過，檔案能不能被快取則要視瀏覽器而有所不同，以 iOS 上 (我的 iPad 用的 4.3.3) 的 Safari 來說，影片、聲音檔是無法被快取的，即使我們加了也沒有用。

另外，我在 Chrome 上遇到一個很奇怪的問題，雖然改了「# Updated on:」後的時間，它不會重新下載快取中的相關檔案，即使利用「進階設定」中的「清除瀏覽資料」把 Chrome 的快取清除，依然不動如山。最後是在網址列中輸入底下的網址：


 出現 manifest 的清單後，找到不乖的那筆後按「remove」清除該 .manifest 檔案後，所有該重新下載的檔案才更新。


相關文章




By at
標籤:

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)
 
雄::gsyan © 2009. Design by Pocket