hujung hadapan webtutorial jsPerangkap biasa untuk mengelakkan apabila menggunakan cache aplikasi html5
mata utama
- Jangan sertakan fail manifes dalam manifes cache aplikasi, yang boleh membuat gelung yang hampir tidak lagi memaklumkan laman web anda bahawa fail cache baru tersedia.
- Sentiasa tetapkan jenis aplikasi yang nyata dalam fail .htaccess pelayan untuk memastikan AppCache berjalan dengan betul. Jika jenis media tidak ditetapkan, Appcache tidak akan berfungsi.
- Perhatikan bahawa jika tiada fail individu yang dinyatakan dalam fail manifes boleh didapati atau tidak boleh dimuat turun, keseluruhan fail manifes akan dibuang. Ini adalah tingkah laku khas AppCache.
- Selepas mengemas kini laman web, sentiasa mengemas kini fail manifes, jika tidak, pengguna tidak akan melihat perubahan dan hanya akan melihat data yang di -cache sebelumnya. Anda boleh mengemas kini nombor atau tarikh versi dalam komen dalam fail manifes untuk memaksa pelayar web pengguna untuk memuat turun versi baru fail manifes.
Untuk menggunakan AppCache, anda boleh membuat fail manifes dengan lanjutan "Appcache", contohnya: manifest.appcache. Dalam fail ini, anda boleh menyenaraikan semua fail ke cache. Untuk mengaktifkannya di laman web anda, anda mesti memasukkan rujukan kepada fail manifes di laman web elemen HTML, seperti yang ditunjukkan di bawah:
<html lang="en" manifest="manifest.appcache">Ini adalah fail manifes sampel:
<code>CACHE MANIFEST # 2015-01-23 v0.1 /style.css /logo.gif /script.js NETWORK: * FALLBACK: /server/ /fallback.html</code>Di samping manfaat AppCache, terdapat beberapa perangkap biasa yang harus dielakkan untuk mengelakkan mengganggu pengalaman pengguna dan memusnahkan aplikasi anda.
Jangan Senaraikan fail nyata dalam fail nyata
Jika anda memasukkan fail manifes itu sendiri dalam aplikasi cache aplikasi, ia akan terjebak dalam beberapa jenis gelung yang tidak akan memaklumkan laman web anda bahawa terdapat fail cache baru yang tersedia, dan ia harus memuat turun dan menggunakan fail manifes baru bukannya fail manifes lama. Oleh itu, berhati -hati untuk tidak membuat kesilapan berikut:
<code>CACHE MANIFEST # 2015-01-23 v0.1 manifest.appcache page2.css</code>Sumber yang tidak dapat dicapai pada halaman cache tidak akan dimuatkan
Ini adalah kesilapan yang sangat biasa apabila menggunakan Appcache untuk kali pertama. Di sinilah bendera rangkaian dalam fail manifes dimainkan. Bahagian rangkaian fail manifes menentukan sumber yang perlu diakses oleh aplikasi web secara dalam talian.
URL yang ditentukan di bawah bendera rangkaian pada dasarnya adalah "Whitelist", iaitu, fail yang ditentukan di bawah bendera ini sentiasa dimuatkan dari pelayan apabila terdapat sambungan Internet. Sebagai contoh, coretan kod berikut memastikan bahawa permintaan untuk memuat sumber yang terkandung dalam / API / Subtree sentiasa dimuatkan dari rangkaian, bukan dari cache.
<html lang="en" manifest="manifest.appcache">
Sentiasa tetapkan jenis aplikasi yang nyata dalam fail .htaccess pelayan
Fail manifes harus selalu disampaikan di bawah teks jenis media/manifes cache yang betul. Jika jenis media tidak ditetapkan, Appcache tidak akan berfungsi.
Ia harus sentiasa dikonfigurasi dalam fail .htaccess pelayan pengeluaran. Ini disebut dalam kebanyakan tutorial yang menerangkan AppCache, tetapi banyak pemaju mengabaikan ini apabila memindahkan aplikasi web dari pelayan pembangunan ke pelayan pengeluaran.
masukkan yang berikut dalam fail .htaccess Apache:
<code>CACHE MANIFEST # 2015-01-23 v0.1 /style.css /logo.gif /script.js NETWORK: * FALLBACK: /server/ /fallback.html</code>
Jika anda memuat naik aplikasi anda ke Google App Engine, anda boleh melakukan tugas yang sama dengan menambahkan coretan berikut ke fail app.yaml:
<code>CACHE MANIFEST # 2015-01-23 v0.1 manifest.appcache page2.css</code>
Elakkan membuang keseluruhan senarai kerana fail tidak dapat dijumpai
Jika tiada fail individu yang dinyatakan dalam fail manifes boleh didapati atau tidak boleh dimuat turun, keseluruhan fail manifes akan dibuang. Ini adalah tingkah laku yang aneh dari AppCache, yang harus diingat ketika merancang aplikasi web yang menggunakan AppCache.
Contoh:
<code>NETWORK: /api</code>
Jika anda memadam logo.gif, Appcache tidak akan dapat mencari fail imej yang dipadam, jadi tiada apa -apa dalam fail manifes akan dilaksanakan.
data dimuatkan dari AppCache walaupun dalam talian
Setelah penyemak imbas web anda menyimpan fail manifes cache, fail akan dimuatkan dari cache yang nyata walaupun pengguna disambungkan ke Internet. Ciri ini membantu meningkatkan kelajuan pemuatan laman web anda dan membantu mengurangkan beban pelayan.
Perubahan pada pelayan tidak berlaku sehingga fail nyata dikemas kini
Kerana anda tahu dari titik sebelumnya bahawa data akan dimuatkan dari AppCache walaupun pengguna dalam talian, perubahan kepada fail di laman web atau pelayan tidak akan berlaku sehingga fail manifes dikemas kini.
Selepas mengemas kini laman web, anda sentiasa perlu mengemas kini fail manifes, jika tidak, pengguna anda tidak akan pernah melihat perubahan, mereka hanya akan melihat data yang sebelum ini di -cache. Anda boleh mengemas kini nombor atau tarikh versi dalam komen dalam fail manifes untuk memaksa pelayar web pengguna untuk memuat turun versi baru fail manifes. Sebagai contoh, jika anda menggunakan fail senarai sebelum membuat perubahan ke laman web anda:
<code>AddType text/cache-manifest .manifest</code>
Ia boleh ditukar kepada sesuatu yang serupa dengan blok kod berikut supaya penyemak imbas pengguna dapat memuat turun salinan baru fail manifest.
<code>- url: /public_html/(.*\.appcache) static_files: public_html/ mime_type: text/cache-manifest upload: public_html/(.*\.appcache)</code>
Sila ambil perhatian bahawa baris bermula dengan # adalah garis komen yang tidak akan dilaksanakan.
fail manifes mesti disampaikan dari sumber yang sama dengan tuan rumah.
Walaupun fail manifes boleh memegang rujukan kepada sumber yang akan di -cache dari domain lain, ia harus diberikan kepada penyemak imbas web dari sumber yang sama dengan halaman hos. Jika ini tidak berlaku, fail manifes tidak akan dimuatkan. Sebagai contoh, fail manifes berikut betul:
<code>CACHE MANIFEST # 2015-01-23 v0.1 /style.css /logo.gif /script.js</code>
di sini kita menentukan apa yang kita mahu simpan dalam cache penyemak imbas pengguna, yang dirujuk dari domain lain, yang benar -benar baik.
url relatif relatif untuk senarai url
Satu perkara penting yang perlu diperhatikan ialah URL relatif yang anda nyatakan dalam manifes adalah relatif kepada fail manifes, tidak relatif kepada dokumen yang anda rujuk fail manifes. Jika nyata dan rujukan tidak berada di jalan yang sama, sumber tidak akan dimuatkan dan fail nyata tidak akan dimuatkan.
Jika struktur aplikasi anda kelihatan seperti ini:
<html lang="en" manifest="manifest.appcache">
maka fail manifes anda sepatutnya kelihatan seperti ini:
<code>CACHE MANIFEST # 2015-01-23 v0.1 /style.css /logo.gif /script.js NETWORK: * FALLBACK: /server/ /fallback.html</code>
periksa status senarai semak secara programatik
Anda boleh secara programatik memeriksa sama ada aplikasi anda menggunakan versi terkini cache yang manifes dengan menguji window.applicationcache.status. Berikut adalah beberapa kod sampel:
<code>CACHE MANIFEST # 2015-01-23 v0.1 manifest.appcache page2.css</code>
Menjalankan kod di atas di laman web akan memberitahu anda apabila kemas kini baru ke senarai Appcache tersedia. Perhatikan bahawa UpdateReady adalah keadaan yang ditetapkan. Anda juga boleh menggunakan kaedah swapCache () dalam fungsi onupDateReady () untuk menggantikan fail manifes lama dengan fail manifes baru:
<code>NETWORK: /api</code>
Kesimpulan
AppCache adalah teknik yang berguna, tetapi seperti yang telah kita lihat, berhati -hati ketika melaksanakannya dalam projek. Pemaju harus memilih secara selektif apa yang harus dimasukkan ke dalam fail manifes. Idealnya, fail manifes harus mengandungi kandungan statik seperti stylesheets, skrip, fon web, dan imej. Walau bagaimanapun, anda sentiasa menjadi hakim terbaik tentang apa yang termasuk dalam fail manifes. Appcache adalah pedang bermata dua, jadi berhati-hati apabila menggunakannya!
Kebanyakan kandungan di atas telah diperkenalkan di tempat lain, dan terdapat beberapa perkara utama yang lain. Anda boleh menyemak sumber -sumber berikut untuk maklumat lanjut:
- perangkap cache aplikasi pada mdn
- cache aplikasi Jake Archibald adalah jerk
- resipi luar talian Jake Archibald
Soalan Lazim Mengenai Caching Aplikasi HTML5 (FAQ)
Apakah caching aplikasi HTML5 dan mengapa penting?
HTML5 Application Cache (AppCache) adalah ciri yang membolehkan pemaju menentukan fail mana yang harus di -cache oleh penyemak imbas dan menjadikannya tersedia untuk pengguna untuk di luar talian. Ia penting kerana ia dapat meningkatkan prestasi aplikasi web anda dengan mengurangkan beban pelayan dan menjimatkan jalur lebar. Ia juga membolehkan aplikasi berjalan walaupun pengguna berada di luar talian, memberikan pengalaman pengguna yang lebih baik.
Bagaimana aplikasi caching aplikasi HTML5?
Caching Aplikasi HTML5 berfungsi dengan menggunakan fail manifes. Fail ini menyenaraikan sumber yang perlu disemak oleh penyemak imbas untuk kegunaan luar talian. Apabila pengguna mengakses laman web, penyemak imbas memeriksa sama ada fail manifes dikaitkan dengannya. Jika ya, penyemak imbas akan memuat turun dan menyimpan sumber yang disenaraikan. Pada masa yang akan datang pengguna melawat laman web, penyemak imbas akan memuatkan sumber cache dan bukannya memuat turunnya dari pelayan.
Apakah perangkap biasa apabila menggunakan caching aplikasi HTML5?
Apabila menggunakan caching aplikasi HTML5, beberapa perangkap biasa termasuk: tidak mengemas kini fail manifes dengan betul, menyebabkan sumber lama disediakan; Penyimpanan peranti.
Bagaimana untuk mengelakkan perangkap ini?
Untuk mengelakkan perangkap ini, sentiasa mengemas kini fail manifes dengan betul apabila sumber berubah. Gunakan bahagian rangkaian fail manifes untuk menentukan sumber yang tidak boleh di -cache. Juga, pertimbangkan penyimpanan peranti pengguna dan cache hanya sumber yang diperlukan.
Apakah masa depan caching aplikasi HTML5?
cache aplikasi HTML5 sedang ditamatkan, digantikan oleh pekerja perkhidmatan. Pekerja perkhidmatan menyediakan lebih banyak kawalan ke atas cache dan boleh mengendalikan senario yang lebih kompleks. Walau bagaimanapun, pekerja perkhidmatan kini disokong oleh tidak semua pelayar, jadi masih penting untuk memahami dan menggunakan caching aplikasi HTML5.
Bagaimana untuk membuat fail manifes?
Fail manifes adalah fail teks mudah yang menyenaraikan sumber yang akan di -cache. Ia harus dihidangkan sebagai jenis mime "teks/cache-manifest". Baris pertama fail harus "manifes cache", diikuti dengan sumber yang akan di -cache.
Bagaimana untuk mengaitkan laman web dengan fail manifes?
Untuk mengaitkan laman web dengan fail manifes, tambahkan atribut "manifes" ke tag "HTML" laman web. Nilai atribut "nyata" hendaklah menjadi URL fail manifes.
bagaimana untuk mengemas kini cache?
Untuk mengemas kini cache, buat perubahan pada fail manifes. Setiap kali pengguna melawat laman web, penyemak imbas memeriksa kemas kini ke fail manifes. Jika fail manifes telah diubah, penyemak imbas akan memuat turun dan cache sumber baru.
Apa yang berlaku jika sumber yang disenaraikan dalam fail manifes tidak dapat dimuat turun?
Jika sumber yang disenaraikan dalam fail manifes tidak dapat dimuat turun, keseluruhan proses kemas kini cache akan gagal. Penyemak imbas akan terus menggunakan cache lama.
Bolehkah saya menggunakan cache aplikasi html5 untuk semua sumber?
Secara teknikal, anda boleh menggunakan cache aplikasi HTML5 untuk semua sumber, ini tidak disyorkan. Cache sumber yang berlebihan boleh mengisi penyimpanan peranti pengguna dan prestasi kesan negatif. Adalah lebih baik untuk cache hanya sumber yang diperlukan.
Atas ialah kandungan terperinci Perangkap biasa untuk mengelakkan apabila menggunakan cache aplikasi html5. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Evolusi JavaScript: Trend Semasa dan Prospek Masa DepanApr 10, 2025 am 09:33 AMTrend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.
Demystifying JavaScript: Apa yang berlaku dan mengapa pentingApr 09, 2025 am 12:07 AMJavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.
Adakah Python atau JavaScript lebih baik?Apr 06, 2025 am 12:14 AMPython lebih sesuai untuk sains data dan pembelajaran mesin, manakala JavaScript lebih sesuai untuk pembangunan front-end dan penuh. 1. Python terkenal dengan sintaks ringkas dan ekosistem perpustakaan yang kaya, dan sesuai untuk analisis data dan pembangunan web. 2. JavaScript adalah teras pembangunan front-end. Node.js menyokong pengaturcaraan sisi pelayan dan sesuai untuk pembangunan stack penuh.
Bagaimana saya memasang javascript?Apr 05, 2025 am 12:16 AMJavaScript tidak memerlukan pemasangan kerana ia sudah dibina dalam pelayar moden. Anda hanya memerlukan editor teks dan penyemak imbas untuk memulakan. 1) Dalam persekitaran penyemak imbas, jalankan dengan memasukkan fail HTML melalui tag. 2) Dalam persekitaran Node.js, selepas memuat turun dan memasang node.js, jalankan fail JavaScript melalui baris arahan.
Bagaimana cara menghantar pemberitahuan sebelum tugas bermula di kuarza?Apr 04, 2025 pm 09:24 PMCara Menghantar Pemberitahuan Tugas di Quartz terlebih dahulu Apabila menggunakan pemasa kuarza untuk menjadualkan tugas, masa pelaksanaan tugas ditetapkan oleh ekspresi cron. Sekarang ...
Dalam JavaScript, bagaimana untuk mendapatkan parameter fungsi pada rantaian prototaip dalam pembina?Apr 04, 2025 pm 09:21 PMCara mendapatkan parameter fungsi pada rantaian prototaip dalam JavaScript dalam pengaturcaraan JavaScript, pemahaman dan memanipulasi parameter fungsi pada rantaian prototaip adalah tugas yang biasa dan penting ...
Apakah sebab kegagalan perpindahan gaya dinamik Vue.js dalam program WeChat Mini Webview?Apr 04, 2025 pm 09:18 PMAnalisis sebab mengapa kegagalan anjakan gaya dinamik menggunakan vue.js dalam pandangan web applet weChat menggunakan vue.js ...
Bagaimana untuk melaksanakan permintaan GET serentak untuk pelbagai pautan di Tampermonkey dan menentukan hasil pulangan dalam urutan?Apr 04, 2025 pm 09:15 PMBagaimana untuk membuat permintaan serentak untuk pelbagai pautan dan hakim mengikut urutan untuk mengembalikan hasil? Dalam skrip Tampermonkey, kita sering perlu menggunakan pelbagai rantai ...
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
SecLists
SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
