HTML5 Application Cache

Sa pamamagitan ng paggamit ng cache ng aplikasyon, maaring madaling gumawa ng offline version ng web application sa pamamagitan ng paglikha ng file na manifest ng cache.

Ano ang cache ng aplikasyon?

Ang HTML5 ay naglagay ng cache ng aplikasyon (Application Cache), na nangangahulugan na ang web application ay magiging cache at maaaring ma-access kahit walang koneksyon sa internet.

Ang mga cache ng aplikasyon ay magbibigay ng tatlong pangungusap sa aplikasyon:

  1. Paggamit ng offline - ang mga user ay makakagamit ng mga ito kahit na ang aplikasyon ay offline
  2. Mas mabilis ang bilis - ang mga nakahanda na pinagkukunan ay magiging load ng mas mabilis
  3. Mabawasan ang laki ng serbisyong pangkompyuter - ang mga browser ay magiging download lamang ng mga pinagkukunan na nabagong o nabago

Browser Support

Ang mga numero sa talahanayan ay nagsasabi ng unang bersyon ng browser na ganap na sumusuporta sa application cache.

API
Application Cache 4.0 10.0 3.5 4.0 11.5

HTML Cache Manifest Example

Ang sumusunod ay nagpapakita ng HTML document na may cache manifest (para sa offline browsing):

Example

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
Content of the document ...
</body>
</html>

Try It Yourself

Basic Cache Manifest

Para ma-enable ang application cache, ilagay ang attribute na manifest sa tag na <html> ng dokumento:

!DOCTYPE HTML
<html manifest="demo.appcache">
...
</html>

Ang bawat pahina na may manifest ay magiging cache kapag tinanggap ng user. Kung hindi ito ay tinukoy, ang pahina ay hindi magiging cache (maliban kung ito ay tinukoy sa manifest file).

Ang rekomendadong extension ng file para sa manifest file ay ".appcache".

Babala:Kailangan na mag-set ng tamang MIME-type para sa manifest file, na "text/cache-manifest". Dapat itong nakonfigure sa web server.

Manifest File

Ang manifest file ay simpleng teks file, na nagsasabi kung anong nilalagay sa cache at kung anong hindi magiging cache ng browser.

Ang manifest file ay may tatlong bahagi:

  • CACHE MANIFEST - Ang mga file na nilista sa itaas ay magiging cache pagkatapos ng unang pagdownload
  • NETWORK - Ang mga file na nilista sa itaas ay nangangailangan ng koneksyon sa server at hindi magiging cache
  • FALLBACK - Ang mga file na nilista sa itaas ay nagsasabing pangalawang pahina kapag ang pahina ay hindi makakakuha (halimbawa, 404 pahina)

CACHE MANIFEST

Ang unang linya, CACHE MANIFEST, ay dapat sanayin:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

Ang manifest file na ito ay naglilista ng tatlong ressource: isang CSS file, isang GIF image, at isang JavaScript file. Kapag ang manifest file ay na-load, ang browser ay magda-download ng tatlong file mula sa pangunahing direktoryo ng website. Pagkatapos, ang mga ressource na ito ay magiging magagamit kahit na ang user ay nawalan ng koneksyon sa internet.

NETWORK

Ang PART SA NETWORK ay nagsasabing ang file na "login.php" ay hindi kailanman magiging cache at hindi makakakuha kahit anong oras na wala ng internet:

NETWORK:
login.asp

可以使用星号来指示所有其他资源/文件都需要因特网连接：

NETWORK:
*
FALLBACK

下面的 FALLBACK 部分规定如果无法建立因特网连接，则用 "offline.html" 替代 /html/ 目录中的所有文件：

FALLBACK:
/html/ /offline.html

注释：第一个 URI 是资源，第二个是替补。

更新缓存

一旦应用被缓存，它就会保持缓存直到发生下列情况：

  • 用户清空浏览器缓存
  • manifest 文件被修改（参阅下面的提示）
  • 由程序来更新应用缓存

实例 - 完整的 Cache Manifest 文件

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

提示：以 "#" 开头的是注释行，但也可满足其他用途。应用的缓存只会在其 manifest 文件改变时被更新。如果您编辑了一幅图像，或者修改了一个 JavaScript 函数，这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

关于应用程序缓存的注意事项

请留心缓存的内容。

一旦文件被缓存，则浏览器会继续展示已缓存的版本，即使您修改了服务器上的文件。为了确保浏览器更新缓存，您需要更新 manifest 文件。

注释：浏览器对缓存数据的容量限制可能不太一样（某些浏览器的限制是每个站点 5MB）。