masyarakat
Belajar
Perpustakaan Alatan
Alat AI
Masa lapang
cari
Melayu
Rumah hujung hadapan web Tutorial H5 Apakah kemahiran tutorial HTML5 cache luar talian Manifest_html5

Apakah kemahiran tutorial HTML5 cache luar talian Manifest_html5

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
May 16, 2016 pm 03:51 PM
html5 manifest Cache luar talian

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
  1. >
  2. <html manifest="demo. appcache">
    3. ...
  4. 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
  1. MANIFEST CACHE
    2. # 2012-02-21 v1.0.0
    3. /theme.css
    4. /logo.gif
    5. /main.js
    7. RANGKAIAN:
    8. log masuk.asp
    10. FALLBACK:
    11. /html5/ /404.html
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
  1. var appCache = window.applicationCache;   
  2.     
  3. suis (appCache.status) {   
  4.     
  5.   kes appCache.UNCACHED: // UNCACHED == 0   
  6.     
  7.     kembali ‘UNCACHED’;   
  8.     
  9.     rehat;   
  10.     
  11.   kes appCache.IDLE: // IDLE == 1   
  12.     
  13.     kembali ‘IDLE’;   
  14.     
  15.     rehat;   
  16.     
  17.   kes appCache.SEMAK: // SEMAK =  2   
  18.     
  19.     kembali ‘SEMAK’;   
  20.     
  21.     rehat;   
  22.     
  23.   kes appCache.MEMUAT TURUN: // MEMUAT TURUN == 3   
  24.     
  25.     kembali ‘MEMUAT TURUN’;   
  26.     
  27.     rehat;   
  28.     
  29.   kes appCache.UPDATEREADY:  // UPDATEREADY == 4   >
  30.     
  31.     kembali ‘KEMASKINI SEDIA’;   
  32.     
  33.     rehat;   
  34.     
  35.   kes appCache.OBSOLETE: // OBSOLET == 5   
  36.     
  37.     kembali ‘Usang’;   
  38.     
  39.     rehat;   
  40.     
  41.   lalai:   
  42.     
  43.     kembali ‘STATUS CACHE UKNOWN’;   
  44.     
  45.     rehat;   
  46.     
  47. };   
  48.   

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
  1. var appCache = window.applicationCache;
  3. appCache.update(); // Cuba untuk mengemas kini cache pengguna
  5. …
  7. jika (appCache.status == window.applicationCache.UPDATEREADY) {
  9. appCache.swapCache(); // Pengambilan berjaya, tukar dalam cache baharu
    11. }
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
  1. // Semak sama ada cache baharu tersedia pada pemuatan halaman
    3. window.addEventListener(‘load’, function(e) {
    5. window.applicationCache.addEventListener(‘updateready’, function(e) {
  7. jika (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
    9.  
  9. // Penyemak imbas memuat turun cache apl baharu
    10.  
  10. // Tukar dan muat semula halaman untuk mendapatkan kehangatan baharu
  11. window.applicationCache.swapCache();
    12. window.location.reload();
    14. }
  14. lain
    15. {
  16.  // Manifes tidak berubah.
  18. }
    20. },
  20. salah
    21. );
  22. }, salah
    23. );

Dengar acara dan kendalikan keadaan berbeza dengan sewajarnya:

Kod C/CSalin kandungan ke papan keratan
  1. var appCache = window.applicationCache;
  3. // Dipecat selepas cache pertama manifes
  4. appCache.addEventListener(‘cached’, handleCacheEvent,
    5. false
  5. );
  6. // Menyemak kemas kini sentiasa acara pertama dicetuskan dalam urutan
    8. appCache.addEventListener(‘checking’, handleCacheEvent,
  8. false
    9. );
    10. // Kemas kini telah ditemui
  11. appCache.addEventListener(‘memuat turun’, handleCacheEvent, palsu);
  13. // Manifes mengembalikan 404 atau 410, muat turun gagal,
  15. // atau manifes berubah semasa muat turun sedang dijalankan
    16. appCache.addEventListener(‘error’, handleCacheError,
  16. false
    17. );
    18. // Dipecat selepas muat turun pertama manifes
  19. appCache.addEventListener(‘noupdate’, handleCacheEvent, false);
  21. // Dipecat jika fail manifes mengembalikan 404 atau 410.
  23. // Ini menyebabkan cache aplikasi dipadamkan
    24. appCache.addEventListener(‘obsolete’, handleCacheEvent,
  24. false
    25. );
    26. // Dipecat untuk setiap sumber yang disenaraikan dalam manifes semasa ia diambil
  27. appCache.addEventListener(‘progress’, handleCacheEvent,
    28. false
  28. );
  29. // Dipecat apabila sumber manifes baru dimuat turun semula
  31. appCache.addEventListener(‘updateready’, handleCacheEvent, false
    32. );

  32. 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
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell
3 minggu yang lalu By DDD
Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini
2 minggu yang lalu By DDD
Di mana untuk mencari kad kunci kawalan kren di atomfall
3 minggu yang lalu By DDD
Assassin's Creed Shadows - Cara Mencari Orang Panda
1 bulan yang lalu By DDD
<🎜>: Rails Dead - Cara Melengkapkan Setiap Cabaran
3 minggu yang lalu By DDD
Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?
7615
15
Tutorial CakePHP
1387
52
Apakah format nama akaun stim
88
11
kunci pengaktifan win11 kekal
68
19
Sambungan NYT menunjukkan dan jawapan
29
136
Tunjukkan Lagi
Related knowledge
Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Pemegang Tempat Input HTML Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

See all articles