Contact Picker API ทำให้ผู้ใช้สามารถแชร์รายชื่อติดต่อจากรายการรายชื่อติดต่อของตนได้อย่างง่ายดาย
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
เครื่องมือเลือกจะแสดงเฉพาะชื่อและหมายเลขโทรศัพท์เท่านั้น
การกดรายชื่อติดต่อค้างไว้จะแสดงข้อมูลทั้งหมดที่จะแชร์หากเลือกรายชื่อติดต่อนั้น (ดูรูปภาพติดต่อแมวเชสเชอร์)
ไม่มีการถาวรของสิทธิ์
การเข้าถึงรายชื่อติดต่อเป็นแบบออนดีมานด์และจะไม่คงอยู่ ทุกครั้งที่เว็บไซต์ต้องการเข้าถึง จะต้องเรียกใช้ navigator.contacts.select()
ด้วยท่าทางสัมผัสของผู้ใช้ และผู้ใช้ต้องเลือกรายชื่อติดต่อที่ต้องการแชร์กับเว็บไซต์ทีละรายการ
ความคิดเห็น
ทีม Chrome อยากทราบความคิดเห็นของคุณเกี่ยวกับ Contact Picker API
มีปัญหาในการติดตั้งใช้งานใช่ไหม
คุณพบข้อบกพร่องในการติดตั้งใช้งาน Chrome ไหม หรือการใช้งานแตกต่างจากข้อกําหนดหรือไม่
- รายงานข้อบกพร่องที่ https://new.crbug.com อย่าลืมระบุรายละเอียดให้มากที่สุด ระบุวิธีการง่ายๆ ในการทําให้เกิดข้อบกพร่องซ้ำ และตั้งค่าคอมโพเนนต์เป็น
Blink>Contacts
Glitch เหมาะสำหรับการแชร์ การทำซ้ำโจทย์ที่ง่ายและรวดเร็ว
หากกำลังวางแผนที่จะใช้ API
คุณกำลังวางแผนที่จะใช้ Contact Picker API ใช่ไหม การสนับสนุนแบบสาธารณะของคุณจะช่วยให้ทีม Chrome จัดลำดับความสำคัญของฟีเจอร์ต่างๆ ได้ และแสดงให้เห็นว่าการสนับสนุนฟีเจอร์เหล่านี้สำคัญเพียงใดต่อผู้ให้บริการเบราว์เซอร์รายอื่นๆ
- แชร์ว่าคุณวางแผนจะใช้ WICG อย่างไรในชุดข้อความ Discourse ของ WICG
- ส่งทวีตไปยัง @ChromiumDev โดยใช้แฮชแท็ก
#ContactPicker
และ แจ้งให้เราทราบถึงตำแหน่งและวิธีที่คุณใช้
ลิงก์ที่มีประโยชน์
- คำอธิบายแบบสาธารณะ
- ข้อกำหนดของเครื่องมือเลือกรายชื่อติดต่อ
- การสาธิต Contact Picker API และแหล่งที่มาการสาธิต Contact Picker API
- ข้อบกพร่องในการติดตาม
- รายการ ChromeStatus.com
- คอมโพเนนต์ Blink:
Blink>Contacts
ขอขอบคุณ
ขอขอบคุณ Finnur Thorarinsson และ Rayan Kanso ที่นำฟีเจอร์นี้ไปใช้ และ Peter Beverloo ที่มีโค้ดที่ผมขโมยและนำไปปรับโครงสร้างภายในการสาธิต
ป.ล. ชื่อในเครื่องมือเลือกรายชื่อติดต่อของฉันคือตัวละครจาก "อลิซในแดนมหัศจรรย์"