การสนับสนุนการพัฒนาแอปพลิเคชันเว็บแบบออฟไลน์ถือเป็นจุดสนใจอีกประการหนึ่งของ HTML5 สิ่งที่เรียกว่าเว็บแอปพลิเคชันออฟไลน์คือแอปพลิเคชันที่ยังคงสามารถทำงานได้แม้ในขณะที่อุปกรณ์ไม่สามารถเข้าถึงอินเทอร์เน็ตได้
การพัฒนาแอปพลิเคชันเว็บแบบออฟไลน์ต้องใช้หลายขั้นตอน สิ่งแรกคือต้องแน่ใจว่าแอปรู้ว่าอุปกรณ์มีการเข้าถึงอินเทอร์เน็ตหรือไม่เพื่อให้สามารถดำเนินการที่ถูกต้องต่อไปได้ จากนั้น แอปพลิเคชันจะต้องมีสิทธิ์เข้าถึงทรัพยากรบางอย่าง (รูปภาพ, Javascript, CSS ฯลฯ) เพื่อให้ทำงานได้อย่างถูกต้อง ดีที่สุด จะต้องมีพื้นที่สำหรับผู้ใช้ในการบันทึกข้อมูล และการอ่านและการเขียนจะไม่ถูกขัดขวางไม่ว่าพวกเขาจะเข้าถึงอินเทอร์เน็ตหรือไม่ก็ตาม
HTML5 และ API ที่เกี่ยวข้องทำให้การพัฒนาแอปพลิเคชันออฟไลน์เป็นจริง
การตรวจจับแบบออฟไลน์หากต้องการทราบว่าอุปกรณ์ออนไลน์หรือออฟไลน์ HTML5 จะกำหนดแอตทริบิวต์ navigator.onLine ค่า true บ่งชี้ว่าอุปกรณ์สามารถเข้าถึงอินเทอร์เน็ตได้ และค่า false บ่งชี้ว่าอุปกรณ์ออฟไลน์อยู่
if (navigator.onLine) { // ทำงานตามปกติ} else { // ดำเนินงานในสถานะออฟไลน์}เนื่องจาก navigator.onLine มีปัญหาความเข้ากันได้บางประการ นอกเหนือจากแอตทริบิวต์ navigator.onLine เพื่อให้สามารถระบุได้ดีขึ้นว่าเครือข่ายพร้อมใช้งานหรือไม่ HTML5 จึงกำหนดสองกิจกรรม คือ ออนไลน์และออฟไลน์
เหตุการณ์ทั้งสองนี้ถูกทริกเกอร์บนวัตถุหน้าต่างเมื่อเครือข่ายสลับระหว่างออฟไลน์และออนไลน์:
window.addEventListener('online', function() { // ทำงานได้ตามปกติ}); window.addEventListener('offline', function() { // ดำเนินการงานเมื่อออฟไลน์});ในการใช้งานจริง วิธีที่ดีที่สุดคือรับสถานะเริ่มต้นผ่าน navigator.onLine หลังจากโหลดเพจแล้ว จากนั้นใช้สองเหตุการณ์ข้างต้นเพื่อพิจารณาว่าสถานะการเชื่อมต่อเครือข่ายเปลี่ยนแปลงหรือไม่ เมื่อเหตุการณ์ข้างต้นถูกทริกเกอร์ ค่าของคุณสมบัติ navigator.onLine ก็จะเปลี่ยนแปลงเช่นกัน แต่คุณสมบัตินี้จะต้องถูกสำรวจด้วยตนเองเพื่อตรวจจับการเปลี่ยนแปลงในสถานะเครือข่าย
แคชแอปพลิเคชันแคชแอปพลิเคชันของ HTML5 หรือเรียกสั้น ๆ ว่า appcache ได้รับการออกแบบมาโดยเฉพาะสำหรับการพัฒนาแอปพลิเคชันเว็บออฟไลน์ Appcache เป็นพื้นที่แคชที่แยกออกจากแคชของเบราว์เซอร์ หากต้องการบันทึกข้อมูลในแคชนี้ ให้ใช้ไฟล์ Manifest ที่แสดงรายการทรัพยากรที่จะดาวน์โหลดและแคช ตัวอย่างไฟล์คำอธิบาย:
รายการแคช # Commentfile.jsfile.css
จากนั้นเสนอราคาเป็น html:
<html รายการ=./xxx.manifest>
ประเภท MIME ของไฟล์ xxx.manifest ต้องเป็นข้อความ/รายการแคช
แกนหลักของ API นี้คือออบเจ็กต์ applicationCache ออบเจ็กต์นี้มีแอตทริบิวต์สถานะเป็นค่าคงที่ ซึ่งระบุสถานะปัจจุบันของแคชของแอปพลิเคชัน:
เหตุการณ์ที่เกี่ยวข้อง:
โดยทั่วไป เหตุการณ์เหล่านี้จะถูกทริกเกอร์ตามลำดับที่กล่าวไว้ข้างต้นเมื่อโหลดหน้าเว็บ เหตุการณ์ข้างต้นสามารถเรียกได้ด้วยตนเองโดยการเรียกเมธอด update()
การจัดเก็บข้อมูล คุกกี้คุกกี้ HTTP ซึ่งมักเรียกว่าคุกกี้โดยตรง ถูกใช้บนไคลเอนต์เพื่อจัดเก็บข้อมูลเซสชัน มาตรฐานกำหนดให้เซิร์ฟเวอร์ส่งส่วนหัว Set-Cookie HTTP ซึ่งเป็นส่วนหนึ่งของการตอบสนองต่อคำขอ HTTP ใด ๆ ซึ่งมีข้อมูลเซสชัน ตัวอย่างส่วนหัวการตอบกลับของเซิร์ฟเวอร์:
HTTP/1.1 200 ตกลง
ประเภทเนื้อหา: ข้อความ/html
ชุดคุกกี้: ชื่อ = ค่า
ส่วนหัวอื่น ๆ : other-header-value
เบราว์เซอร์จะตั้งค่าคุกกี้ข้อมูลเซสชัน จากนั้นเพิ่มส่วนหัว Cookie HTTP ลงในแต่ละคำขอเพื่อส่งข้อมูลกลับไปยังเซิร์ฟเวอร์ ดังที่แสดงด้านล่าง:
รับ /index.html HTTP/1.1
คุกกี้: ชื่อ=ค่า
ส่วนหัวอื่น ๆ : other-header-value
ข้อมูลเพิ่มเติมที่ส่งกลับไปยังเซิร์ฟเวอร์สามารถใช้เพื่อตรวจสอบที่ไม่ซ้ำกันว่าคำขอใดที่ไคลเอ็นต์มาจาก
คุกกี้ที่สมบูรณ์ประกอบด้วย: