Cache aplikasi HTML5

Apakah itu Cache Aplikasi?

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

Caching aplikasi membawa tiga kelebihan kepada apl:

1. Penyemakan imbas luar talian - pengguna boleh menggunakan apl apabila mereka berada di luar talian

2. Kelajuan - pemuatan sumber dicache Dapatkan lebih pantas

3. Kurangkan beban pelayan - penyemak imbas hanya akan memuat turun sumber yang dikemas kini atau ditukar daripada pelayan.

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

Sokongan penyemak imbas

Caching 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):

<!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="http://img.taopic.com/uploads/allimg/130512/240477-130512133S924.jpg" width="336" height="69"></p>
<p>尝试打开 <a href="" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面，页面也可以访问。</p>
</body>
</html>

Asas Manifes Cache

Untuk mendayakan cache aplikasi, sertakan 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, "text/cache-manifest". Mesti dikonfigurasikan pada pelayan web.

Fail manifes

Fail manifes ialah fail teks ringkas yang memberitahu penyemak imbas apa yang dicache (dan apa yang bukan) kandungan) .

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 memerlukan sambungan ke halaman Fallback apabila tidak boleh diakses (seperti halaman 404)

MANIFEST CACHE

Barisan pertama, CACHE MANIFEST, diperlukan:

CACHE MANIFEST
/theme.css
/gif
/logo .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 menyatakan 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 Jika sambungan Internet tidak dapat diwujudkan, gantikan semua fail dalam direktori /html5/ dengan "offline.html":

FALLBACK:
/html/ /offline.html

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

Kemas kini cache

Setelah apl dicache, ia akan kekal dicache sehingga:

Pengguna mengosongkan cache penyemak imbas
fail manifes diubah suai (lihat petua di bawah)
Kemas kini cache aplikasi mengikut program

Contoh - fail Manifes lengkap

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

RANGKAIAN:
login.php

FALLBACK:
/html/ /offline.html

Petua : Baris yang bermula dengan "#" adalah baris ulasan, tetapi 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).

Meneruskan pembelajaran

fail baharu

<!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="http://img.taopic.com/uploads/allimg/130512/240477-130512133S924.jpg" width="336" height="69"></p> <p>尝试打开 <a href="" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面，页面也可以访问。</p> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik