HTML5 Aplikasyon Cache

Ginagamit ang aplikasyon cache, sa pamamagitan ng paglikha ng cache manifest file, ang web application ay maaaring madaling gawing offline version.

Ano ang aplikasyon cache?

Ang HTML5 ay naglagay ng aplikasyon cache (Application Cache), ibig sabihin, maaaring mapagkakaroon ang web application at maaaring aksesahan kahit walang koneksyon sa internet.

Ang mga cache ng aplikasyon ay nagbibigay ng tatlong kalakip sa ang aplikasyon:

  1. Pagbasa ng offline - ang mga user ay maaaring gamitin ang mga ito kahit ang aplikasyon ay offline
  2. Kabilis ang pagkakarga - ang nakakahandang mga resursong pinagkakaroon ay maaaring magkakarga mas mabilis
  3. Mamamili ang laki ng server - ang browser ay magsusubukan lamang ang mga pinagkakaroon na o nagbabago ng mga resursong mula sa server

Suporta ng Browser

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

API
Application Cache 4.0 10.0 3.5 4.0 11.5

Halimbawa ng HTML Cache Manifest

Ang sumusunod na halimbawa ay nagpapakita ng HTML dokumento na may cache manifest (para sa pagbasa sa offline):

Halimbawa

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
Kontento ng dokumento ......
</body>
</html>

Subukan ang sarili

Mga Batayan ng Cache Manifest

Para mapilitin ang application cache, ilagay ang attribute ng manifest sa tag ng <html> ng dokumento:

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

Ang bawat pahina na may nakatalagang manifest ay magiging nakakache kapag pinag-aalok ng user. Kung hindi nakatalaga ang attribute ng manifest, ang pahina ay hindi magiging nakakache (maliban kung direktang nakatalaga ang pahina sa manifest file).

Ang rekomendadong ekstensyon ng file na manifest ay: ".appcache".

Babala:Ang manifest file ay kailangang may tama na MIME-type, na "text/cache-manifest". Dapat ito ay nakonfigurasyon sa web server.

Manifest File

Ang manifest file ay simpleng teks file, na nagbibigay alam sa browser kung anong nilalagay sa cache (at kung anong hindi)

Ang manifest file ay may tatlong bahagi:

  • CACHE MANIFEST - Ang mga file na nangalagay sa ilalim ng nasabing titik ay gagawing cache pagkatapos ng unang pagdownload
  • NETWORK - Ang mga file na nangalagay sa ilalim ng nasabing titik ay kailangan ng koneksyon sa server at hindi naaakalang sa cache
  • FALLBACK - Ang mga file na nangalagay sa ilalim ng nasabing titik ay nangangahulugan na pinalitan na pahina kapag ang pahina ay hindi magagamit (halimbawa, 404 pahina)

CACHE MANIFEST

Ang unang linya, CACHE MANIFEST, ay kinakailangan:

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 inilalagay, ang browser ay maglulagay ng tatlong file mula sa pangunahing direktoryo ng website. Pagkatapos, kahit na ang user ay nawalan ng koneksyon sa internet, ang mga ressource na ito ay magiging magagamit pa rin.

NETWORK

Ang NETWORK na bahagi ng patakaran ay naglalarawan na ang file na "login.php" ay hindi naaakalang na sa cache, at hindi magagamit kapag offline:

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）。