Caching aplikasi HTML5

Menggunakan HTML5, anda boleh membuat versi luar talian aplikasi web anda dengan mudah dengan mencipta fail manifes cache.

Apakah itu Cache Aplikasi?

HTML5 memperkenalkan caching aplikasi, yang bermaksud aplikasi web boleh dicache dan diakses tanpa sambungan Internet.

Cache aplikasi membawa tiga kelebihan kepada apl:

Menyemak imbas luar talian - pengguna boleh menggunakannya apabila apl di luar talian
Kelajuan - Sumber yang dicache dimuatkan dengan lebih pantas
Muatan pelayan dikurangkan - penyemak imbas hanya akan memuat turun sumber yang dikemas kini atau diubah daripada pelayan.

Sokongan Penyemak Imbas

Pencache aplikasi sokongan Internet Explorer 10, Firefox, Chrome, Safari dan Opera.

Contoh Manifes Cache HTML5

Contoh berikut menunjukkan dokumen HTML dengan manifes cache (untuk penyemakan imbas luar talian):

Contoh

<!DOCTYPE html>
<html manifest="demo_html.appcache">
<head> 
<meta charset="UTF-8">
<title>php中文网(php.cn)</title> 
</head>
<body>
<script src="demo_time.js">
</script>
<p id="timePara"><button onclick="getDateTime()">获取日期和时间</button></p>
<p><img src="logo.png" width="336" height="69"></p>
<p>尝试打开 <a href="#" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面，页面也可以访问。</p>
</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Asas Manifes Cache

Untuk mendayakan cache aplikasi, masukkan atribut manifes dalam teg <html> dokumen:

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

Setiap halaman dengan manifes tertentu akan dicache apabila pengguna mengaksesnya. Jika atribut manifes tidak ditentukan, halaman itu tidak akan dicache (melainkan ia dinyatakan secara langsung dalam fail manifes).

Sambungan fail yang disyorkan untuk fail manifes ialah: ".appcache".

Sila ambil perhatian bahawa fail manifes perlu dikonfigurasikan dengan jenis MIME yang betul, iaitu "teks/manifes cache". Mesti dikonfigurasikan pada pelayan web.

Fail Manifes

Fail Manifes ialah fail teks ringkas yang memberitahu penyemak imbas perkara yang dicache (dan perkara yang tidak dicache).

Fail manifes boleh dibahagikan kepada tiga bahagian:

MANIFEST CACHE - Fail yang disenaraikan di bawah tajuk ini akan dicache selepas muat turun pertama
RANGKAIAN - Fail yang disenaraikan di bawah tajuk ini memerlukan sambungan ke pelayan dan tidak akan dicache
FALLBACK - Fail yang disenaraikan di bawah tajuk ini menentukan halaman sandaran apabila halaman itu tidak boleh diakses (seperti halaman 404)

MANIFEST CACHE

Baris pertama, MANIFEST CACHE, diperlukan:

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

Fail manifes di atas menyenaraikan tiga sumber: fail CSS, imej GIF dan fail JavaScript. Apabila fail manifes dimuatkan, penyemak imbas memuat turun ketiga-tiga fail ini daripada direktori akar tapak web. Kemudian, apabila pengguna memutuskan sambungan daripada Internet, sumber ini masih tersedia.

RANGKAIAN

Bahagian RANGKAIAN berikut menentukan bahawa fail "login.php" tidak akan dicache dan tidak tersedia di luar talian:

RANGKAIAN:
login.php

Asterisk boleh digunakan untuk menunjukkan bahawa semua sumber/fail lain memerlukan sambungan Internet:

RANGKAIAN:
*

FALLBACK

Subseksyen FALLBACK berikut menyatakan bahawa jika sambungan Internet tidak dapat diwujudkan, semua fail dalam direktori /html5/ digantikan dengan "offline.html":

FALLBACK:
/html/ /offline.html

Nota: URI pertama ialah sumber, yang kedua ialah sandaran.

Kemas kini Cache

Setelah apl dicache, ia kekal dicache sehingga:

Pengguna mengosongkan cache penyemak imbas
Fail manifes diubah suai (lihat petua di bawah)
Cache aplikasi dikemas kini oleh program

Contoh - Fail Manifes lengkap

MANIFEST CACHE
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/js

RANGKAIAN:
log masuk.php

FALLBACK:
/html/ /offline.html

Remark Petua: Baris yang bermula dengan "#" ialah baris ulasan, tetapi ia juga boleh digunakan untuk tujuan lain. Cache aplikasi dikemas kini apabila fail manifesnya berubah. Jika anda mengedit imej, atau mengubah suai fungsi JavaScript, perubahan ini tidak akan dicache semula. Mengemas kini tarikh dan nombor versi dalam baris ulasan ialah satu cara untuk menyebabkan penyemak imbas meng-cache semula fail.

Nota tentang caching aplikasi

Sila beri perhatian kepada kandungan cache.

Setelah fail dicache, penyemak imbas akan terus memaparkan versi cache, walaupun anda mengubah suai fail pada pelayan. Untuk memastikan penyemak imbas mengemas kini cachenya, anda perlu mengemas kini fail manifes anda.

Nota: Penyemak imbas mungkin mempunyai had kapasiti yang berbeza untuk data cache (sesetengah penyemak imbas menetapkan had 5MB setiap tapak).