การเข้าถึงแบบออฟไลน์กำลังมีความสำคัญมากขึ้นสำหรับแอปพลิเคชันบนเว็บ แม้ว่าเบราว์เซอร์ทั้งหมดจะมีกลไกการแคช แต่ก็ไม่น่าเชื่อถือและอาจไม่ได้มีบทบาทที่คาดหวังเสมอไป HTML5 ใช้อินเทอร์เฟซ ApplicationCache เพื่อแก้ปัญหาบางอย่างที่เกิดจากการใช้งานออฟไลน์
ต่อไปนี้เป็นเนื้อหาที่เกี่ยวข้องที่อธิบายกรณีแอปพลิเคชันและรหัสที่ใช้งานได้จริงของไฟล์แคชออฟไลน์ออฟไลน์ HTML5 บทช่วยสอนส่วนใหญ่พูดถึงเทคโนโลยีและความรู้บางอย่างที่เกี่ยวข้องกับ HTML5 แคชแบบออฟไลน์ สำหรับเนื้อหาเพิ่มเติมคุณสามารถเยี่ยมชม http://www.vevb.com เพื่อรับบทช่วยสอนล่าสุด ต่อไปนี้เป็นคำอธิบายการสอน:
Manifest คืออะไร? Manifest เป็นไฟล์ที่มีชื่อต่อท้ายที่สุด มันกำหนดไฟล์ที่ต้องแคชในไฟล์ เบราว์เซอร์ที่รองรับรายการจะบันทึกไฟล์ในเครื่องตามกฎของไฟล์รายการเพื่อให้สามารถเข้าถึงหน้าเว็บได้โดยไม่ต้องมีลิงก์เครือข่าย
การเข้าถึงแบบออฟไลน์กำลังมีความสำคัญมากขึ้นสำหรับแอปพลิเคชันบนเว็บ แม้ว่าเบราว์เซอร์ทั้งหมดจะมีกลไกการแคช แต่ก็ไม่น่าเชื่อถือและอาจไม่ได้มีบทบาทที่คาดหวังเสมอไป HTML5 ใช้อินเทอร์เฟซ ApplicationCache เพื่อแก้ปัญหาบางอย่างที่เกิดจากการใช้งานออฟไลน์
การใช้อินเทอร์เฟซแคชสามารถนำประโยชน์สามประการต่อไปนี้มาสู่แอปพลิเคชันของคุณ:
การเรียกดูออฟไลน์ - ผู้ใช้สามารถเรียกดูเว็บไซต์เต็มของคุณในขณะที่ออฟไลน์
ความเร็ว- ทรัพยากรที่แคชเป็นทรัพยากรในท้องถิ่นดังนั้นจึงโหลดได้เร็วขึ้น
เซิร์ฟเวอร์โหลดน้อยลง - เบราว์เซอร์ดาวน์โหลดทรัพยากรจากเซิร์ฟเวอร์ที่มีการเปลี่ยนแปลงเท่านั้น
แอพแคช (หรือที่เรียกว่า AppCache) ช่วยให้นักพัฒนาสามารถระบุไฟล์ที่เบราว์เซอร์ควรแคชสำหรับผู้ใช้ออฟไลน์เพื่อเข้าถึง แอปของคุณจะโหลดและทำงานตามปกติแม้ว่าผู้ใช้จะกดปุ่มรีเฟรชเมื่อออฟไลน์
ไฟล์ Manifest อ้างอิงในการเปิดใช้งานแอปพลิเคชันแคชสำหรับแอปพลิเคชันให้เพิ่มแอตทริบิวต์รายการในแท็ก HTML ของเอกสาร:
คุณสมบัติ Manifest สามารถชี้ไปที่ URL สัมบูรณ์หรือเส้นทางสัมพัทธ์ แต่ URL สัมบูรณ์จะต้องเหมือนกับแอปพลิเคชันเครือข่ายที่เกี่ยวข้อง ไฟล์ Manifest สามารถใช้ส่วนขยายไฟล์ใด ๆ แต่ต้องให้กับประเภท MIME ที่ถูกต้อง (ดูด้านล่าง)
<html manifest =/cache.manifest> ... </html> หรือ <html manifest = http: //www.example.com/example.mf> ... </html>
คุณควรเพิ่มคุณสมบัติรายการในแต่ละหน้าของเว็บแอปที่คุณต้องการแคช หากหน้าไม่มีแอตทริบิวต์รายการเบราว์เซอร์จะไม่แคชหน้าเว็บ (เว้นแต่จะมีการระบุไว้อย่างชัดเจนในไฟล์รายการ)
ซึ่งหมายความว่าทุกหน้าเว็บที่ผู้ใช้เรียกดูด้วยรายการจะถูกเพิ่มลงในแคชแอปพลิเคชันโดยปริยาย ดังนั้นคุณไม่จำเป็นต้องแสดงรายการแต่ละหน้าในรายการ
ไฟล์รายการจะต้องมีให้ในประเภท MIME TEXT/CACHE-MANIFEST ชื่อต่อท้ายไฟล์สามารถปรับแต่งได้ (แนะนำให้เป็น. manifest) ดังนั้นเราจำเป็นต้องประกาศประเภทไฟล์ของคำต่อท้าย .manifest manifest เป็นข้อความ/แคช-manifest บนเซิร์ฟเวอร์
นำ Apache เป็นตัวอย่างเราต้องเพิ่ม: AddType text/cache-manifest .manifest
รูปแบบรายการง่าย ๆ มีดังนี้:
แคช manifestindex.htmlstylesheet.cssimages/logo.pngscripts/main.js
ตัวอย่างนี้แคชสี่ไฟล์บนหน้าเว็บที่ระบุไฟล์รายการนี้
ประเด็นต่อไปนี้คุณต้องให้ความสนใจกับ:
สตริง Manifest แคชควรอยู่ในบรรทัดแรกและเป็นสิ่งจำเป็น
จำนวนข้อมูลแคชบนเว็บไซต์จะต้องไม่เกิน 5 MB อย่างไรก็ตามหากคุณกำลังเขียนแอพสำหรับ Chrome Web Store คุณสามารถใช้ UnlimitedStorage เพื่อ จำกัด ข้อ จำกัด ได้ไม่ จำกัด
หากไม่สามารถดาวน์โหลดไฟล์ Manifest หรือทรัพยากรที่ระบุไว้ในนั้นกระบวนการอัปเดตแคชทั้งหมดจะไม่สามารถทำได้ ในกรณีนี้เบราว์เซอร์จะใช้แคชแอปพลิเคชันดั้งเดิมต่อไป
มาดูตัวอย่างที่ซับซ้อนมากขึ้น:
Cache Manifest# 2010-06-18: v2# cached 'รายการหลักอย่างชัดเจน'.cache: /favicon.icoindex.htmlstylesheet.csssimages/logo.pngscripts/main.js# ทรัพยากรที่ต้องการให้ผู้ใช้ออนไลน์ static.html จะเสิร์ฟหาก main.py ไม่สามารถเข้าถึงได้# offline.jpg จะเสิร์ฟแทนภาพทั้งหมดในภาพ/ขนาดใหญ่/# ออฟไลน์. html จะเสิร์ฟแทนไฟล์อื่น ๆ . html filesfallback: /main.py/static.htmlimages/large/
บรรทัดที่เริ่มต้นด้วย # เป็นบรรทัดความคิดเห็น แต่สามารถใช้เพื่อวัตถุประสงค์อื่นได้เช่นกัน ตัวอย่างเช่นอัปเดตแคช
แคชแอปจะได้รับการอัปเดตเฉพาะในกรณีที่การเปลี่ยนแปลงของไฟล์รายการ ตัวอย่างเช่นหากคุณแก้ไขทรัพยากรรูปภาพหรือเปลี่ยนฟังก์ชั่น JavaScript การเปลี่ยนแปลงเหล่านี้จะไม่ทำให้ผึ้ง คุณต้องแก้ไขไฟล์รายการตัวเองเพื่อให้เบราว์เซอร์รีเฟรชไฟล์แคช สร้างบรรทัดความคิดเห็นด้วยหมายเลขเวอร์ชันที่สร้างขึ้นค่าแฮชไฟล์หรือการประทับเวลาเพื่อให้แน่ใจว่าผู้ใช้จะได้รับซอฟต์แวร์เวอร์ชันล่าสุดของคุณ
นอกจากนี้คุณยังสามารถอัปเดตแคชโดยทางโปรแกรมหลังจากเวอร์ชันใหม่ปรากฏขึ้นตามที่อธิบายไว้ในส่วนแคชการอัปเดต
หากหน้าแนะนำไฟล์แคชรายการไฟล์รายการจะต้องมีไฟล์ทั้งหมด (CSS, js, image ... ) ที่กำหนดโดยหน้าปัจจุบันมิฉะนั้นจะไม่ถูกโหลด ดังนั้นหากคุณลบไฟล์คงที่ที่ต้องแคชขอแนะนำให้เพิ่มเครื่องหมายดอกจัน* ลงในรายการเครือข่ายในไฟล์เพื่อระบุไฟล์อื่น ๆ ทั้งหมด
รายการสามารถรวมสามส่วนที่แตกต่างกัน: แคชเครือข่ายและทางเลือก
แคช:นี่คือส่วนเริ่มต้นของรายการ ไฟล์ที่แสดงภายใต้ส่วนหัวนี้จะถูกแคชอย่างชัดเจนเป็นครั้งแรก (หรือไฟล์ทันทีหลังจากแคชรายการ)
เครือข่าย:ไฟล์ที่แสดงในส่วนนี้เป็นทรัพยากรที่อนุญาตให้ใช้งานที่จำเป็นต้องเชื่อมต่อกับเซิร์ฟเวอร์ คำขอทั้งหมดไปยังทรัพยากรเหล่านี้ข้ามแคชโดยไม่คำนึงว่าผู้ใช้ออฟไลน์หรือไม่ สามารถใช้การ์ดไวด์การ์ดได้
ทางเลือก:ส่วนนี้เป็นทางเลือกและใช้เพื่อระบุหน้าทางเลือกเมื่อไม่สามารถเข้าถึงทรัพยากรได้ URI แรกแสดงถึงทรัพยากรและที่สองแสดงถึงหน้าเว็บสำรอง
จบ. บทช่วยสอนได้เสร็จสิ้นที่นี่ คุณได้รับบางสิ่งบางอย่างจากการอ่านหรือไม่? ไซต์นี้ยังมีเนื้อหาที่เกี่ยวข้องกับแคช HTML5 ออฟไลน์รายการยินดีต้อนรับสู่การอ่านต่อ