cari

Rumah  >  Artikel  >  hujung hadapan web  >  Apakah kemahiran tutorial HTML5 cache luar talian Manifest_html5

Apakah kemahiran tutorial HTML5 cache luar talian Manifest_html5

WBOY
WBOYasal
2016-05-16 15:51:342007semak imbas

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：
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
Artikel sebelumnya：Teg semantik b dan i dalam petua tutorial HTML5_html5Artikel seterusnya：Teg semantik b dan i dalam petua tutorial HTML5_html5

Artikel berkaitan

Lihat lagi