แคชแอปพลิเคชัน HTML5

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

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

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 ฐาน

เพื่อใช้งาน cache manifest โปรดรวมคุณสมบัติ manifest ในแท็ก <html>:

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

หน้าที่มี manifest จะถูกทำคลังเมื่อผู้ใช้เข้าถึง หากไม่มีการระบุ manifest ในหน้าที่ หน้าเว็บจะไม่ถูกทำคลัง (ยกเว้นถ้าหน้าเว็บนี้ถูกระบุใน 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

บทที่ 1 ส่วน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)