ออฟไลน์ก่อน

เนื่องจากการเชื่อมต่ออินเทอร์เน็ตนั้นไม่เสถียรหรือใช้ไม่ได้ คุณจึงต้องพิจารณาออฟไลน์ก่อน โดยเขียนแอปเสมือนว่าไม่มีการเชื่อมต่ออินเทอร์เน็ต เมื่อแอปทำงานแบบออฟไลน์ได้ ให้เพิ่มฟังก์ชันการทำงานของเครือข่าย ที่คุณต้องการเพื่อให้แอปทำงานได้มากขึ้นเมื่อออนไลน์ อ่านต่อเพื่อดูเคล็ดลับ การนำแอปที่ใช้งานแบบออฟไลน์ได้ไปใช้

ภาพรวม

แอป 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 IndexedDBStructured Dataเปิดใช้การค้นหาข้อมูลอย่างรวดเร็ว ใช้กับสิทธิ์ unlimitedStorage
API ระบบไฟล์อื่นๆมีพื้นที่แซนด์บ็อกซ์ที่คุณสามารถจัดเก็บไฟล์ได้ ใช้กับสิทธิ์ unlimitedStorage

การบันทึกข้อมูลจากระยะไกล

โดยทั่วไปแล้ว คุณจะบันทึกข้อมูลจากระยะไกลได้อย่างไร แต่เฟรมเวิร์กและ API บางอย่างอาจช่วยได้ (ดูสถาปัตยกรรม MVC) หากคุณใช้ Chrome Storage API ระบบจะซิงค์ข้อมูลที่ซิงค์ได้ทั้งหมดโดยอัตโนมัติทุกครั้งที่แอปออนไลน์และผู้ใช้ลงชื่อเข้าใช้ Chrome หากผู้ใช้ไม่ได้ลงชื่อเข้าใช้ ก็จะได้รับข้อความแจ้งให้ลงชื่อเข้าใช้ อย่างไรก็ตาม โปรดทราบว่าข้อมูลที่ซิงค์ของผู้ใช้จะถูกลบหากผู้ใช้ถอนการติดตั้งแอปของคุณ {คำถาม: true?}

ลองบันทึกข้อมูลผู้ใช้ไว้อย่างน้อย 30 วันหลังจากถอนการติดตั้งแอป เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีหากติดตั้งแอปของคุณอีกครั้ง

การแยก UI ออกจากข้อมูล

การใช้เฟรมเวิร์ก MVC จะช่วยให้คุณออกแบบและใช้งานแอปได้ เพื่อให้มีการแยกข้อมูลออกจากมุมมองของแอปในข้อมูลอย่างสิ้นเชิง ดูรายการเฟรมเวิร์ก MVC ได้ที่สถาปัตยกรรมMVC

หากแอปพูดคุยกับเซิร์ฟเวอร์ที่กำหนดเอง เซิร์ฟเวอร์ควรให้ข้อมูลแก่คุณ ไม่ใช่เป็นกลุ่ม HTML นึกถึง RESTful API

เมื่อแยกข้อมูลออกจากแอปแล้ว จะให้มุมมองข้อมูลแบบทางเลือกได้ง่ายขึ้นมาก เช่น คุณอาจให้มุมมองเว็บไซต์สำหรับข้อมูลสาธารณะ ข้อมูลพร็อพเพอร์ตี้เว็บไซต์ไม่เพียงมีประโยชน์เมื่อผู้ใช้ไม่ได้อยู่ที่ Chrome เท่านั้น แต่ยังทำให้เครื่องมือค้นหาดูข้อมูลได้ด้วย

การทดสอบ

ตรวจสอบว่าแอปทำงานได้ดีในสถานการณ์ต่อไปนี้

  • ติดตั้งแอปแล้ว แล้วจะออฟไลน์ทันที กล่าวคือ การใช้งานครั้งแรกในแอปจะเป็นแบบออฟไลน์
  • ระบบจะติดตั้งแอปลงในคอมพิวเตอร์เครื่องหนึ่งแล้วซิงค์กับอีกเครื่องหนึ่ง
  • ถอนการติดตั้งแอปแล้วจึงติดตั้งอีกครั้งทันที
  • แอปกำลังทำงานบนคอมพิวเตอร์ 2 เครื่องในเวลาเดียวกัน โดยมีโปรไฟล์เดียวกัน แอปต้องทำงานได้สมเหตุผลเมื่อคอมพิวเตอร์เครื่องหนึ่งออฟไลน์ ผู้ใช้ทำสิ่งต่างๆ มากมายบนคอมพิวเตอร์ แล้วคอมพิวเตอร์ก็ออนไลน์อีกครั้ง
  • แอปมีการเชื่อมต่อที่ไม่สม่ำเสมอ มักเป็นการเชื่อมต่อออนไลน์และออฟไลน์

นอกจากนี้ โปรดตรวจสอบว่าแอปบันทึกไม่มีข้อมูลที่ละเอียดอ่อนของผู้ใช้ (เช่น รหัสผ่าน) ไว้ในเครื่องของผู้ใช้