Cache aplikasi HTML5

Cache Aplikasi HTML5

Apakah ituCache AplikasiCache Aplikasi

HTML5 memperkenalkan teknologi caching aplikasi, yang bermaksud aplikasi web Ia boleh dicache dan digunakan tanpa rangkaian Dengan mencipta fail manifes cache, anda boleh membuat aplikasi luar talian dengan mudah.

Tiga kelebihan yang dibawa oleh Cache Aplikasi ialah:

① Penyemakan imbas luar talian

② Tingkatkan kelajuan pemuatan halaman

③ Kurangkan tekanan pelayan

Dan semua penyemak imbas utama menyokong Cache Aplikasi, walaupun ia tidak menyokongnya, ia tidak akan memberi kesan pada program

Teknologi storan luar talian

HTML5 mencadangkan dua teknologi storan luar talian utama: localstorage dan Cache Aplikasi, kedua-duanya mempunyai senario aplikasi mereka sendiri; teknologi storan luar talian tradisional ialah Cookie.

Selepas latihan, kami percaya bahawa localstorage harus menyimpan beberapa data ajax yang tidak kritikal, iaitu aising pada kek

Cache Aplikasi digunakan untuk menyimpan sumber statik, yang masih menjadi aising; pada kek;

Dan kuki hanya boleh menyimpan sekeping kecil teks (4096 bait); , pelayan perlu membezakan sama ada permintaan itu berasal dari pelayan yang sama Pelayan memerlukan rentetan pengenalan, dan tugas ini diselesaikan oleh kuki ini akan dihantar antara pelayan dan penyemak imbas setiap kali untuk mengesahkan kebenaran pengguna.

Jadi senario aplikasi Cache Aplikasi adalah berbeza, jadi penggunaannya tidak konsisten.

Pengenalan kepada Cache Aplikasi

Penggunaan Cache Aplikasi memerlukan dua aspek kerja:

① Pelayan perlu mengekalkan senarai manifes

② pada penyemak imbas Apa yang diperlukan ialah tetapan mudah

Ilustrasi dengan contoh:

CACHE MANIFEST
CACHE:
# 需要缓存的列表
style1.css
1.jpg
01.js
http://localhost/applicationcache/02.js
http://localhost/applicationcache/zepto.js
NETWORK:
# 不需要缓存的
4.jpg
FALLBACK:
# 访问缓存失败后，备用访问的资源，第一个是访问源，第二个是替换文件*.html /offline.html
2.jpg/3.jpg

Pertama semua, di sini Ralat telah dilaporkan:

Acara Ralat Cache Aplikasi: Pengambilan manifes gagal (404)

Sebab ralat ini ialah: fail manifes perlu dikonfigurasikan dengan jenis MIME yang betul, iaitu, "teks /cache-manifest". Ia mesti dikonfigurasikan pada pelayan web, pelayan yang berbeza adalah berbeza

\APPLICATIONCACHE
    01.js
    02.js
    1.jpg
    2.jpg
    3.jpg
    4.jpg
    demo.appcache
    index.html
    style1.css
    style2.css
    web.config
    zepto.js

Dengan cara ini, ia boleh digunakan di luar talian Walaupun rangkaian diputuskan pada masa ini, fail tersebut masih boleh diakses

Berikut adalah satu perkara Perlu diingat bahawa jika /index.html tidak disertakan di sini, ia akan cache "applicationcache/". Sebenarnya, ini ialah index.html

Fail manifes boleh dibahagikan kepada tiga bahagian:
MANIFEST CACHE - fail yang disenaraikan di bawah tajuk ini akan dicache selepas muat turun pertama
RANGKAIAN - fail yang disenaraikan di bawah tajuk ini memerlukan sambungan ke pelayan, dan tidak akan dicache
FALLBACK - Fail yang disenaraikan di bawah tajuk ini menentukan halaman sandaran apabila halaman itu tidak boleh diakses (seperti halaman 404)

Asas Manifes Cache

Untuk mendayakan cache aplikasi, masukkan atribut manifes dalam teg <html> dokumen:

