Apakah kemahiran tutorial HTML5 cache luar talian Manifest

Apakah kemahiran tutorial HTML5 cache luar talian Manifest_html5

WBOY

Lepaskan： 2016-05-16 15:51:34

asal

1943 orang telah melayarinya

Apl web tidak lebih baik daripada PC Terdapat pertimbangan prestasi dan trafik yang semakin penting Walaupun penyemak imbas mempunyai mekanisme caching, lebih-lebih lagi, fail HTML tidak boleh dicache dalam keadaan biasa. Semuanya berakhir selepas Internet.

Apakah yang nyata?

Ringkasnya, manifes membenarkan aplikasi anda diakses walaupun tanpa sambungan rangkaian.

Ia mempunyai tiga kelebihan utama :

1. Penyemakan imbas luar talian, akses biasa walaupun tanpa rangkaian;

2. Kelajuan pemuatan yang lebih pantas, kelajuan akses tempatan yang dicache secara semula jadi lebih pantas;

3. Kurangkan tekanan permintaan perkhidmatan Selepas fail dicache, tidak perlu meminta lagi, hanya fail yang perlu dikemas kini.

Bagaimana untuk menggunakan?

Kod XML/HTML

Salin kandungan ke papan keratan

>
<html manifest="demo. appcache">
html>

Anda perlu memasukkan atribut manifes pada setiap halaman apl web yang ingin anda cache. Jika halaman tidak mempunyai atribut manifes, ia tidak akan dicache (melainkan halaman itu dinyatakan secara eksplisit dalam fail manifes). Ini bermakna selagi halaman yang dilawati oleh pengguna mengandungi atribut manifes, ia akan ditambahkan pada cache aplikasi. Dengan cara ini, tidak perlu menentukan halaman mana yang perlu dicache dalam fail manifes.

Atribut Manifes boleh menentukan URL mutlak atau laluan relatif Walau bagaimanapun, URL mutlak perlu daripada asal yang sama dengan apl web. Fail manifes boleh menjadi sebarang jenis fail sambungan, tetapi ia mesti mempunyai jenis mime yang betul, seperti menambah

dalam Apache

"AddType text/cache-manifest .appcache".

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 - dalam Fail yang disenaraikan di bawah tajuk ini memerlukan sambungan ke pelayan dan tidak dicache
FALLBACK - Fail yang disenaraikan di bawah tajuk ini menentukan sandaran apabila halaman tidak dapat dicapai Halaman (seperti 404 halaman) Fail manifes lengkap:

Kod XML/HTML

Salin kandungan ke papan keratan

MANIFEST CACHE

CACHE MANIFEST diperlukan # diikuti dengan komen Di bawah adalah fail yang perlu dicache dan memerlukan laluan relatif adalah fail yang perlu dimuatkan dengan setiap permintaan.

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

RANGKAIAN:*

FALLBACK adalah jika Internet sambungan tidak dapat diwujudkan , kemudian gunakan "404.html" untuk menggantikan semua fail dalam direktori /html5/.

Mekanisme kemas kini

Terdapat tiga cara untuk mengemas kini cache manifes: 1 Pengguna mengosongkan cache penyemak imbas
2 ialah ulasan (jadi ia boleh diubah suai dengan Komen untuk mengemas kini fail)
3. Kemas kini mengikut program

Status cache

Anda boleh melihat status cache dalam program melalui harta window.applicationCache.

Kod C/C

Salin kandungan ke papan keratan

var appCache = window.applicationCache;
suis (appCache.status) {
kes appCache.UNCACHED: // UNCACHED == 0
kembali ‘UNCACHED’;
rehat;
kes appCache.IDLE: // IDLE == 1
kembali ‘IDLE’;
rehat;
kes appCache.SEMAK: // SEMAK = 2
kembali ‘SEMAK’;
rehat;
kes appCache.MEMUAT TURUN: // MEMUAT TURUN == 3
kembali ‘MEMUAT TURUN’;
rehat;
kes appCache.UPDATEREADY: // UPDATEREADY == 4 >
kembali ‘KEMASKINI SEDIA’;
rehat;
kes appCache.OBSOLETE: // OBSOLET == 5
kembali ‘Usang’;
rehat;
lalai:
kembali ‘STATUS CACHE UKNOWN’;
rehat;
};

