HTML5 menggunakan antara muka ApplicationCache untuk melaksanakan teknologi caching luar talian untuk menyelesaikan masalah luar talian_html5 kemahiran tutorial

Pengenalan
Akses luar talian semakin penting untuk aplikasi berasaskan web. Walaupun semua penyemak imbas mempunyai mekanisme caching, ia tidak boleh dipercayai dan mungkin tidak selalu berfungsi seperti yang diharapkan. HTML5 menggunakan antara muka ApplicationCache untuk menyelesaikan beberapa masalah yang disebabkan oleh luar talian.
Menggunakan antara muka cache membawa tiga kelebihan berikut kepada aplikasi anda:
Menyemak imbas luar talian – pengguna boleh menyemak imbas tapak web lengkap anda semasa di luar talian
Kelajuan ​​- sumber cache adalah sumber tempatan, jadi kelajuan memuatkan lebih cepat.
Kurang beban pelayan – penyemak imbas hanya akan memuat turun sumber daripada pelayan yang telah berubah.

Cache Aplikasi (juga dikenali sebagai AppCache) membenarkan pembangun untuk menentukan fail mana yang harus dicache oleh penyemak imbas untuk pengguna luar talian. Walaupun pengguna menekan butang muat semula semasa di luar talian, apl anda akan dimuatkan dan berjalan seperti biasa.
Fail manifes cache
Fail manifes cache ialah fail teks ringkas yang menyenaraikan sumber yang perlu dicache oleh penyemak imbas untuk akses luar talian.
Rujuk fail manifes
Untuk mendayakan cache aplikasi bagi aplikasi, tambahkan atribut manifes pada teg html dokumen:

Salin kod

Kodnya adalah seperti berikut:

...
🎜>

Anda harus menambahkan atribut manifes pada setiap halaman aplikasi web anda yang ingin anda cache. Jika halaman web tidak mengandungi atribut manifes, penyemak imbas tidak akan cache halaman tersebut (melainkan atribut itu disenaraikan secara eksplisit dalam fail manifes). Ini bermakna setiap halaman web yang dilayari pengguna yang mengandungi manifes akan ditambahkan secara tersirat pada cache aplikasi. Oleh itu, anda tidak perlu menyenaraikan setiap halaman dalam inventori anda.
Atribut manifes boleh menunjuk ke URL mutlak atau laluan relatif, tetapi URL mutlak mesti mempunyai asal yang sama dengan aplikasi web yang sepadan. Fail manifes boleh menggunakan sebarang sambungan fail, tetapi mesti disampaikan dengan jenis MIME yang betul (lihat di bawah).

Salin kodKod tersebut adalah seperti berikut:

...



Fail manifes mesti disediakan sebagai jenis MIME teks/manifes cache. Anda mungkin perlu menambah jenis fail tersuai pada pelayan web anda atau konfigurasi .htaccess.
Sebagai contoh, untuk menyediakan jenis MIME ini dalam Apache, tambahkan baris berikut pada fail konfigurasi anda:
AddType text/cache-manifest .appcache Untuk menyediakan ini dalam fail app.yaml Google App Engine jenis MIME, tambahkan berikut:
- url: /mystaticdir/(.*.appcache)
static_files: mystaticdir/1
mime_type: text/cache-manifest
upload: mystaticdir/(. *.appcache) fail manifes struktur
Format manifes mudah adalah seperti berikut:
MANIFEST CACHE
index.html
stylesheet.css
images/logo.png
scripts/main.js Contoh akan cache empat fail pada halaman web yang menentukan fail manifes ini.
Anda perlu memberi perhatian kepada perkara berikut:
Rentetan CACHE MANIFEST hendaklah berada pada baris pertama dan diperlukan.
Saiz data cache tapak web mestilah tidak melebihi 5 MB. Walau bagaimanapun, jika anda menulis apl untuk Kedai Web Chrome, anda boleh menggunakan unlimitedStorage untuk mengalih keluar sekatan ini.
Jika fail manifes atau sumber yang dinyatakan di dalamnya tidak boleh dimuat turun, keseluruhan proses kemas kini cache tidak akan diteruskan. Dalam kes ini, penyemak imbas akan terus menggunakan cache aplikasi asal.
Mari kita lihat contoh yang lebih kompleks:
MANIFEST CACHE
# 2010-06-18:v2
# 'Entri induk' dicache secara eksplisit
CACHE:
/favicon.ico
index.html
stylesheet.css
imej/logo.png
skrip/main.js
# Sumber yang memerlukan pengguna berada dalam talian
RANGKAIAN: log masuk.php
/myapi
http://api.twitter.com
# static.html akan disampaikan jika main.py tidak boleh diakses
# offline.jpg akan dihidangkan sebagai ganti semua imej dalam imej/large/
# offline.html akan dihidangkan sebagai ganti semua fail .html yang lain

