การเข้าถึงแบบออฟไลน์มีความสำคัญมากขึ้นสำหรับแอปพลิเคชันบนเว็บ แม้ว่าเบราว์เซอร์ทั้งหมดจะมีกลไกการแคช แต่ก็ไม่น่าเชื่อถือและอาจไม่ทำงานตามที่คาดไว้เสมอไป HTML5 ใช้อินเทอร์เฟซ ApplicationCache เพื่อแก้ไขปัญหาบางอย่างที่เกิดจากการทำงานออฟไลน์
การใช้อินเทอร์เฟซแคชนำข้อดีสามประการมาสู่แอปพลิเคชันของคุณ:
Application Cache (หรือที่เรียกว่า AppCache) ช่วยให้นักพัฒนาสามารถระบุไฟล์ที่ควรแคชโดยเบราว์เซอร์เพื่อให้ผู้ใช้ออฟไลน์เข้าถึงได้ แม้ว่าผู้ใช้จะกดปุ่มรีเฟรชขณะออฟไลน์ แอปของคุณก็จะโหลดและทำงานได้ตามปกติ
ไฟล์รายการอ้างอิงหากต้องการเปิดใช้งานการแคชแอปสำหรับแอป ให้เพิ่มแอตทริบิวต์รายการให้กับแท็ก html ของเอกสาร:
แอตทริบิวต์รายการสามารถชี้ไปที่ URL แบบเต็มหรือเส้นทางสัมพัทธ์ได้ แต่ URL ที่สมบูรณ์ต้องมีต้นกำเนิดเดียวกันกับเว็บแอปพลิเคชันที่เกี่ยวข้อง ไฟล์ Manifest สามารถใช้นามสกุลไฟล์ใดก็ได้ แต่ต้องใช้ประเภท MIME ที่ถูกต้อง (ดูด้านล่าง)
<html manifest=/cache.manifest> ...</html>
หรือ
<html manifest=http://www.example.com/example.mf> ...</html>
คุณควรเพิ่มแอตทริบิวต์รายการในทุกหน้าของเว็บแอปพลิเคชันของคุณที่คุณต้องการแคช หากหน้าเว็บไม่มีแอตทริบิวต์รายการ เบราว์เซอร์จะไม่แคชหน้า (เว้นแต่แอตทริบิวต์จะแสดงรายการไว้อย่างชัดเจนในไฟล์รายการ)
ซึ่งหมายความว่าทุกหน้าเว็บที่ผู้ใช้เรียกดูซึ่งมีรายการจะถูกเพิ่มลงในแคชของแอปพลิเคชันโดยปริยาย ดังนั้นคุณไม่จำเป็นต้องแสดงรายการทุกหน้าในสินค้าคงคลังของคุณ
ไฟล์ Manifest ต้องระบุเป็นประเภท MIME ข้อความ/รายการแคช ชื่อส่วนต่อท้ายไฟล์สามารถปรับแต่งได้ (แนะนำให้ใช้ .manifest) ดังนั้นเราจึงจำเป็นต้องประกาศประเภทไฟล์ด้วยส่วนต่อท้าย .manifest เป็นข้อความ/แคช-รายการบนฝั่งเซิร์ฟเวอร์
จากตัวอย่าง apache เราต้องเพิ่ม: AddType text/cache-manifest .manifest ไปที่ httpd.conf
โครงสร้างไฟล์ Manifestรูปแบบรายการอย่างง่ายมีดังนี้:
รายการแคชindex.htmlstylesheet.cssimages/logo.pngscripts/main.js
ตัวอย่างนี้จะแคชสี่ไฟล์บนหน้าเว็บที่ระบุไฟล์รายการนี้
คุณต้องใส่ใจกับประเด็นต่อไปนี้:
ลองดูตัวอย่างที่ซับซ้อนกว่านี้:
รายการแคช # 2010-06-18:v2# แคชอย่างชัดเจน 'รายการหลัก' CACHE:/favicon.icoindex.htmlstylesheet.cssimages/logo.pngscripts/main.js# ทรัพยากรที่กำหนดให้ผู้ใช้ออนไลน์ เครือข่าย: เข้าสู่ระบบ php/myapihttp://api.twitter.com# static.html จะถูกให้บริการหาก main.py ไม่สามารถเข้าถึงได้# offline.jpg จะเป็น แสดงแทนที่รูปภาพทั้งหมดใน image/large/# offline.html จะแสดงแทนที่ไฟล์ .html อื่นๆ ทั้งหมดFALLBACK:/main.py /static.htmlimages/large/ images/offline.jpg*.html /offline.html
บรรทัดที่ขึ้นต้นด้วย # คือบรรทัดแสดงความคิดเห็น แต่สามารถใช้เพื่อวัตถุประสงค์อื่นได้เช่นกัน ตัวอย่างเช่น อัปเดตแคช
แคชของแอปจะได้รับการอัปเดตเมื่อไฟล์รายการมีการเปลี่ยนแปลงเท่านั้น ตัวอย่างเช่น หากคุณแก้ไขทรัพยากรรูปภาพหรือเปลี่ยนฟังก์ชัน JavaScript การเปลี่ยนแปลงเหล่านั้นจะไม่ถูกแคชซ้ำ คุณต้องแก้ไขไฟล์ Manifest เองเพื่อให้เบราว์เซอร์รีเฟรชไฟล์แคชได้ การสร้างบรรทัดความคิดเห็นด้วยหมายเลขเวอร์ชัน แฮชของไฟล์ หรือการประทับเวลาที่สร้างขึ้นทำให้มั่นใจได้ว่าผู้ใช้จะมีซอฟต์แวร์เวอร์ชันล่าสุด
คุณยังสามารถอัปเดตแคชโดยทางโปรแกรมเมื่อมีเวอร์ชันใหม่ให้ใช้งาน ดังที่อธิบายไว้ในส่วนการอัปเดตแคช
หากเพจแนะนำไฟล์รายการแคช ไฟล์รายการจะต้องมีไฟล์ทั้งหมด (css, js, รูปภาพ...) ที่จำเป็นสำหรับเพจปัจจุบัน ไม่เช่นนั้นไฟล์นั้นจะไม่ถูกโหลด ดังนั้น ยกเว้นไฟล์ที่ต้องแคช ขอแนะนำให้เพิ่ม NETWORK ในไฟล์ เพิ่มเครื่องหมายดอกจัน * ลงในรายการเพื่อระบุไฟล์อื่นๆ ทั้งหมด
รายการสามารถประกอบด้วยสามส่วนที่แตกต่างกัน: แคช เครือข่าย และทางเลือกสำรอง
แคช:นี่เป็นส่วนเริ่มต้นของรายการ ไฟล์ที่แสดงอยู่ภายใต้ส่วนหัวนี้ (หรือไฟล์ที่อยู่ต่อจาก CACHE MANIFEST) จะถูกแคชไว้อย่างชัดเจนหลังจากดาวน์โหลดครั้งแรก
เครือข่าย:ไฟล์ที่แสดงภายใต้ส่วนนี้เป็นทรัพยากรที่ได้รับอนุญาตซึ่งจำเป็นในการเชื่อมต่อกับเซิร์ฟเวอร์ คำขอทั้งหมดสำหรับทรัพยากรเหล่านี้จะข้ามแคชไม่ว่าผู้ใช้จะออฟไลน์หรือไม่ก็ตาม สามารถใช้ไวด์การ์ดได้
ทางเลือกสำรอง:ส่วนนี้เป็นทางเลือกและระบุหน้าทางเลือกหากไม่สามารถเข้าถึงทรัพยากรได้ URI แรกแสดงถึงทรัพยากร และอันที่สองแสดงถึงเพจสำรอง URI ทั้งสองต้องเกี่ยวข้องกันและต้องมีต้นกำเนิดเดียวกันกับไฟล์ Manifest สามารถใช้ไวด์การ์ดได้
หมายเหตุ: สามารถจัดเรียงส่วนต่างๆ ในลำดับใดก็ได้ และแต่ละส่วนสามารถปรากฏซ้ำๆ ในรายการเดียวกันได้
รายการต่อไปนี้จะกำหนดหน้าเว็บที่ครอบคลุม (offline.html) ที่จะแสดงขึ้นเมื่อผู้ใช้พยายามเข้าถึงรากของไซต์แบบออฟไลน์ และยังระบุว่าทรัพยากรอื่นๆ ทั้งหมด (เช่น บนเว็บไซต์ระยะไกล) จำเป็นต้องมีการเชื่อมต่ออินเทอร์เน็ต
รายการแคช# 2010-06-18:v3# รายการแคชอย่างชัดเจนindex.htmlcss/style.css# offline.html จะปรากฏขึ้นหากผู้ใช้ออฟไลน์FALLBACK:/// /offline.html# ทรัพยากรอื่นๆ ทั้งหมด (เช่น ไซต์) ต้องการ ผู้ใช้ที่จะออนไลน์ เครือข่าย:*# แหล่งข้อมูลเพิ่มเติมสำหรับแคชCACHE:images/logo1.pngimages/logo2.pngimages/logo3.png
โปรดทราบ: ไฟล์ HTML ที่อ้างอิงถึงไฟล์ Manifest จะถูกแคชโดยอัตโนมัติ ดังนั้นคุณไม่จำเป็นต้องเพิ่มลงในรายการของคุณ แต่เราขอแนะนำให้คุณเพิ่ม
หมายเหตุ: ส่วนหัวแคช HTTP และขีดจำกัดแคชที่ตั้งไว้ในเพจที่แสดงผ่าน SSL จะถูกแทนที่ด้วยรายการแคช ดังนั้นหน้าเว็บที่แสดงผ่าน https จึงสามารถทำงานแบบออฟไลน์ได้
อัปเดตแคชแอปจะยังคงถูกแคชขณะออฟไลน์ เว้นแต่จะเกิดเงื่อนไขข้อใดข้อหนึ่งต่อไปนี้:
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network