เครื่องมือเลือกรายชื่อติดต่อสำหรับเว็บ

Contact Picker API ทำให้ผู้ใช้สามารถแชร์รายชื่อติดต่อจากรายการรายชื่อติดต่อของตนได้อย่างง่ายดาย

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

ข้อกำหนดของ Contact Picker API พร้อมใช้งานใน Chrome 80 บน Android M ขึ้นไป ซึ่งเป็น API แบบออนดีมานด์ที่ช่วยให้ผู้ใช้เลือกรายการจากรายชื่อติดต่อและแชร์รายละเอียดที่จํากัดของรายการที่เลือกกับเว็บไซต์ได้ ซึ่งช่วยให้ผู้ใช้แชร์เฉพาะสิ่งที่ต้องการเมื่อต้องการ และช่วยให้ผู้ใช้เข้าถึงและเชื่อมต่อกับเพื่อนและครอบครัวได้ง่ายขึ้น

เช่น โปรแกรมรับส่งอีเมลแบบเว็บอาจใช้ Contact Picker API เพื่อเลือกผู้รับอีเมล แอป VoIP อาจค้นหาหมายเลขโทรศัพท์ที่จะโทร หรือโซเชียลเน็ตเวิร์กอาจช่วยให้ผู้ใช้ค้นพบว่าเพื่อนๆ คนไหนเข้าร่วมแล้ว

การใช้ Contact Picker API

Contact Picker API ต้องใช้การเรียกเมธอดที่มีพารามิเตอร์ options ซึ่งระบุประเภทข้อมูลติดต่อที่ต้องการ วิธีที่สองจะบอกคุณว่าระบบพื้นฐานจะให้ข้อมูลใดบ้าง

การตรวจหาองค์ประกอบ

หากต้องการตรวจสอบว่าระบบรองรับ Contact Picker API หรือไม่ ให้ใช้

const supported = ('contacts' in navigator && 'ContactsManager' in window);

นอกจากนี้ เครื่องมือเลือกรายชื่อติดต่อใน Android ต้องใช้ Android M ขึ้นไป

การเปิดเครื่องมือเลือกรายชื่อติดต่อ

จุดแรกเข้าของ Contact Picker API คือ navigator.contacts.select() เมื่อเรียกใช้ ระบบจะแสดงสัญญาและแสดงเครื่องมือเลือกรายชื่อติดต่อ ซึ่งช่วยให้ผู้ใช้เลือกรายชื่อติดต่อที่ต้องการแชร์กับเว็บไซต์ได้ หลังจากเลือกสิ่งที่จะแชร์แล้วคลิกเสร็จสิ้น ระบบจะแสดงรายการผู้ติดต่อที่ผู้ใช้เลือก

เมื่อเรียกใช้ select() คุณต้องระบุอาร์เรย์ของพร็อพเพอร์ตี้ที่ต้องการแสดงผลเป็นพารามิเตอร์แรก (ค่าที่อนุญาตคือ 'name', 'email', 'tel', 'address' หรือ 'icon') และเลือกได้ว่าจะให้ระบบเลือกผู้ติดต่อได้หลายรายเป็นพารามิเตอร์ที่ 2 หรือไม่

const props = ['name', 'email', 'tel', 'address', 'icon'];
const opts = {multiple: true};

try {
 
const contacts = await navigator.contacts.select(props, opts);
  handleResults
(contacts);
} catch (ex) {
 
// Handle any errors here.
}

Contacts Picker API สามารถเรียกใช้ได้จากบริบทการท่องเว็บระดับบนสุดที่ปลอดภัยเท่านั้น และต้องใช้ท่าทางสัมผัสของผู้ใช้เช่นเดียวกับ API ที่มีประสิทธิภาพอื่นๆ

กำลังตรวจหาพร็อพเพอร์ตี้ที่พร้อมใช้งาน

หากต้องการตรวจหาพร็อพเพอร์ตี้ที่ใช้ได้ ให้เรียกใช้ navigator.contacts.getProperties() โดยจะแสดงผลพรอมต์ที่แก้ไขด้วยอาร์เรย์สตริงที่ระบุพร็อพเพอร์ตี้ที่ใช้ได้ เช่น ['name', 'email', 'tel', 'address'] คุณสามารถส่งค่าเหล่านี้ไปยัง select() ได้

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

การจัดการผลลัพธ์

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

ตัวอย่างเช่น หากเว็บไซต์ขอ name, email และ tel และผู้ใช้เลือกรายชื่อติดต่อรายการเดียวที่มีข้อมูลในช่องชื่อ ระบุหมายเลขโทรศัพท์ 2 หมายเลข แต่ไม่มีอีเมล คำตอบที่แสดงจะเป็นดังนี้