<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>

Setiap halaman yang menentukan manifes akan dipaparkan pada halaman pengguna Ia akan menjadi dicache apabila diakses. Jika atribut manifes tidak ditentukan, halaman itu tidak akan dicache (melainkan ia dinyatakan secara langsung dalam fail manifes).

Sambungan fail yang disyorkan untuk fail manifes ialah: ".appcache".

Sila ambil perhatian bahawa fail manifes perlu dikonfigurasikan dengan jenis MIME yang betul, iaitu "teks/manifes cache". Mesti dikonfigurasikan pada pelayan web.

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 - di bawah tajuk ini Fail keluar memerlukan sambungan ke pelayan dan tidak akan dicache

FALLBACK - Fail yang disenaraikan di bawah tajuk ini menentukan halaman sandaran apabila halaman itu tidak boleh diakses (seperti halaman 404)

MANIFEST CACHE

Barisan pertama, CACHE MANIFEST, diperlukan:

CACHE MANIFEST
/theme.css
/logo.gif
/main.js

The fail manifes di atas menyenaraikan tiga sumber: fail CSS, imej GIF dan fail JavaScript. Apabila fail manifes dimuatkan, penyemak imbas memuat turun ketiga-tiga fail ini daripada direktori akar tapak web. Kemudian, apabila pengguna memutuskan sambungan daripada Internet, sumber ini masih tersedia.

RANGKAIAN

Bahagian RANGKAIAN berikut menentukan bahawa fail "login.php" tidak akan dicache dan tidak tersedia di luar talian:

RANGKAIAN:
log masuk .php

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

RANGKAIAN:
*

FALLBACK

The bahagian FALLBACK berikut menentukan bahawa jika sambungan Internet tidak dapat diwujudkan, semua fail dalam direktori /html5/ digantikan dengan "offline.html":

FALLBACK:
/html/ /offline.html

Nota: URI pertama ialah sumber, yang kedua ialah pengganti.

Kemas kini cache

Setelah apl dicache, ia kekal dicache sehingga perkara berikut berlaku:

Pengguna mengosongkan cache penyemak imbas

Fail manifes diubah suai (Lihat petua di bawah)

Kemas kini cache apl secara pengaturcaraan

Contoh - Fail Manifes Lengkap

MANIFEST CACHE
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js

RANGKAIAN:
log masuk.php

FALLBACK:
/html/ /offline.html

Petua: Baris yang bermula dengan "#" adalah ulasan juga boleh digunakan untuk tujuan lain. Cache aplikasi dikemas kini apabila fail manifesnya berubah. Jika anda mengedit imej, atau mengubah suai fungsi JavaScript, perubahan ini tidak akan dicache semula. Mengemas kini tarikh dan nombor versi dalam baris ulasan ialah satu cara untuk menyebabkan penyemak imbas meng-cache semula fail.

Nota tentang caching aplikasi

Sila beri perhatian kepada kandungan cache.

Setelah fail dicache, penyemak imbas akan terus memaparkan versi cache, walaupun anda mengubah suai fail pada pelayan. Untuk memastikan penyemak imbas mengemas kini cachenya, anda perlu mengemas kini fail manifes anda.

Nota: Penyemak imbas mungkin mempunyai had kapasiti yang berbeza untuk data cache (sesetengah penyemak imbas menetapkan had 5MB setiap tapak).

Meneruskan pembelajaran

fail baharu

<!DOCTYPE html> <html manifest="demo_html.appcache"> <head> <meta charset="UTF-8"> </head> <body> <script src="demo_time.js"> </script> <p id="timePara"><button onclick="getDateTime()">获取日期和时间</button></p> <p><img src="" width="336" height="69"></p> <p>尝试打开 <a href="tryhtml5_html_manifest.htm" target="_blank">这个页面</a>, 在离线的状态下重新载入这个页面，页面也可以访问。</p> </body> </html>

serahkan Tetapkan Semula Kod

Operasi automatik

Cache aplikasi HTML5

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]