Untuk mengemas kini cache secara pengaturcaraan, mula-mula panggil applicationCache.update(). Ini akan cuba mengemas kini cache pengguna (memerlukan fail manifes telah berubah). Akhir sekali, apabila applicationCache.status berada dalam keadaan UPDATEREADY, panggil applicationCache.swapCache() dan cache lama akan digantikan dengan yang baharu.

Kod C/CSalin kandungan ke papan keratan

var appCache = window.applicationCache;
appCache.update(); // Cuba untuk mengemas kini cache pengguna
…
jika (appCache.status == window.applicationCache.UPDATEREADY) {
appCache.swapCache(); // Pengambilan berjaya, tukar dalam cache baharu

Nota: Menggunakan update() dan swapCache() seperti ini tidak akan membentangkan sumber yang dikemas kini kepada pengguna. Ini hanya membenarkan penyemak imbas menyemak sama ada fail manifes telah dikemas kini, kemudian memuat turun kandungan kemas kini yang ditentukan dan mengisi semula cache apl. Oleh itu, untuk pengguna melihat kandungan yang dikemas kini, dua muat turun halaman diperlukan, satu untuk mengemas kini cache aplikasi dan satu untuk mengemas kini kandungan halaman.

Untuk membolehkan pengguna melihat versi terkini tapak anda, sediakan pendengar untuk mendengar acara sedia kemas kini apabila halaman dimuatkan.

Kod C/C

Salin kandungan ke papan keratan

// Semak sama ada cache baharu tersedia pada pemuatan halaman
jika (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// Penyemak imbas memuat turun cache apl baharu
// Tukar dan muat semula halaman untuk mendapatkan kehangatan baharu
window.applicationCache.swapCache();
lain
// Manifes tidak berubah.
}
salah
}, salah

Dengar acara dan kendalikan keadaan berbeza dengan sewajarnya:

Kod C/CSalin kandungan ke papan keratan

var appCache = window.applicationCache;
// Dipecat selepas cache pertama manifes
appCache.addEventListener(‘cached’, handleCacheEvent,
);
// Menyemak kemas kini sentiasa acara pertama dicetuskan dalam urutan
false
appCache.addEventListener(‘memuat turun’, handleCacheEvent, palsu);
// Manifes mengembalikan 404 atau 410, muat turun gagal,
// atau manifes berubah semasa muat turun sedang dijalankan
false
appCache.addEventListener(‘noupdate’, handleCacheEvent, false);
// Dipecat jika fail manifes mengembalikan 404 atau 410.
// Ini menyebabkan cache aplikasi dipadamkan
false
appCache.addEventListener(‘progress’, handleCacheEvent,
);
// Dipecat apabila sumber manifes baru dimuat turun semula
appCache.addEventListener(‘updateready’, handleCacheEvent, false
Jika fail manifes atau sumber yang dinyatakan dalam fail gagal dimuat turun, keseluruhan kemas kini akan gagal. Dalam kes ini, penyemak imbas akan terus mencuba cache aplikasi lama.

Nota:

1. Had kapasiti storan luar talian tapak ialah 5J
2 Jika fail manifes atau fail yang disenaraikan secara dalaman tidak boleh dimuat turun seperti biasa, keseluruhan proses kemas kini akan dianggap sebagai kegagalan dan penyemak imbas akan diteruskan. untuk menggunakan cache lama
3 html yang merujuk manifes mesti mempunyai asal yang sama dengan fail manifes dan berada dalam domain yang sama
4 fail
5. Rentetan CACHE MANIFEST harus berada dalam baris pertama, dan penting
6. Sistem akan secara automatik cache fail HTML yang merujuk fail manifes
7 untuk dilakukan dengan susunan kedudukan NETWORK dan FALLBACK Jika ia adalah pengisytiharan tersirat, ia perlu berada di Front
8 Sumber dalam FALLBACK mesti mempunyai asal yang sama dengan fail manifes
9 dicache, penyemak imbas terus meminta laluan mutlak dan juga akan mengakses sumber dalam cache.
10 Walaupun atribut manifes tidak ditetapkan untuk halaman lain dalam tapak, sumber yang diminta akan diakses daripada cache jika ia berada dalam cache
11 Apabila fail manifes berubah, permintaan sumber itu sendiri akan mencetuskan kemas kini

Di atas ialah pengenalan kepada kandungan HTML5 yang berkaitan dengan Manifest cache luar talian. Saya harap ia akan membantu pembelajaran semua orang.

Teks asal: http://www.cnblogs.com/hutuzhu/p/4871666.html