ออฟไลน์ก่อน

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

ภาพรวม

แอป 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:;

กำลังระบุออฟไลน์_enabled

โดยสมมติว่าแอปของคุณทํางานได้ดีเมื่อออฟไลน์ หากไม่มี คุณควรโฆษณาข้อเท็จจริงนั้นเพื่อ ไอคอนเปิดใช้งานจะเป็นสีจางเมื่อผู้ใช้อยู่ในสถานะออฟไลน์ โดยตั้งค่า offline_enabled เป็น false ในไฟล์ Manifest ของแอป

{
  "name": "My app",
  ...
  "offline_enabled": false,
  ...
}

การบันทึกข้อมูลในเครื่อง

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

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

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

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

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

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

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

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

การทดสอบ

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

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

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