ตั้งแต่ Chrome 115 เป็นต้นไป กิจกรรมบนเว็บที่เชื่อถือได้ (TWA) จะส่งข้อความได้โดยใช้ postMessage เอกสารนี้จะอธิบายการตั้งค่าที่จําเป็นในการสื่อสารระหว่างแอปกับเว็บ
เมื่ออ่านคู่มือนี้จนจบ คุณจะทําสิ่งต่อไปนี้ได้
- ทําความเข้าใจวิธีการทํางานของโปรแกรมรับส่งอีเมลและการตรวจสอบเนื้อหาเว็บ
- ทราบวิธีเริ่มต้นช่องทางการสื่อสารระหว่างไคลเอ็นต์กับเนื้อหาเว็บ
- ทราบวิธีส่งและรับข้อความจากเนื้อหาเว็บ
คุณต้องมีสิ่งต่อไปนี้จึงจะทำตามคู่มือนี้ได้
- วิธีเพิ่มไลบรารี androidx.browser (ขั้นต่ำ v1.6.0-alpha02) เวอร์ชันล่าสุดลงในไฟล์ build.gradle
- Chrome เวอร์ชัน 115.0.5790.13 ขึ้นไปสำหรับ TWA
เมธอด window.postMessage() เปิดใช้การสื่อสารข้ามแหล่งที่มาระหว่างออบเจ็กต์ Window อย่างปลอดภัย เช่น ระหว่างหน้าเว็บกับป๊อปอัปที่สร้างขึ้น หรือระหว่างหน้าเว็บกับ iframe ที่ฝังอยู่ภายใน
โดยปกติแล้ว สคริปต์ในหน้าต่างๆ จะอนุญาตให้เข้าถึงกันได้ก็ต่อเมื่อหน้าเหล่านั้นมาจากต้นทางเดียวกัน ใช้โปรโตคอล หมายเลขพอร์ต และโฮสต์เดียวกัน (หรือที่เรียกว่านโยบายต้นทางเดียวกัน) วิธีการ window.postMessage() มีกลไกที่มีการควบคุมเพื่อสื่อสารระหว่างต้นทางต่างๆ อย่างปลอดภัย ซึ่งอาจมีประโยชน์ในการใช้งานแอปพลิเคชันแชท เครื่องมือการทำงานร่วมกัน และอื่นๆ ตัวอย่างเช่น แอปพลิเคชันแชทอาจใช้ postMessage เพื่อส่งข้อความระหว่างผู้ใช้ที่อยู่ในเว็บไซต์ต่างๆ
การใช้ postMessage ในกิจกรรมในเว็บซึ่งเชื่อถือได้ (TWA) อาจเป็นเรื่องยากสักหน่อย คู่มือนี้จะอธิบายวิธีใช้ postMessage ในไคลเอ็นต์ TWA เพื่อส่งและรับข้อความจากหน้าเว็บ
เพิ่มแอปลงในการตรวจสอบเว็บ
postMessage API ช่วยให้ต้นทางที่ถูกต้อง 2 แหล่งสื่อสารกันได้ โดยต้นทางหนึ่งจะเป็นต้นทางเป้าหมาย แอปพลิเคชัน Android จะต้องประกาศว่าแหล่งที่มาของแอปพลิเคชันนั้นเทียบเท่าแหล่งที่มาใดจึงจะส่งข้อความไปยังต้นทางเป้าหมายได้ ซึ่งทำได้ด้วยลิงก์เนื้อหาดิจิทัล (DAL) โดยเพิ่มชื่อแพ็กเกจของแอปในไฟล์ assetlinks.json โดยมีความสัมพันธ์เป็น use_as_origin ดังนี้
[{
"relation": ["delegate_permission/common.use_as_origin"],
"target" : { "namespace": "android_app", "package_name": "com.example.app", "sha256_cert_fingerprints": [""] }
}]
โปรดทราบว่าการตั้งค่าในต้นทางที่เชื่อมโยงกับ TWA จะต้องระบุต้นทางสำหรับช่อง MessageEvent.origin แต่สามารถใช้ postMessage เพื่อสื่อสารกับเว็บไซต์อื่นๆ ที่ไม่มีลิงก์ชิ้นงานดิจิทัลได้ ตัวอย่างเช่น หากคุณเป็นเจ้าของ www.example.com คุณจะต้องพิสูจน์ผ่าน DAL แต่สามารถสื่อสารกับเว็บไซต์อื่นๆ เช่น www.wikipedia.org ได้
เพิ่ม PostMessageService ลงในไฟล์ Manifest
หากต้องการรับการสื่อสารจาก postMessage คุณต้องตั้งค่าบริการ โดยเพิ่ม PostMessageService ในไฟล์ Manifest ของ Android ดังนี้
<service android:name="androidx.browser.customtabs.PostMessageService"
android:exported="true"/>
รับอินสแตนซ์ CustomTabsSession
หลังจากเพิ่มบริการลงในไฟล์ Manifest แล้ว ให้ใช้คลาส CustomTabsClient เพื่อเชื่อมโยงบริการ เมื่อเชื่อมต่อแล้ว คุณจะใช้ไคลเอ็นต์ที่ให้มาเพื่อสร้างเซสชันใหม่ได้ดังนี้
CustomTabsSession เป็นคลาสหลักสำหรับจัดการ postMessage API โค้ดต่อไปนี้แสดงวิธีที่เมื่อเชื่อมต่อบริการแล้ว ระบบจะใช้ไคลเอ็นต์เพื่อสร้างเซสชันใหม่ ซึ่งจะใช้เซสชันนี้เพื่อpostMessage
private CustomTabsClient mClient;
private CustomTabsSession mSession;
// We use this helper method to return the preferred package to use for
// Custom Tabs.
String packageName = CustomTabsClient.getPackageName(this, null);
// Binding the service to (packageName).
CustomTabsClient.bindCustomTabsService(this, packageName, new CustomTabsServiceConnection() {
@Override
public void onCustomTabsServiceConnected(@NonNull