Rumah > Artikel > hujung hadapan web > Penjelasan terperinci tentang penggunaan cache manifes dalam kemahiran tutorial HTML5_html5
Penjelasan terperinci tentang penggunaan cache manifes dalam kemahiran tutorial HTML5_html5
- WBOYasal
- 2016-05-16 15:46:231676semak imbas
Origin
Halaman web sebelum HTML5 semuanya tanpa sambungan dan perlu disambungkan ke Internet untuk mengakses Ini sebenarnya adalah ciri web masalah untuk PC pada era, tetapi dengan Internet mudah alih Pada era ini, lokasi terminal peranti tidak lagi tetap dan bergantung pada isyarat wayarles Kebolehpercayaan rangkaian telah menjadi berkurangan dan melalui terowong (15 minit), anda tidak akan dapat mengakses tapak web Ini sangat berbahaya kepada web , contohnya, untuk halaman yang direka untuk membaca seperti "ecmascript Collection".
html5 memperkenalkan fail manifes cache. Jadi apa itu manifes cache, kita akan membincangkannya seterusnya.
Apakah Manifes Cache
Pertama sekali, manifes ialah fail dengan nama akhiran minifest. Fail yang perlu dicache ditakrifkan dalam fail tersebut peraturan fail manifes , seperti fail disimpan secara setempat, supaya halaman itu boleh diakses tanpa pautan rangkaian.
Apabila kami mengkonfigurasi cache aplikasi dengan betul untuk kali pertama, apabila kami mengakses aplikasi itu semula, penyemak imbas akan terlebih dahulu menyemak sama ada terdapat perubahan dalam fail manifes Jika terdapat perubahan, ia akan mengemas kini perubahan yang sepadan dan menukarnya menyemak imbas pada masa yang sama Jika tiada perubahan pada cache aplikasi dalam pelayan, sumber cache aplikasi akan dikembalikan secara langsung. 
Ciri Manifes
Menyemak imbas luar talian: Pengguna boleh menyemak imbas kandungan tapak web di luar talian.
Kelajuan yang lebih pantas: Kerana data disimpan secara setempat, kelajuan akan menjadi lebih pantas.
Kurangkan beban pelayan: Penyemak imbas hanya akan memuat turun sumber yang telah berubah pada pelayan.
Sokongan Penyemak Imbas
Caching aplikasi disokong oleh semua penyemak imbas utama kecuali Internet Explorer. Jawapan yang diberikan oleh caniuse ditunjukkan di bawah. 
Cara menggunakan
html telah menambahkan atribut manifes, yang boleh digunakan untuk menentukan fail manifes halaman semasa.
Buat fail manifes dengan nama yang sama seperti html Contohnya, jika halaman itu ialah index.html, maka anda boleh mencipta fail index.manifest, dan kemudian tambahkan atribut berikut pada teg html index.html:
- <html lang="en" manifest="index.manifest">
Fail manifes
Mari kita bincangkan butiran manifes secara terperinci Struktur kod fail manifes biasa adalah seperti berikut:
MANIFEST CACHE#versi 1.3CACHE: test.cssNETWORK:*
fail manifes, format asas ialah tiga bahagian: CACHE, NETWORK dan FALLBACK, yang mana NETWORK dan FALLBACK adalah pilihan.
Baris pertama CACHE MANIFEST adalah dalam format tetap dan mesti ditulis di hadapan.
Ulasan yang bermula dengan # biasanya ditulis dengan nombor versi pada baris kedua, yang digunakan untuk menukar peranan manifes apabila fail cache dikemas kini. Ia boleh menjadi nombor versi, cap masa atau kod md5, dsb.
CACHE: (diperlukan)
Mengenal pasti fail yang perlu dicache, yang boleh menjadi laluan relatif atau laluan mutlak.
a.csshttp://yanhaijing.com/a.css
RANGKAIAN: (pilihan)
Bahagian ini ialah fail untuk dibaca terus, memintas cache Anda boleh menggunakan kad bebas *.
Kod "login.asp" berikut tidak akan dicache dan tidak tersedia di luar talian:
NETWORK:login.asp
Asterisk boleh digunakan untuk menunjukkan bahawa semua sumber/fail lain memerlukan sambungan Internet:
RANGKAIAN:* ###FALLBACK: (Pilihan)
Menentukan halaman sandaran yang akan digunakan oleh penyemak imbas apabila sumber tidak boleh diakses. Setiap rekod dalam bahagian ini menyenaraikan dua URI—yang pertama mewakili sumber dan yang kedua mewakili halaman sandaran. Kedua-dua URI mesti menggunakan laluan relatif dan mempunyai asal yang sama dengan fail manifes. Aksara kad bebas boleh digunakan.
Dalam contoh di bawah, jika sambungan Internet tidak dapat diwujudkan, semua fail dalam direktori /html5/ digantikan dengan "404.html".
FALLBACK:/html5/ /404.html
Dalam contoh berikut, gunakan “404.html” untuk menggantikan semua fail.
FALLBACK:*.html /404.html
Cara mengemas kini cache
Terdapat tiga cara untuk mengemas kini cache:
(1) Kemas kini fail manifes
(2) Operasi melalui javascript
(3) Kosongkan cache penyemak imbas
Menambah atau memadam fail pada manifes boleh mengemas kini cache Jika kami menukar js tanpa menambah atau memadam, nombor versi dalam ulasan dalam contoh sebelumnya boleh digunakan untuk mengemas kini fail manifes.
HTML5 memperkenalkan kaedah js untuk mengendalikan cache luar talian Js berikut boleh mengemas kini cache setempat secara manual.
window.applicationCache.update();
Jika pengguna mengosongkan cache penyemak imbas (secara manual atau menggunakan beberapa alat lain), fail akan dimuat turun semula.
Nota
Pelayar mungkin mempunyai had kapasiti yang berbeza untuk data cache (sesetengah penyemak imbas menetapkan had 5MB setiap tapak).
Jika fail manifes atau fail yang disenaraikan secara dalaman tidak boleh dimuat turun seperti biasa, keseluruhan proses kemas kini akan gagal dan penyemak imbas akan terus menggunakan cache lama.
html yang merujuk manifes mesti mempunyai asal yang sama dengan fail manifes dan berada dalam domain yang sama.
Sumber dalam FALLBACK mesti mempunyai asal yang sama dengan fail manifes.
Apabila sumber dicache, penyemak imbas terus meminta laluan mutlak dan juga mengakses sumber dalam cache.
Walaupun atribut manifes tidak ditetapkan untuk halaman lain dalam tapak, sumber yang diminta akan diakses daripada cache jika ia berada dalam cache.
Apabila fail manifes berubah, permintaan sumber itu sendiri juga akan mencetuskan kemas kini.
Alat Automasi
Kad liar tidak boleh digunakan dalam bahagian cache fail manifes dan mesti dinyatakan secara manual Ini benar-benar tidak dapat difahami Apabila terdapat terlalu banyak fail, ia menjadi kerja manual. Berikut ialah pengenalan grunt-manifest boleh menjana fail manifes secara automatik. grunt-manifest bergantung pada grunt, yang merupakan alat binaan automatik Jika anda tidak tahu grunt, sila pergi ke sini.
Arahan berikut boleh memasang grunt-manifest dan menambahkannya pada fail kebergantungan.
Kod berikut boleh dimuatkan ke dalam grunt-manifest dan kemudian digunakan.
Fail konfigurasi biasa menggunakan grunt-manifest adalah seperti berikut:
grunt.initConfig({
manifes: {
jana: {
pilihan: {
basePath: "../",
cache: ["js/app.js ", "css/style.css"]
rangkaian: ["http://*", "https://*"],
sandaran: ["/ /offline.html"],
kecualikan: ["js/jquery.min.js"],
preferOnline: true,
verbose: true,
timestamp: true
},
src: [
" some_files/*.html",
"js/*.min.js",
"css/*.css"
],
dest: "index.manifest"
}
}
});
Pilihan mentakrifkan beberapa parameter tersuai untuk menjana manifes, src ialah fail yang akan dijana dan dest ialah fail output.
Terdapat banyak parameter di bawah pilihan, parameter utama adalah seperti berikut:
basePath menetapkan direktori akar fail masuk dan keluar
cache Tambah fail cache secara manual
rangkaian menambah fail rangkaian secara manual
undur secara manual menambah fail sandar
kecualikan tetapan untuk tidak menambah fail pada cache
Tegaskan sama ada hendak menambah maklumat hak cipta
cap masaSama ada untuk menambah cap masa
Contoh
Untuk menggunakan cache manifes, kita perlu menulis fail manifes terlebih dahulu. Fail ini mempunyai keperluan format yang ketat, berikut ialah contoh
CACHE MANIFEST
#Saya adalah ulasan, fail ini dipanggil test.manifest
CACHE:
/test.css
/test.js
Ini ialah fail manifes mudah. Ia mesti bermula dengan "CACHE MANIFEST" untuk mengisytiharkan bahawa ini ialah fail manifes. "CACHE:" berikut ialah jenis operasi, dan dua fail seterusnya ialah fail yang dipengaruhi oleh jenis operasi "CACHE:" mengikut laluan, menunjukkan bahawa fail ini perlu dicache. Sudah tentu, terdapat lebih daripada satu jenis operasi: CACHE, yang akan dibincangkan kemudian. Mari kita bincangkan dahulu tentang isu yang paling dibimbangkan oleh semua orang. Bagaimana untuk menggunakan fail manifes ini?
Untuk menggunakan fail manifes, cuma tambahkan atribut "manifest="laluan fail manifes"" pada teg HTML halaman, seperti
- <html manifest="test.manifest">
- <kepala>
- <pautan href="ujian. css" rel="stylesheet" /> 🎜>
- <skrip src="ujian. js">skrip>
- kepala>
- <badan>
- <div>Kobalt hipokarbonat div>
- <badan>
- html>
Halaman ini menggunakan fail manifes yang ditulis di atas Jika kami membuka halaman ini dengan Chrome, kami boleh mencari maklumat kerja manifes ini dalam konsol. 
Dapat dilihat daripada maklumat ini bahawa dua fail yang kami tetapkan yang perlu dicache telah dicache. Dan halaman yang merujuk manifes juga dicache. Ini adalah sangat penting. Ini adalah mekanisme manifes Selain daripada menyimpan fail yang ditetapkan, ia juga akan menyimpan cache halaman yang merujuk fail manifes (tidak boleh dimatikan walaupun anda mahu). Oleh itu, ia sangat menyusahkan untuk digunakan, yang memerlukan perhatian.
Selain itu, perkara selepas cache manifes hanya akan dikemas kini apabila fail manifes berubah (nampaknya dikemas kini apabila md5 fail ini berubah). Apabila fail cache dikemas kini, penyemak imbas tidak akan memperoleh fail baharu. Dalam erti kata lain, halaman tadi mempunyai cache test.css Sekarang saya mengubah suai test.css, halaman itu tidak akan berubah. Melainkan saya mengubah suai kandungan fail manifes itu sendiri (perhatikan bahawa ia adalah kandungan, bukan masa pengubahsuaian). Secara amnya, untuk mengemas kini cache ini, anda boleh meletakkan masa pengubahsuaian dalam ulasan di dalam untuk mengemas kininya. Saya tidak akan mengambil tangkapan skrin ini, ia terlalu menyusahkan.
Selepas bercakap tentang soalan ini, sekarang mari kita kembali dan lihat cara manifes itu sendiri ditulis. Selain "CACHE:" di atas, terdapat beberapa jenis operasi. Berikut ialah jenis dan perihalan operasi ini
CACHE: Tetapkan fail berikut sebagai cache
RANGKAIAN: Tetapkan fail berikut sebagai tidak dicache (tidak boleh tetapkan halaman sendiri)
FALLBACK: Tetapkan fail berikut sebagai salah atau tidak wujud Apabila menggunakan fail lain
SETTINGS: Anda boleh menetapkan dua mod: cepat atau prefer-online
CACHE ialah untuk menetapkan cache, yang telah dinyatakan sebelum ini.
RANGKAIAN ditetapkan bukan untuk cache. Kerana mekanisme manifes adalah untuk menyimpan keseluruhan halaman (atau aplikasi web) secara setempat. Oleh itu, semua sumber yang digunakan oleh halaman semasa mesti mempunyai tetapan. Jika ia tidak ditetapkan, ia tidak akan ditemui selepas halaman dicache, jadi anda biasanya perlu menggunakan NETWORK untuk memadankan semua sumber yang tidak perlu dicache, seperti yang ditunjukkan di bawah.
RANGKAIAN:
*
Jika FALLBACK tidak wujud, gunakan fail lain sebagai contoh
FALLBACK:
/x.css /test.css
- <html manifest="test.manifest">
- <kepala>
- <pautan href="x. css" rel="stylesheet" /> 🎜>
- kepala>
- html>
Da x.css nicht existiert, wird test.css verwendet, um es beim Caching zu ersetzen.
EINSTELLUNGEN können auf zwei Modi eingestellt werden, der Standardwert ist schnell. Aber in meinem Test habe ich keinen Unterschied zwischen den beiden Modi gespürt, deshalb werde ich vorerst nicht darüber sprechen.
Dies sind die grundlegendsten Dinge zum Manifest-Cache. Ein weiteres großes Problem ist die Warnung von Firefox. Bei Verwendung von Manifest erscheint unter Firefox eine Warnung. 
Das ist der nervigste Teil dieser Sache, also lassen Sie es uns jetzt ein wenig verstehen, ohne in die Tiefe zu gehen. Schauen wir uns dieses Produkt noch einmal an, nachdem diese Probleme gelöst sind. Tatsächlich besteht die Rolle von Manifest darin, Webanwendungen zu lokalisieren. Wenn Sie nur eine „Webanwendungslokalisierung“ durchführen, kann es tatsächlich verwendet werden. Aber dieses Ding ist in anderen Aspekten wirklich schwach. Daher werden aktuelle Projekte die Verwendung dieser schmerzhaften Sache nicht in Betracht ziehen. Bei den oben genannten handelt es sich nur um Einstiegstests, und es gibt noch viele Dinge, die getestet werden müssen. Da es derzeit jedoch nicht verwendet wird, werde ich es vorerst nicht studieren.