HTML5 แนะนำเทคโนโลยีแคชแอปพลิเคชันซึ่งหมายความว่าเว็บแอปพลิเคชันสามารถแคชและใช้งานได้โดยไม่ต้องใช้เครือข่าย
ข้อดีทั้งสามที่นำโดยแอปพลิเคชันแคชคือ:
①เรียกดูออฟไลน์
②เพิ่มความเร็วรายได้ใบหน้าของหน้า
③ลดความดันเซิร์ฟเวอร์
และเบราว์เซอร์หลักได้รับการสนับสนุนโดยการสนับสนุนแอปพลิเคชันแคช
เทคโนโลยีการจัดเก็บออฟไลน์HTML5 เสนอเทคโนโลยีการจัดเก็บข้อมูลออฟไลน์ที่สำคัญสองรายการ: แคช LocalStorage และ Application แต่ละรายการมีสถานการณ์แอปพลิเคชันของตัวเอง;
หลังจากฝึกซ้อมเราเชื่อว่าการจัดเก็บข้อมูลท้องถิ่นควรเก็บข้อมูล Ajax ที่ไม่สำคัญและทำเค้ก
แอปพลิเคชันแคชยังคงใช้ในการจัดเก็บทรัพยากรคงที่และยังคงเป็นเรื่องของไอซิ่งแห้ง
และคุกกี้สามารถบันทึกข้อความย่อหน้าเล็ก ๆ (4096 ไบต์); ทำโดยคุกกี้
ดังนั้นสถานการณ์แอปพลิเคชันของแอปพลิเคชันแคชจึงแตกต่างกันดังนั้นการใช้งานจึงไม่สอดคล้องกัน
การแนะนำแคชแอปพลิเคชันแอปพลิเคชันแคชใช้สองด้าน:
①เซิร์ฟเวอร์จำเป็นต้องรักษารายการรายการ
②มีการตั้งค่าง่ายๆเพียงครั้งเดียวบนเบราว์เซอร์
<html manifest = demo.appcache>
เพื่ออธิบายตัวอย่าง:
แคช Manifestcache:# รายการของ Cache style1.css1.jpg01.jshttp: //localhost/applicationcache/02.jshttp: //localhost/application/zepto.jsnetw ork:# 4.jpgfallback:# ทรัพยากรของการเข้าถึงอะไหล่ครั้งแรกคือแหล่งที่มาของการเข้าถึงที่สองคือการแทนที่ไฟล์*.html /offline.html2.jpg/3.jpg
ก่อนอื่นฉันรายงานข้อผิดพลาดที่นี่:
เหตุการณ์ข้อผิดพลาดแคชแอปพลิเคชัน: การดึงข้อมูลอย่างชัดแจ้งล้มเหลว (404)
เหตุผลสำหรับข้อผิดพลาดนี้คือไฟล์รายการจำเป็นต้องกำหนดค่าประเภท MIME ที่ถูกต้องนั่นคือข้อความ/แคช-manifest ต้องกำหนดค่าบนเว็บเซิร์ฟเวอร์เซิร์ฟเวอร์ที่แตกต่างกันจะแตกต่างกัน
/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
ด้วยวิธีนี้คุณสามารถใช้งานออฟไลน์ได้
เป็นสิ่งที่น่าสังเกตที่นี่
ไฟล์ Manifest สามารถแบ่งออกเป็นสามส่วน:
Cache Manifest -ไฟล์ที่ระบุไว้ในชื่อนี้จะแคชหลังจากการดาวน์โหลดครั้งแรก
เครือข่าย -ไฟล์ที่แสดงในชื่อนี้จำเป็นต้องเชื่อมต่อกับเซิร์ฟเวอร์โดยไม่ถูกแคช
ทางเลือก -ไฟล์ที่ระบุไว้ในชื่อนี้กำหนดว่าหน้าของหน้าถอยหลังเมื่อไม่สามารถเข้าถึงหน้าเว็บได้ (เช่นหน้า 404)
ดังที่แสดงในรูป HTML5 กำหนดจุดเหตุการณ์หลายจุด แต่โดยทั่วไปเราไม่ได้ใช้ JS เพื่อใช้งานบางสิ่งบางอย่าง
มิติขีด จำกัด ขนาดของแคชแอปพลิเคชันเป็น unified ที่ 5m ฉันทำการทดสอบที่นี่:
ดังที่แสดงไฟล์ CSS สองไฟล์ยังคงเกิน 5 เมตรในเวลานี้
เอกสารถูกโหลดจากแอปพลิเคชันแคชพร้อมรายการ http: //localhost/applicationcache/demo.appcacheindex.html: 1 แอปพลิเคชันแคชการตรวจสอบ dex.html: 6 รับ http: //localhost/applicationcache/style2.css สุทธิ :: 1 แอปพลิเคชันแคช noupdate eventindex.html: 11 รับ http: //localhost/applicationcache/2.jpg net :: err_fairdindex.html: 12 getp: // localhost/appl icationcache/3.jpg net :: err_faird
ดังที่แสดง Style2 ไม่สามารถแคชได้อีกต่อไปปัญหานี้จะทำให้เกิดปัญหาอะไร?
ตัวอย่างเช่นช่อง A รักษาแคชแอปพลิเคชันของตัวเองและช่อง B ยังคงอยู่ในเวลานี้
ขอแนะนำให้แอปพลิเคชันแคชจัดเก็บทรัพยากรสาธารณะอย่าจัดเก็บทรัพยากรทางธุรกิจ
ปัญหาบางอย่างจากมุมมองของกลไกการอัปเดตเมื่ออัปเดตรายการเป็นครั้งแรกเนื่องจากการโหลดหน้าเว็บได้เริ่มขึ้นหรือเสร็จสิ้นการอัปเดตแคชจะไม่เสร็จสมบูรณ์และเบราว์เซอร์จะยังคงใช้ทรัพยากรที่หมดอายุ ได้รับการปรับปรุง ในเวลานี้เหตุการณ์ window.reload ถูกดำเนินการในเหตุการณ์การอัปเดต
window.applicationcache.addeventListener (updateAdy, function () {window.location.reload ()});จากตัวอย่างข้างต้นเป็นที่ทราบกันดีว่าแคชไม่ได้เป็นเพียงไฟล์นิยามเช่น ApplicationCache/เวลาในตัวอย่างข้างต้นข้อมูลของ index.html เมื่อการแมปถูกบันทึกโดยค่าเริ่มต้นและมีการสาธิต ไฟล์ AppCache
ตัวอย่างเช่นเราทำการเปลี่ยนแปลงที่นี่:
<html manifest = demo.appcache> => <html manifest = demo1.appcache>
ในเวลานี้หากคุณไม่ได้ทำการอัพเดต Demo.AppCache แคชจะไม่ได้รับการอัปเดตเนื่องจาก index.html ถูกแคชและการตรวจจับยังคงเป็นรายการรายการเดิม
แต่ละหน้าจัดการรายการรายการของตัวเองอย่างสม่ำเสมอซึ่งหมายความว่าหน้า A ได้รับการกำหนดค่าด้วย Common.js และหน้า B นั้นได้รับการกำหนดค่าด้วย Common.js ซึ่งหมายความว่าหลังจากหน้าเว็บได้รับการอัปเดตหากรายการในหน้า B หน้า B จะไม่เปลี่ยนแปลงหน้า B ยังคงอ่านอยู่
สรุปในแง่ของความพร้อมใช้งานและความสะดวกในการใช้งานแคชแอปพลิเคชันคุ้มค่าที่จะใช้ แต่เป็นการดีที่สุดที่จะแคชสำหรับทรัพยากรคงที่