ความคิดเห็น: เว็บแอปพลิเคชันของวันนี้มีความซับซ้อนมากและด้วยการพัฒนาในปัจจุบันพวกเขาจะมีความซับซ้อนมากขึ้น แต่ก็มีข้อบกพร่องร้ายแรงและไม่สามารถแยกออกจากลิงค์อินเทอร์เน็ตได้ ดังนั้น API จะถูกเพิ่มลงใน HTML ใช้กลไกการจัดเก็บในท้องถิ่นเพื่อแก้ปัญหานี้ได้ดีและปูทางสำหรับแอปพลิเคชันเว็บออฟไลน์
คำนำ
วันนี้เว็บแอปพลิเคชันมีความซับซ้อนมากและด้วยการพัฒนาในปัจจุบันพวกเขาจะมีความซับซ้อนมากขึ้นเรื่อย ๆ แต่พวกเขามีข้อบกพร่องร้ายแรงและไม่สามารถแยกออกจากลิงค์อินเทอร์เน็ตได้ ดังนั้น API จะถูกเพิ่มลงใน HTML
มันแก้ปัญหานี้ได้ดีด้วยกลไกการจัดเก็บในท้องถิ่นปูทางสำหรับแอปพลิเคชันเว็บออฟไลน์
แคชท้องถิ่นในแคชเบราว์เซอร์
แคชท้องถิ่นใช้เพื่อให้บริการเว็บแอปพลิเคชันทั้งหมด
แคชเบราว์เซอร์ให้บริการเฉพาะเว็บเพจเดียว </p> <p> หน้าเว็บใด ๆ ที่มีแคชหน้าเว็บ
แคชท้องถิ่นแคชเฉพาะหน้าที่คุณระบุไว้ในแคช </p> <p> แคชหน้าเว็บไม่น่าเชื่อถือและไม่ปลอดภัยเพราะเราไม่ทราบว่าหน้าและทรัพยากรใดที่ถูกแคชในเว็บไซต์
แคชท้องถิ่นควบคุมเนื้อหาที่ถูกแคช
ไฟล์รายการ
แคชท้องถิ่นของเว็บแอปพลิเคชันได้รับการจัดการผ่านไฟล์รายการของแต่ละหน้า Manifest เป็นข้อความง่าย ๆ ที่ชื่อและเส้นทางของไฟล์ที่ต้องแคชและไม่จำเป็นต้องแคชในรูปแบบของรายการ
คุณสามารถระบุรายการสำหรับแต่ละหน้าหรือสำหรับแอปพลิเคชันทั้งหมด ตัวอย่างเช่นเราตั้งค่าสำหรับ hello.htm:
แคชที่ประจักษ์
แคช:
อื่น ๆ . html
hellow.js
รูปภาพ/myphoto.jpg
เครือข่าย:
Notoffline.asp
-
ทางเลือก:
online.js locale.js
แคช:
newhellow.html
newhellow.js
ในไฟล์รายการบรรทัดแรกจะต้องเป็นแคชรายการเพื่อบอกฟังก์ชั่นของข้อความนั่นคือการตั้งค่าไฟล์ทรัพยากรในแคชท้องถิ่น
เมื่อใช้งานเว็บแอปพลิเคชันออฟไลน์จริงเซิร์ฟเวอร์จะต้องมีการกำหนดค่าเพื่อเปิดใช้งานเซิร์ฟเวอร์เพื่อรองรับข้อความ MIME Type/Cache-Manifest
เมื่อระบุไฟล์ต้นฉบับไฟล์ทรัพยากรสามารถแบ่งออกเป็นสามหมวดหมู่ ได้แก่ แคชเครือข่ายและทางเลือก
เนื่องจากหากหน้ามีไฟล์รายการเบราว์เซอร์จะแคชหน้าเว็บโดยอัตโนมัติ </p> <p> หมวดหมู่เครือข่ายเป็นไฟล์ทรัพยากรที่ชัดเจนที่ไม่ได้แคช ไฟล์เหล่านี้สามารถเข้าถึงได้โดยการสร้างลิงค์ฝั่งเซิร์ฟเวอร์เท่านั้น ในตัวอย่างนี้อักขระ Wildcard * ระบุว่าสิ่งที่ไม่ได้บันทึกจะไม่ถูกแคช </p> <p> สองไฟล์ทรัพยากรที่ระบุไว้ในแต่ละบรรทัดในหมวดหมู่ทางเลือก ไฟล์ทรัพยากรแรกคือไฟล์ทรัพยากรที่สามารถใช้งานได้เมื่อเข้าถึงออนไลน์และไฟล์ที่สองเป็นไฟล์แคชท้องถิ่นที่ไม่สามารถใช้งานได้เมื่อเข้าถึงออนไลน์
เบราว์เซอร์และกระบวนการโต้ตอบเซิร์ฟเวอร์
เมื่อทำงานกับเว็บแอปพลิเคชันออฟไลน์จำเป็นต้องเข้าใจการโต้ตอบระหว่างเบราว์เซอร์และเซิร์ฟเวอร์:
ตัวอย่างเช่นหาก index.htm ถูกใช้เป็นโฮมเพจหน้าแรกจะใช้ index.manifest
cache index.htm, hello.js, hello.jpg ในไฟล์ กระบวนการสำหรับการเข้าถึงครั้งแรกมีดังนี้:
URL ขอเบราว์เซอร์
เซิร์ฟเวอร์กลับไปที่ homepage index.htm
เบราว์เซอร์แยกวิเคราะห์หน้าเว็บของ Index.htm และขอไฟล์ทรัพยากรทั้งหมดในหน้า
เซิร์ฟเวอร์ส่งคืนไฟล์ทรัพยากร
เบราว์เซอร์ประมวลผลไฟล์รายการและขอไฟล์ที่ต้องแคชในรายการ แม้ว่าจะมีการร้องขอ แต่ก็จะขออีกครั้ง
เซิร์ฟเวอร์ส่งคืนไฟล์ที่ต้องแคช
เบราว์เซอร์จะอัปเดตแคชท้องถิ่นจัดเก็บไฟล์ทรัพยากรและทริกเกอร์เหตุการณ์เพื่อแจ้งแคชท้องถิ่นเพื่ออัปเดต </p> <p> เปิด URL อีกครั้ง
ขอ URL
เบราว์เซอร์พบว่าหน้าถูกแคชดังนั้นจึงใช้ไฟล์แคชท้องถิ่น
แยกไฟล์
เบราว์เซอร์ชอบไฟล์ Manifest Server
เซิร์ฟเวอร์ส่งคืน 304 แจ้งว่าไฟล์รายการไม่เปลี่ยนแปลง (หากมีการเปลี่ยนแปลงมันจะแตกต่างกัน)
วัตถุ ApplicationCache
วัตถุนี้แสดงถึงแคชท้องถิ่นซึ่งสามารถใช้เพื่อแจ้งให้ผู้ใช้ทราบว่าแคชท้องถิ่นได้รับการปรับปรุงและยังอนุญาตให้อัปเดตด้วยตนเองของแคชท้องถิ่น
ก่อนหน้านี้เมื่อเบราว์เซอร์อัปเดตแคชท้องถิ่นและโหลดไฟล์ทรัพยากรใหม่เหตุการณ์ updateReady ของวัตถุ ApplicationCache จะถูกเรียกใช้เพื่อแจ้งแคชท้องถิ่นที่ได้รับการแก้ไขแล้วแจ้งให้ผู้ใช้รีเฟรชหน้าด้วยตนเอง
swapcache
วิธีการ SwapCache ใช้ในการอัปเดตแคชท้องถิ่นด้วยตนเอง สามารถเรียกได้เฉพาะเมื่อเหตุการณ์ updateAdy ของวัตถุ ApplicationCache ถูกเรียกใช้
นั่นคือเมื่อไฟล์ทรัพยากรเปลี่ยนแปลงคุณสามารถใช้วิธีนี้เพื่อแคชการอัปเดตด้วยตนเอง