Application Cache HTML5

ด้วยการใช้แคชแอปพลิเคชัน จากการสร้างไฟล์ manifest cache สามารถสร้างสมรรถนะแคชแอปพลิเคชัน web ออฟไลน์ง่ายๆ

อะไรคือแคชแอปพลิเคชัน?

HTML5 ได้นำเสนอความช่วยเหลือแคชแอปพลิเคชัน (Application Cache) ซึ่งหมายความว่าสามารถคลังเก็บ web แอปพลิเคชัน และสามารถเข้าถึงได้โดยไม่มีการเชื่อมต่ออินเตอร์เน็ต

ความสามารถสามของความช่วยเหลือแคชของแอปพลิเคชันคือ:

  1. การเข้าถึงออฟไลน์ - ผู้ใช้สามารถใช้งานได้เมื่อแอปพลิเคชันอยู่ในสถานะออฟไลน์
  2. ความเร็ว - ทรัพยากรที่ถูกคลังเก็บจะโหลดเร็วขึ้น
  3. ลดปริมาณเราะงานของเซิร์ฟเวอร์ - บราวเซอร์จะดาวน์โหลดทรัพยากรที่ถูกปรับปรุงหรือเปลี่ยนแปลง

การสนับสนุนโดยบราวเซอร์

ตัวเลขในตารางชี้ถึงสัปดาห์เวอร์ชั่นของบราวเซอร์ที่สนับสนุน Application Cache อย่างเต็มที่:

API
Application Cache 4.0 10.0 3.5 4.0 11.5

ตัวอย่าง HTML Cache Manifest

ตัวอย่างด้านล่างแสดงเอกสาร HTML ที่มี cache manifest (สำหรับการเข้าถึงออฟไลน์):

ตัวอย่าง

!DOCTYPE HTML
<html manifest="demo.appcache">
<body>
เนื้อหาเอกสาร ......
</body>
</html>

ลองด้วยตัวเอง

Cache Manifest ฐาน

เพื่อใช้งานแอปพลิเคชันคาช์ โปรดรวม manifest attribute ในแท็ก <html>:

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

หน้าที่มี manifest จะถูกคั่นค้างเมื่อผู้ใช้เข้าถึงหน้านั้น ถ้าไม่มีการระบุ manifest attribute หน้านั้นจะไม่ถูกคั่นค้าง (เว้นแต่หน้านั้นถูกระบุในไฟล์ manifest):

ไฟล์ขนาดแนะนำของไฟล์ manifest คือ: ".appcache":

注意：ไฟล์ manifest จะต้องการการตั้งค่า MIME-type ที่ถูกต้อง คือ "text/cache-manifest" จะต้องทำการตั้งค่าในเซิร์ฟเวอร์เว็บ:

Manifest ไฟล์

ไฟล์ manifest คือไฟล์ข้อความที่เรียบร้อย มันบอกเล่าแก่บราวเซอร์ว่าสิ่งที่จะถูกคั่นค้าง (และสิ่งที่จะไม่ถูกคั่นค้าง):

ไฟล์ manifest มีสามส่วน:

  • CACHE MANIFEST - ไฟล์ที่ระบุในหัวข้อนี้จะถูกคั่นค้างหลังจากการดาวน์โหลดครั้งแรก:
  • NETWORK - ไฟล์ที่ระบุในหัวข้อนี้จะต้องมีการเชื่อมต่อกับเซิร์ฟเวอร์ และจะไม่ถูกคั่นค้าง:
  • FALLBACK - ไฟล์ที่ระบุในหัวข้อนี้จะเป็นหน้าที่กลับมาใช้เมื่อหน้าเว็บไม่สามารถเข้าถึง (เช่น หน้า 404):

CACHE MANIFEST

บรรทัดแรก CACHE MANIFEST คือสิ่งที่จำเป็น:

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