FALLBACK: / main.py /static.html
images/large/ images/offline.jpg
*.html /offline.html Baris bermula dengan "#" ialah baris ulasan, tetapi juga boleh digunakan untuk tujuan lain. Cache apl hanya dikemas kini apabila fail manifesnya berubah. Contohnya, jika anda mengubah suai sumber imej atau menukar fungsi JavaScript, perubahan tersebut tidak akan dicapai semula. Anda mesti mengubah suai fail manifes itu sendiri untuk membenarkan penyemak imbas memuat semula fail cache. Membuat baris ulasan dengan nombor versi yang dijana, cincang fail atau cap masa memastikan pengguna mempunyai versi terkini perisian anda. Anda juga boleh mengemas kini cache secara pemrograman apabila versi baharu tersedia, seperti yang diterangkan dalam bahagian Mengemas kini Cache.
Manfes boleh merangkumi tiga bahagian berbeza: CACHE, NETWORK dan FALLBACK.

CACHE: Ini ialah bahagian lalai entri. Fail yang disenaraikan di bawah pengepala ini (atau fail sejurus selepas MANIFEST CACHE) dicache secara eksplisit pada kali pertama ia dimuat turun.

RANGKAIAN: Fail yang disenaraikan di bawah bahagian ini adalah sumber tersenarai putih yang perlu disambungkan ke pelayan. Semua permintaan untuk sumber ini memintas cache tidak kira sama ada pengguna berada di luar talian. Aksara kad bebas boleh digunakan.

FALLBACK: Bahagian ini adalah pilihan dan digunakan untuk menentukan halaman sandaran jika sumber tidak boleh diakses. URI pertama mewakili sumber dan yang kedua mewakili halaman web sandaran. Kedua-dua URI mesti berkaitan dan mesti mempunyai asal yang sama dengan fail manifes. Aksara kad bebas boleh digunakan.
Sila ambil perhatian: Bahagian ini boleh disusun dalam sebarang susunan, dan setiap bahagian boleh muncul berulang kali dalam senarai yang sama.
Senarai berikut mentakrifkan halaman "komprehensif" (luar talian.html) yang dipaparkan apabila pengguna cuba mengakses akar tapak di luar talian dan juga menunjukkan bahawa semua sumber lain (seperti yang terdapat di tapak terpencil) memerlukan sambungan Internet.
MANIFEST CACHE
# 18-06-2010:v3
# Entri cache yang jelas
index.html
css/style.css
# offline.html akan dipaparkan jika pengguna berada di luar talian
FALLBACK:
/ /offline.html
# Semua sumber lain (mis. tapak) memerlukan pengguna berada dalam talian
RANGKAIAN:
*
# Sumber tambahan untuk cache.
CACHE:
images/logo1.png
images/logo2.png
images/logo3.png Sila ambil perhatian: Fail HTML yang merujuk kepada fail manifes akan dicache secara automatik. Jadi anda tidak perlu menambahkannya pada senarai anda, tetapi kami mengesyorkan agar anda melakukannya.

Sila ambil perhatian: Pengepala cache HTTP dan had cache yang ditetapkan pada halaman yang disampaikan melalui SSL akan digantikan dengan manifes cache. Oleh itu, halaman web yang disiarkan melalui https boleh dijalankan di luar talian.

Kemas kini cache Apl akan kekal dicache semasa di luar talian melainkan salah satu daripada yang berikut berlaku:
Seorang pengguna mengosongkan storan data penyemak imbas untuk tapak web anda.
Fail manifes telah diubah suai. Nota: Mengemas kini fail yang disenaraikan dalam manifes tidak bermakna penyemak imbas akan meng-cache semula sumber tersebut. Fail manifes itu sendiri mesti ditukar.
Cache apl dikemas kini secara pengaturcaraan.


Status cache Objek window.applicationCache menyediakan akses program kepada cache aplikasi penyemak imbas. Atribut statusnya boleh digunakan untuk melihat status semasa cache:

