ด้วยแคชใช้มันเป็นเรื่องง่ายที่จะทำให้รุ่นออฟไลน์ของแอพลิเคชันเว็บโดยการสร้างแคชไฟล์ Manifest
แอพลิเคชันแคชคืออะไร?
HTML5 นำเสนอแคชใช้ซึ่งหมายความว่าโปรแกรมเว็บแคชและสามารถเข้าถึงได้โดยไม่ต้องเชื่อมต่ออินเทอร์เน็ต
แคชใช้ให้แอปพลิเคสามข้อได้เปรียบ:
- การเรียกดูแบบออฟไลน์ - ผู้ใช้สามารถใช้โปรแกรมเมื่อพวกเขากำลังออฟไลน์
- Speed - ทรัพยากรที่แคชโหลดได้เร็วขึ้น
- ลดภาระของเซิร์ฟเวอร์ - เบราว์เซอร์จะดาวน์โหลดเฉพาะการปรับปรุง / เปลี่ยนทรัพยากรจากเซิร์ฟเวอร์
พื้นหลัง
การใช้งานเว็บประกอบด้วยหน้าเว็บที่จะต้องมีการดาวน์โหลดจากเครือข่าย นี้จะเกิดขึ้นจะต้องมีการเชื่อมต่อเครือข่าย แต่มีหลายกรณีเมื่อผู้ใช้ไม่สามารถเชื่อมต่อกับเครือข่ายเนื่องจากสถานการณ์ที่อยู่นอกเหนือการควบคุมของพวกเขา HTML5 ให้ความสามารถในการเข้าถึงโปรแกรมประยุกต์บนเว็บได้โดยไม่ต้องเชื่อมต่อเครือข่ายโดยใช้ประจักษ์แคช
การใช้งานเว็บประกอบด้วยทรัพยากรระบุ URL ที่ เหล่านี้สามารถเป็น HTML, CSS, JavaScript, ภาพหรือแหล่งอื่น ๆ ที่จำเป็นสำหรับโปรแกรมประยุกต์บนเว็บที่จะแสดงผล ที่อยู่ของพวกเขาสามารถคัดลอกลงในไฟล์ Manifest ซึ่งสามารถได้รับการปรับปรุงอย่างสม่ำเสมอโดยผู้เขียนโปรแกรมประยุกต์บนเว็บที่ระบุที่อยู่เว็บใหม่ใด ๆ ที่มีการเพิ่มหรือลบ เมื่อเชื่อมต่อกับเครือข่ายเป็นครั้งแรกที่เว็บเบราเซอร์จะอ่านไฟล์ Manifest HTML5 ดาวน์โหลดทรัพยากรที่กำหนดและเก็บไว้ในประเทศ จากนั้นในกรณีที่ไม่มีการเชื่อมต่อเครือข่ายที่เว็บเบราเซอร์จะเปลี่ยนไปสำเนาท้องถิ่นแทนและทำให้โปรแกรมประยุกต์บนเว็บแบบออฟไลน์
สนับสนุนเบราว์เซอร์
ตัวเลขในตารางระบุราว์เซอร์รุ่นแรกที่รองรับแอพลิเคชันแคช
| API | |||||
|---|---|---|---|---|---|
| Application Cache | 4.0 | 10.0 | 3.5 | 4.0 | 11.5 |
HTML แคช Manifest ตัวอย่าง
ตัวอย่างด้านล่างแสดงเอกสาร HTML กับประจักษ์แคช (for offline browsing) :
ตัวอย่าง
<!DOCTYPE HTML>
<html manifest="demo.appcache">
<body>
The content of the document......
</body>
</html> ลองตัวเอง» แคชข้อมูลพื้นฐานเกี่ยวกับ Manifest
ในการสั่งซื้อสำหรับการใช้งานแบบออฟไลน์ในการทำงานแคชไฟล์ manifest จะต้องสร้างขึ้นโดยนักพัฒนาเว็บ หากโปรแกรมประยุกต์บนเว็บเกินมากกว่าหนึ่งหน้าแล้วแต่ละหน้าจะต้องมีคุณลักษณะที่ประจักษ์ที่ชี้ไปที่ประจักษ์แคช หน้าอ้างอิงประจักษ์ทุกคนจะถูกเก็บไว้ในเครื่อง ไฟล์ manifest แคชไฟล์ข้อความที่ตั้งอยู่ในส่วนหนึ่งของเซิร์ฟเวอร์อื่น มันจะต้องเสิร์ฟกับชนิดของเนื้อหาดังต่อไปนี้:
text/cache-manifest
ต้องการเปิดใช้งานแคชใช้รวมถึง manifest แอตทริบิวต์ในเอกสาร <html> แท็ก:
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
หน้าเว็บที่มีทุก manifest แอตทริบิวต์ที่ระบุไว้จะถูกเก็บไว้เมื่อผู้ใช้เข้าชมมัน หาก manifest แอตทริบิวต์ไม่ได้ระบุหน้าจะไม่ถูกเก็บไว้ (unless the page is specified directly in the manifest file)
นามสกุลไฟล์ที่แนะนำสำหรับไฟล์ที่ชัดแจ้งคือ ".appcache"
ไฟล์ Manifest จะต้องมีการเสิร์ฟกับ correct media type ซึ่งเป็น "text/cache-manifest" จะต้องกำหนดค่าบนเว็บเซิร์ฟเวอร์
ไฟล์ manifest
ไฟล์ manifest เป็นไฟล์ข้อความที่เรียบง่ายซึ่งบอกเบราว์เซอร์ว่าจะแคช (and what to never cache)
ไฟล์ Manifest มีสามส่วน:
- CACHE MANIFEST - ไฟล์ระบุอยู่ในหัวข้อนี้จะถูกเก็บไว้หลังจากที่พวกเขาจะถูกดาวน์โหลดครั้งแรก
- NETWORK - ไฟล์ระบุอยู่ในหัวข้อนี้จำเป็นต้องมีการเชื่อมต่อไปยังเซิร์ฟเวอร์และจะไม่ถูกเก็บไว้
- FALLBACK - ไฟล์ระบุอยู่ในหัวข้อนี้ระบุหน้าสำรองถ้าหน้าไม่สามารถเข้าถึงได้
CACHE MANIFEST
บรรทัดแรกแคช MANIFEST เป็นสิ่งจำเป็น:
CACHE MANIFEST
/theme.css
/logo.gif
/main.js
แฟ้มแสดงรายการข้างต้นแสดงรายการสามทรัพยากร: ไฟล์ CSS, รูป GIF และไฟล์ JavaScript เมื่อไฟล์ Manifest โหลดเบราเซอร์จะดาวน์โหลดไฟล์จากสามไดเรกทอรีรากของเว็บไซต์ จากนั้นเมื่อใดก็ตามที่ผู้ใช้ไม่ได้เชื่อมต่อกับอินเทอร์เน็ตทรัพยากรจะยังคงอยู่
เครือข่าย
ส่วนเครือข่ายด้านล่างระบุว่าแฟ้ม "login.asp" ไม่ควรจะเก็บไว้และจะไม่สามารถใช้ได้ออฟไลน์:
NETWORK:
login.asp
เครื่องหมายดอกจันสามารถนำมาใช้เพื่อแสดงให้เห็นว่าทุกแหล่งข้อมูลอื่น ๆ / ไฟล์ต้องมีการเชื่อมต่ออินเทอร์เน็ต:
NETWORK:
*
รั้งท้าย
ส่วนทางเลือกด้านล่างระบุว่า "offline.html" จะได้รับบริการในสถานที่ของไฟล์ทั้งหมดใน / html / แคตตาล็อกในกรณีที่การเชื่อมต่ออินเทอร์เน็ตไม่สามารถสร้าง:
FALLBACK:
/html/ /offline.html
หมายเหตุ: ครั้งแรก URI เป็นทรัพยากรที่สองเป็นทางเลือกสำรอง
การอัปเดตแคช
เมื่อโปรแกรมแคชแคชมันยังคงอยู่จนกระทั่งหนึ่งต่อไปนี้เกิดขึ้น:
- ผู้ใช้จะล้างแคชของเบราเซอร์
- ไฟล์ Manifest มีการปรับเปลี่ยน (see tip below)
- แคชแอพลิเคชันที่มีการปรับปรุงโปรแกรม
ตัวอย่าง - แคชสมบูรณ์ไฟล์ Manifest
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
Tip: เส้นที่ขึ้นต้นด้วย "#" มีเส้นแสดงความคิดเห็น แต่ยังสามารถตอบสนองวัตถุประสงค์อื่น แคชของแอพลิเคชันที่มีการปรับปรุงเฉพาะเมื่อมีการเปลี่ยนแปลงไฟล์อย่างชัดแจ้ง ถ้าคุณแก้ไขภาพหรือเปลี่ยนฟังก์ชัน JavaScript การเปลี่ยนแปลงเหล่านั้นจะไม่ได้รับการเก็บไว้ชั่วคราว การอัปเดตวันที่และรุ่นในสายความคิดเห็นเป็นวิธีหนึ่งที่จะทำให้เบราว์เซอร์ใหม่แคชไฟล์ของคุณ
หมายเหตุเกี่ยวกับแคชแอพลิเคชัน
โปรดใช้ความระมัดระวังกับสิ่งที่คุณแคช
เมื่อไฟล์เป็นแคชเบราว์เซอร์จะยังคงแสดงเวอร์ชันแคชแม้ว่าคุณจะเปลี่ยนไฟล์บนเซิร์ฟเวอร์ เพื่อให้แน่ใจว่าการปรับปรุงเบราว์เซอร์แคชคุณจำเป็นต้องเปลี่ยนไฟล์ manifest
หมายเหตุ: เบราว์เซอร์อาจจะมีขีด จำกัด ของขนาดที่แตกต่างกันสำหรับข้อมูลแคช (some browsers have a 5MB limit per site)