[{
 
"email": [],
 
"name": ["Queen O'Hearts"],
 
"tel": ["+1-206-555-1000", "+1-206-555-1111"]
}]

ความปลอดภัยและสิทธิ์

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

การควบคุมของผู้ใช้

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

ถ่ายภาพหน้าจอ ผู้ใช้เลือกพร็อพเพอร์ตี้ที่จะแชร์ได้
ผู้ใช้เลือกที่จะไม่แชร์พร็อพเพอร์ตี้บางรายการได้ ในภาพหน้าจอนี้ ผู้ใช้ได้ยกเลิกการเลือกปุ่ม "หมายเลขโทรศัพท์" แม้ว่าเว็บไซต์จะขอหมายเลขโทรศัพท์ แต่ระบบจะไม่แชร์หมายเลขดังกล่าวกับเว็บไซต์

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

ความโปร่งใส

เพื่อชี้แจงว่ารายละเอียดการติดต่อใดที่กำลังได้รับการแชร์ เครื่องมือเลือกจะแสดงชื่อและไอคอนของผู้ติดต่อ รวมทั้งพร็อพเพอร์ตี้ที่ไซต์ขอเสมอ เช่น หากเว็บไซต์ขอ name, email และ tel พร็อพเพอร์ตี้ทั้ง 3 รายการจะแสดงในเครื่องมือเลือก หรือในกรณีที่เว็บไซต์ขอเฉพาะ tel เครื่องมือเลือกจะแสดงเฉพาะชื่อและหมายเลขโทรศัพท์เท่านั้น

ภาพหน้าจอเครื่องมือเลือกสำหรับเว็บไซต์ที่ขอพร็อพเพอร์ตี้ทั้งหมด
เครื่องมือเลือก เว็บไซต์ที่ขอ name, email และ tel เลือกผู้ติดต่อ 1 ราย
ภาพหน้าจอเครื่องมือเลือกสำหรับเว็บไซต์ที่ขอเฉพาะหมายเลขโทรศัพท์
เครื่องมือเลือก เว็บไซต์ขอเฉพาะ tel เลือกผู้ติดต่อ 1 ราย
ภาพหน้าจอของเครื่องมือเลือกเมื่อมีการกดรายชื่อติดต่อค้างไว้
ผลลัพธ์ของการกดรายชื่อติดต่อค้างไว้

การกดรายชื่อติดต่อค้างไว้จะแสดงข้อมูลทั้งหมดที่จะแชร์หากเลือกรายชื่อติดต่อนั้น (ดูรูปภาพติดต่อแมวเชสเชอร์)

ไม่มีการถาวรของสิทธิ์

การเข้าถึงรายชื่อติดต่อเป็นแบบออนดีมานด์และจะไม่คงอยู่ ทุกครั้งที่เว็บไซต์ต้องการเข้าถึง จะต้องเรียกใช้ navigator.contacts.select() ด้วยท่าทางสัมผัสของผู้ใช้ และผู้ใช้ต้องเลือกรายชื่อติดต่อที่ต้องการแชร์กับเว็บไซต์ทีละรายการ

ความคิดเห็น

ทีม Chrome อยากทราบความคิดเห็นของคุณเกี่ยวกับ Contact Picker API

มีปัญหาในการติดตั้งใช้งานใช่ไหม

คุณพบข้อบกพร่องในการติดตั้งใช้งาน Chrome ไหม หรือการใช้งานแตกต่างจากข้อกําหนดหรือไม่

  • รายงานข้อบกพร่องที่ https://new.crbug.com อย่าลืมระบุรายละเอียดให้มากที่สุด ระบุวิธีการง่ายๆ ในการทําให้เกิดข้อบกพร่องซ้ำ และตั้งค่าคอมโพเนนต์เป็น Blink>Contacts Glitch เหมาะสำหรับการแชร์ การทำซ้ำโจทย์ที่ง่ายและรวดเร็ว

หากกำลังวางแผนที่จะใช้ API

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

ลิงก์ที่มีประโยชน์

ขอขอบคุณ

ขอขอบคุณ Finnur Thorarinsson และ Rayan Kanso ที่นำฟีเจอร์นี้ไปใช้ และ Peter Beverloo ที่มีโค้ดที่ผมขโมยและนำไปปรับโครงสร้างภายในการสาธิต

ป.ล. ชื่อในเครื่องมือเลือกรายชื่อติดต่อของฉันคือตัวละครจาก "อลิซในแดนมหัศจรรย์"