ไฟล์ manifest ด้านบนระบุสามทรัพยากร: ไฟล์ CSS หนึ่ง, ภาพ GIF หนึ่ง และไฟล์ JavaScript หนึ่ง ตอนที่ไฟล์ manifest ถูกโหลด บราวเซอร์จะดาวน์โหลดสามไฟล์ดังกล่าวจากไดเรกทอรีเซิร์ฟเวอร์ของเว็บไซต์ หลังจากนั้น ทรัพยากรนี้ยังคงสามารถใช้งานได้ถึงแม้ว่าผู้ใช้จะตัดการเชื่อมต่อกับอินเตอร์เน็ตเรียบร้อย:

NETWORK

ความหมายของNETWORKส่วนนี้กำหนดไฟล์ "login.php" จะไม่ถูกคั่นค้างและไม่สามารถใช้งานเมื่อออฟไลน์:

NETWORK:
login.asp

สามารถใช้สัญลักษณ์ '*' ในบรรทัดนี้เพื่อบอกว่าทุกทรัพยากร/ไฟล์อื่นที่เหลือต้องมีการเชื่อมต่ออินเทอร์เน็ตด้วย

NETWORK:
*
FALLBACK

ส่วน FALLBACK ด้านล่างนี้กำหนดว่าถ้าไม่สามารถติดต่อเครือข่ายอินเทอร์เน็ต ให้ใช้ 'offline.html' แทนที่ทุกไฟล์ในไดเรกทอรี /html/ ดังนี้：

FALLBACK:
/html/ /offline.html

หมายเหตุ：URI หนึ่งเป็นทรัพยากร และอีกอันเป็นแทนที่

ปรับปรุงความเก็บเคลือบ

เมื่อโปรแกรมถูกเก็บเคลือบ มันจะคงอยู่ในความเก็บเคลือบจนกระทั่งเกิดสถานการณ์ดังนี้：

  • การล้างความเก็บเคลือบของผู้ใช้
  • manifest ไฟล์ถูกปรับปรุง (ดูคำแนะนำด้านล่าง)
  • ปรับปรุงความเก็บเคลือบโดยโปรแกรม

ตัวอย่าง - ไฟล์ Cache Manifest ที่เต็มทั้งหมด

CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html

คำแนะนำ：บรรทัดที่เริ่มด้วย '#' คือบรรทัดหมายเหตุ แต่ยังสามารถใช้สำหรับวัตถุประสงค์อื่น ๆ ความเก็บเคลือบของโปรแกรมจะถูกปรับปรุงเมื่อmanifest ไฟล์เปลี่ยนแปลง หากคุณแก้ไขภาพหรือปรับปรุงฟังก์ชัน JavaScript การเปลี่ยนแปลงเหล่านั้นจะไม่ถูกเก็บเคลือบอีกครั้ง การปรับปรุงวันที่และเลขสรุปในบรรทัดหมายเหตุเป็นวิธีหนึ่งที่ให้บราวเซอร์เก็บเคลือบไฟล์อีกครั้ง

ความเกี่ยวข้องที่เกี่ยวกับความรับรู้เกี่ยวกับแบบการเก็บเคลือบของโปรแกรม

โปรดระมัดระวังเนื้อหาที่ควบคุมโดยแบบการเก็บเคลือบ

เมื่อไฟล์ถูกควบคุมโดยแบบการเก็บเคลือบ บราวเซอร์จะยังแสดงแบบที่ถูกเก็บเคลือบไว้ แม้ว่าคุณจะเปลี่ยนไฟล์บนเซิร์ฟเวอร์เพิ่มเติม มีทางเลือกที่จะปรับปรุง manifest ไฟล์เพื่อที่จะให้บราวเซอร์ปรับปรุงความเก็บเคลือบ

หมายเหตุ：ความจำของแบบการนำทางบริการความรวบรวมของเว็บบราวเซอร์อาจแตกต่างกัน (บางเว็บบราวเซอร์มีการจำกัดเป็นแบบ 5MB ต่อเว็บไซต์)