เนื่องจากการเชื่อมต่ออินเทอร์เน็ตนั้นไม่เสถียรหรือใช้ไม่ได้ คุณจึงต้องพิจารณาออฟไลน์ก่อน โดยเขียนแอปเสมือนว่าไม่มีการเชื่อมต่ออินเทอร์เน็ต เมื่อแอปทำงานแบบออฟไลน์ได้ ให้เพิ่มฟังก์ชันการทำงานของเครือข่าย ที่คุณต้องการเพื่อให้แอปทำงานได้มากขึ้นเมื่อออนไลน์ อ่านต่อเพื่อดูเคล็ดลับ การนำแอปที่ใช้งานแบบออฟไลน์ได้ไปใช้
ภาพรวม
แอป Chrome รับสิ่งต่อไปนี้ได้ฟรี
- ไฟล์ของแอป รวมถึง JavaScript, CSS และแบบอักษรทั้งหมดของแอป รวมถึงทรัพยากรอื่นๆ ที่ต้องใช้ (เช่น รูปภาพ) จะดาวน์โหลดแล้ว
- แอปของคุณสามารถบันทึกและ (ไม่บังคับ) ซิงค์ข้อมูลจํานวนเล็กน้อยโดยใช้ Chrome Storage API
- แอปของคุณสามารถตรวจจับการเปลี่ยนแปลงในการเชื่อมต่อได้โดยการฟังเหตุการณ์ออนไลน์และออฟไลน์
แต่ความสามารถเหล่านั้นไม่เพียงพอที่จะรับประกันว่าแอปของคุณจะทำงานแบบออฟไลน์ได้ แอปที่เปิดใช้แบบออฟไลน์ ควรเป็นไปตามกฎต่อไปนี้
- ใช้ข้อมูลภายในเครื่องทุกครั้งที่เป็นไปได้
- เมื่อใช้แหล่งข้อมูลจากอินเทอร์เน็ต ให้ใช้
XMLHttpRequest
เพื่อดาวน์โหลดทรัพยากรดังกล่าวจากนั้นจึงบันทึกข้อมูลไว้ในเครื่อง คุณจะใช้ Chrome Storage API, IndexedDB หรือ Filesystem API เพื่อบันทึกข้อมูลไว้ในเครื่องได้ - แยก UI ของแอปออกจากข้อมูล
- การแยก UI และข้อมูลไม่เพียงช่วยปรับปรุงการออกแบบของแอปและช่วยให้การใช้งานออฟไลน์ง่ายขึ้นเท่านั้น แต่ยังทำให้คุณนำเสนอมุมมองอื่นๆ ของข้อมูลผู้ใช้ได้อีกด้วย เฟรมเวิร์ก MVC ช่วยให้คุณแยก UI และข้อมูลออกจากกันได้
- สมมติว่าแอปของคุณสามารถปิดได้ทุกเมื่อ
- บันทึกสถานะของแอปพลิเคชัน (ทั้งในเครื่องและจากระยะไกล เมื่อเป็นไปได้) เพื่อให้ผู้ใช้ดำเนินการต่อจากที่ค้างไว้ได้
- ทดสอบแอปอย่างละเอียด
- ตรวจสอบว่าแอปทำงานได้ดีทั้งในสถานการณ์ทั่วไปและสถานการณ์ที่ซับซ้อน
ข้อจำกัดด้านความปลอดภัย
แอป Chrome มีข้อจำกัดด้านตำแหน่งสำหรับวางทรัพยากรต่างๆ ดังนี้
- เนื่องจากข้อมูลในเครื่องของผู้ใช้จะมองเห็นได้ในอุปกรณ์ของผู้ใช้และไม่สามารถเข้ารหัสได้อย่างปลอดภัย ข้อมูลที่ละเอียดอ่อนจะต้องอยู่บนเซิร์ฟเวอร์ เช่น ห้ามจัดเก็บรหัสผ่านหรือหมายเลขบัตรเครดิตไว้ในเครื่อง
- JavaScript ทั้งหมดที่แอปเรียกใช้ต้องอยู่ในแพ็กเกจของแอป แทรกในบรรทัดได้ไม่ได้
เริ่มแรกสไตล์ CSS รูปภาพ และแบบอักษรจะอยู่ในแพ็กเกจของแอปหรือ URL ระยะไกล หากทรัพยากรเป็นทรัพยากรระยะไกล คุณจะไม่สามารถระบุทรัพยากรใน HTML ได้ โปรดดึงข้อมูลโดยใช้
XMLHttpRequest
แทน (ดูการอ้างอิงแหล่งข้อมูลภายนอก) จากนั้นอ้างอิงถึงข้อมูลด้วย URL ของ Blob หรือ (ดีกว่า) บันทึกแล้วโหลดข้อมูลโดยใช้ Filesystem API
แต่โหลดทรัพยากรสื่อขนาดใหญ่ เช่น วิดีโอและเสียงจากเว็บไซต์ภายนอกได้ สาเหตุหนึ่งที่ทําให้กฎมีข้อยกเว้นนี้คือองค์ประกอบ <video>
และ <audio>
ทํางานสํารองที่ดีเมื่อแอปมีการเชื่อมต่อจํากัดหรือไม่มีการเชื่อมต่อ อีกเหตุผลหนึ่งคือขณะนี้การดึงข้อมูลและแสดงสื่อด้วย XMLHttpRequest
และ URL ของ BLOB ไม่อนุญาตให้สตรีมหรือบัฟเฟอร์บางส่วน
หากต้องการระบุ iframe ที่ทำแซนด์บ็อกซ์ คุณสร้างแท็ก <webview>
ได้ เนื้อหาอาจเป็นระยะไกลได้ แต่จะไม่มีสิทธิ์เข้าถึง API ของแอป Chrome โดยตรง (ดูฝังหน้าเว็บภายนอก)
ข้อจำกัดบางอย่างในแอป Chrome บังคับใช้โดยนโยบายรักษาความปลอดภัยเนื้อหา (CSP) ซึ่งจะเป็นไปตามนี้เสมอและแอป Chrome จะเปลี่ยนแปลงไม่ได้
default-src 'self';
connect-src * data: blob: filesystem:;
style-src 'self' blob: data: filesystem: 'unsafe-inline';
img-src 'self' blob: data: filesystem:;
frame-src 'self' blob: data: filesystem:;
font-src 'self' blob: data: filesystem:;
media-src * data: blob: filesystem:;
กำลังระบุ offline_enabled
โดยมีสมมติฐานว่าแอปทํางานได้ดีเมื่อออฟไลน์ หากไม่ คุณควรโฆษณาข้อเท็จจริงดังกล่าวเพื่อให้ไอคอนเปิดตัวจางลงเมื่อผู้ใช้ออฟไลน์ ในการดำเนินการนี้ ให้ตั้งค่า offline_enabled
เป็น false
ในไฟล์ Manifest ของแอป
{
"name": "My app",
...
"offline_enabled": false,
...
}
บันทึกข้อมูลไว้ในเครื่อง
ตารางต่อไปนี้แสดงตัวเลือกสำหรับการบันทึกข้อมูลไว้ในเครื่อง (ดูเพิ่มเติมที่จัดการข้อมูล)
API | การใช้งานที่ดีที่สุด | Notes |
---|---|---|
API พื้นที่เก็บข้อมูลของ Chrome | ข้อมูลสตริงจํานวนน้อย | เหมาะสำหรับการตั้งค่าและสถานะ ซิงค์จากระยะไกลได้อย่างง่ายดาย (แต่คุณไม่จำเป็นต้องดำเนินการ) ไม่ดีสำหรับข้อมูลจำนวนมากเนื่องจากโควต้า |
API IndexedDB | Structured Data | เปิดใช้การค้นหาข้อมูลอย่างรวดเร็ว ใช้กับสิทธิ์ unlimitedStorage |
API ระบบไฟล์ | อื่นๆ | มีพื้นที่แซนด์บ็อกซ์ที่คุณสามารถจัดเก็บไฟล์ได้ ใช้กับสิทธิ์ unlimitedStorage |
การบันทึกข้อมูลจากระยะไกล
โดยทั่วไปแล้ว คุณจะบันทึกข้อมูลจากระยะไกลได้อย่างไร แต่เฟรมเวิร์กและ API บางอย่างอาจช่วยได้ (ดูสถาปัตยกรรม MVC) หากคุณใช้ Chrome Storage API ระบบจะซิงค์ข้อมูลที่ซิงค์ได้ทั้งหมดโดยอัตโนมัติทุกครั้งที่แอปออนไลน์และผู้ใช้ลงชื่อเข้าใช้ Chrome หากผู้ใช้ไม่ได้ลงชื่อเข้าใช้ ก็จะได้รับข้อความแจ้งให้ลงชื่อเข้าใช้ อย่างไรก็ตาม โปรดทราบว่าข้อมูลที่ซิงค์ของผู้ใช้จะถูกลบหากผู้ใช้ถอนการติดตั้งแอปของคุณ {คำถาม: true?}
ลองบันทึกข้อมูลผู้ใช้ไว้อย่างน้อย 30 วันหลังจากถอนการติดตั้งแอป เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีหากติดตั้งแอปของคุณอีกครั้ง
การแยก UI ออกจากข้อมูล
การใช้เฟรมเวิร์ก MVC จะช่วยให้คุณออกแบบและใช้งานแอปได้ เพื่อให้มีการแยกข้อมูลออกจากมุมมองของแอปในข้อมูลอย่างสิ้นเชิง ดูรายการเฟรมเวิร์ก MVC ได้ที่สถาปัตยกรรมMVC
หากแอปพูดคุยกับเซิร์ฟเวอร์ที่กำหนดเอง เซิร์ฟเวอร์ควรให้ข้อมูลแก่คุณ ไม่ใช่เป็นกลุ่ม HTML นึกถึง RESTful API
เมื่อแยกข้อมูลออกจากแอปแล้ว จะให้มุมมองข้อมูลแบบทางเลือกได้ง่ายขึ้นมาก เช่น คุณอาจให้มุมมองเว็บไซต์สำหรับข้อมูลสาธารณะ ข้อมูลพร็อพเพอร์ตี้เว็บไซต์ไม่เพียงมีประโยชน์เมื่อผู้ใช้ไม่ได้อยู่ที่ Chrome เท่านั้น แต่ยังทำให้เครื่องมือค้นหาดูข้อมูลได้ด้วย
การทดสอบ
ตรวจสอบว่าแอปทำงานได้ดีในสถานการณ์ต่อไปนี้
- ติดตั้งแอปแล้ว แล้วจะออฟไลน์ทันที กล่าวคือ การใช้งานครั้งแรกในแอปจะเป็นแบบออฟไลน์
- ระบบจะติดตั้งแอปลงในคอมพิวเตอร์เครื่องหนึ่งแล้วซิงค์กับอีกเครื่องหนึ่ง
- ถอนการติดตั้งแอปแล้วจึงติดตั้งอีกครั้งทันที
- แอปกำลังทำงานบนคอมพิวเตอร์ 2 เครื่องในเวลาเดียวกัน โดยมีโปรไฟล์เดียวกัน แอปต้องทำงานได้สมเหตุผลเมื่อคอมพิวเตอร์เครื่องหนึ่งออฟไลน์ ผู้ใช้ทำสิ่งต่างๆ มากมายบนคอมพิวเตอร์ แล้วคอมพิวเตอร์ก็ออนไลน์อีกครั้ง
- แอปมีการเชื่อมต่อที่ไม่สม่ำเสมอ มักเป็นการเชื่อมต่อออนไลน์และออฟไลน์
นอกจากนี้ โปรดตรวจสอบว่าแอปบันทึกไม่มีข้อมูลที่ละเอียดอ่อนของผู้ใช้ (เช่น รหัสผ่าน) ไว้ในเครื่องของผู้ใช้