Salin kod

Kod adalah seperti berikut:

var appCache = window.applicationCache; >switch ( appCache.status) {
case appCache.UNCACHED: // UNCACHED == 0
kembali 'UNCACHED'; 🎜>kembali 'IDLE';
break;
case appCache.SEMAK: // MENYEMAK == 2
kembali 'SEMAK'; == 3
kembali 'MUAT TURUN';
pecahkan; : // OBSOLETE == 5
kembali 'OBSOLETE';
default:
kembali 'UKNOWN CACHE STATUS'; >
Untuk mengemas kini cache secara pengaturcaraan, mula-mula panggil applicationCache.update(). Operasi ini akan cuba mengemas kini cache pengguna (dengan syarat fail manifes telah ditukar). Akhir sekali, apabila applicationCache.status berada dalam keadaan UPDATEREADY, panggil applicationCache.swapCache() untuk menggantikan cache asal dengan cache baharu.





Salin kod


Kod adalah seperti berikut:


var appCache = window.applicationCache ;
appCache.update(); // Cuba mengemas kini cache pengguna

...
jika (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache() ; // Pengambilan berjaya, tukar dalam cache baharu
}

Sila ambil perhatian: Menggunakan kemas kini() dan swapCache() dengan cara ini tidak akan memberikan. pengguna Mengemas kini sumber. Proses ini hanya membenarkan penyemak imbas menyemak manifes baharu, memuat turun kemas kini yang ditentukan dan mengisi semula cache apl. Oleh itu, halaman web perlu dimuat semula dua kali untuk menyediakan kandungan baharu kepada pengguna, kali pertama untuk mendapatkan cache aplikasi baharu dan kali kedua untuk memuat semula kandungan halaman web. Berita baiknya, anda boleh mengelakkan kerumitan memuat semula dua kali. Untuk mengemas kini pengguna kepada versi terkini tapak web, anda boleh menyediakan pendengar untuk mendengar acara sedia kemas kini apabila halaman web dimuatkan:

Salin kod


Kodnya adalah seperti berikut:

// Semak sama ada cache baharu tersedia pada pemuatan halaman window.addEventListener('load', function(. e) { window.applicationCache. addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Penyemak imbas memuat turun apl baharu cache.
// Tukar masuk dan muat semula halaman untuk mendapatkan kehangatan baharu. Muatkan ia ?')) {

tetingkap location.reload();

} } else { // Tiada apa-apa yang baharu kepada pelayan. , false); }, palsu );

ACARA APCACHE

Seperti yang anda jangkakan, acara tambahan digunakan untuk memantau status cache. Penyemak imbas mencetuskan peristiwa yang sepadan untuk kemajuan muat turun, kemas kini cache aplikasi, status ralat, dsb. Coretan kod berikut menyediakan pendengar acara untuk setiap jenis acara cache:





Salin kod


Kod adalah seperti berikut:

function handleCacheEvent(e) {
//...
}
function handleCacheError(e) {
alert('Ralat: Cache gagal dikemas kini!');
};
// Dipecat selepas cache pertama manifes.
appCache.addEventListener('cached', handleCacheEvent, false);
// Menyemak kemas kini. Sentiasa peristiwa pertama dicetuskan dalam urutan.
appCache.addEventListener('checking', handleCacheEvent, false);
// Kemas kini ditemui. Penyemak imbas sedang mengambil sumber.
appCache.addEventListener('memuat turun', handleCacheEvent, false);
// Manifes mengembalikan 404 atau 410, muat turun gagal,
// atau manifes berubah semasa muat turun sedang dijalankan.
appCache.addEventListener('error', handleCacheError, false);
// Dipecat selepas muat turun pertama manifes.
appCache.addEventListener('noupdate', handleCacheEvent, false);
// Dipecat jika fail manifes mengembalikan 404 atau 410.
// Ini mengakibatkan cache aplikasi dipadamkan.
appCache.addEventListener('obsolete', handleCacheEvent, false);
// Dipecat untuk setiap sumber yang disenaraikan dalam manifes semasa ia diambil.
appCache.addEventListener('progress', handleCacheEvent, false);
// Dipecat apabila sumber manifes baru dimuat turun semula.
appCache.addEventListener('updateready', handleCacheEvent, false);

如果清单文件或其中指定的资源无法下载，整个更新都将失败。圅中文。在中文将继续使用原应用缓存