2012年11月24日 星期六

HTML5 : CACHE MANIFEST 離線使用與快取

支援 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 檔案後,所有該重新下載的檔案才更新。


相關文章




沒有留言:

張貼留言

 
© 2009. Design by Pocket