Contact Picker API ทำให้ผู้ใช้สามารถแชร์รายชื่อติดต่อจากรายการรายชื่อติดต่อของตนได้อย่างง่ายดาย
Contact Picker API คืออะไร
การเข้าถึงรายชื่อติดต่อของผู้ใช้บนอุปกรณ์เคลื่อนที่เป็นฟีเจอร์ของแอป iOS/Android มาตั้งแต่ (เกือบ) รุ่งเช้า คำขอเป็นหนึ่งในฟีเจอร์ที่ใช้กันมากที่สุด เราได้ยินมาจากนักพัฒนาเว็บและว่าเป็นเหตุผลสำคัญที่นักพัฒนาสร้าง iOS/Android แอป
ข้อกำหนดของ API เครื่องมือเลือกรายชื่อติดต่อมีให้บริการตั้งแต่ Chrome 80 ใน Android M ขึ้นไป API แบบออนดีมานด์ ซึ่งอนุญาตให้ผู้ใช้เลือกรายการจากข้อมูลรายชื่อติดต่อและ แชร์รายละเอียดอย่างจำกัดของรายการที่เลือกกับเว็บไซต์ ทำให้ผู้ใช้ แชร์เฉพาะสิ่งที่ตนต้องการ เมื่อต้องการ และช่วยให้ผู้ใช้ ติดต่อสื่อสารและติดต่อกับเพื่อนและครอบครัวได้
ตัวอย่างเช่น โปรแกรมรับส่งอีเมลแบบเว็บสามารถใช้ Contact Picker API เพื่อ เลือกผู้รับอีเมล แอปเสียงบรรยายค้นหาได้ หมายเลขโทรศัพท์ที่จะโทร หรือโซเชียลเน็ตเวิร์กอาจช่วยให้ผู้ใช้ค้นพบ ที่เพื่อนเข้าร่วมแล้ว
การใช้ API เครื่องมือเลือกรายชื่อติดต่อ
Contact Picker API กำหนดให้มีการเรียกเมธอดด้วยพารามิเตอร์ตัวเลือกที่ ระบุประเภทข้อมูลติดต่อที่คุณต้องการ วิธีที่ 2 จะบอกคุณ ข้อมูลที่ระบบพื้นฐานจะแสดง
การตรวจหาฟีเจอร์
หากต้องการตรวจสอบว่าระบบรองรับ 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.
}
สามารถเรียก API เครื่องมือเลือกรายชื่อติดต่อได้จากที่ปลอดภัยเท่านั้น บริบทการท่องเว็บระดับบนสุด และก็เหมือนกับ API ที่มีประสิทธิภาพอื่นๆ ที่ต้องมี ท่าทางสัมผัสของผู้ใช้
กำลังตรวจหาพร็อพเพอร์ตี้ที่พร้อมใช้งาน
หากต้องการตรวจหาพร็อพเพอร์ตี้ที่พร้อมใช้งาน โปรดโทรหา navigator.contacts.getProperties()
โดยจะแสดงสัญญาที่แก้ไขได้ด้วยอาร์เรย์ของสตริงที่ระบุ
พร้อมให้บริการ เช่น ['name', 'email', 'tel', 'address']
คุณส่งค่าเหล่านี้ไปยัง select()
ได้
โปรดทราบว่าพร็อพเพอร์ตี้อาจไม่พร้อมให้บริการเสมอไป และอาจมีพร็อพเพอร์ตี้ใหม่ เพิ่ม แล้ว ในอนาคต แพลตฟอร์มและแหล่งที่มาของรายชื่อติดต่ออื่นๆ อาจจำกัด พร็อพเพอร์ตี้ที่จะแชร์
การจัดการกับผลลัพธ์
Contact Picker API จะแสดงผลอาร์เรย์ของรายชื่อติดต่อ และรายชื่อติดต่อแต่ละรายการจะมี อาร์เรย์ของพร็อพเพอร์ตี้ที่ขอ หากผู้ติดต่อไม่มีข้อมูลสำหรับ ที่ส่งคำขอ หรือผู้ใช้เลือกที่จะไม่ใช้การแชร์ API จะแสดงผลอาร์เรย์ที่ว่างเปล่า (ฉันอธิบายวิธีที่ผู้ใช้เลือกพร็อพเพอร์ตี้ ในส่วนการควบคุมของผู้ใช้)
เช่น หากเว็บไซต์ขอ name
, email
และ tel
และผู้ใช้
เลือกรายชื่อติดต่อเดียวที่มีข้อมูลในฟิลด์ชื่อ ระบุ
หมายเลขโทรศัพท์ แต่ไม่มีอีเมล การตอบกลับจะเป็นดังนี้
[{
"email": [],
"name": ["Queen O'Hearts"],
"tel": ["+1-206-555-1000", "+1-206-555-1111"]
}]
ความปลอดภัยและสิทธิ์
ทีม Chrome ออกแบบและติดตั้ง Contact Picker API โดยใช้ หลักการที่กำหนดไว้ใน การควบคุมการเข้าถึงฟีเจอร์แพลตฟอร์มเว็บที่มีประสิทธิภาพ ซึ่งรวมถึงการควบคุมของผู้ใช้ ความโปร่งใส และการยศาสตร์ ฉันจะอธิบายทีละข้อ
การควบคุมของผู้ใช้
การเข้าถึงของผู้ใช้ ผู้ติดต่อผ่านเครื่องมือเลือก และจะโทรหาได้เฉพาะกับ ท่าทางสัมผัสของผู้ใช้ ในบริบทการท่องเว็บระดับบนสุดที่ปลอดภัย การดำเนินการนี้จะทำให้เว็บไซต์แสดงเครื่องมือเลือกในการโหลดหน้าเว็บหรือแสดงแบบสุ่มไม่ได้ เครื่องมือเลือกโดยไม่มีบริบทใดๆ
ไม่มีตัวเลือกในการเลือกรายชื่อติดต่อทั้งหมดพร้อมกันหลายรายการ เพื่อจูงใจให้ผู้ใช้ เพื่อเลือกเฉพาะรายชื่อติดต่อที่ต้องการใช้ ร่วมกัน เว็บไซต์ของคุณ ผู้ใช้ยังควบคุมได้ว่าจะแชร์พร็อพเพอร์ตี้ใดกับเว็บไซต์บ้าง โดยการสลับปุ่มพร็อพเพอร์ตี้ที่ด้านบนของเครื่องมือเลือก
ความโปร่งใส
เพื่อชี้แจงว่ารายละเอียดรายชื่อติดต่อใดที่ได้รับการแชร์ เครื่องมือเลือกเสมอ
แสดงชื่อและไอคอนของผู้ติดต่อ รวมทั้งพร็อพเพอร์ตี้ต่างๆ ที่ไซต์มี
ที่ขอ ตัวอย่างเช่น หากเว็บไซต์ขอ name
, email
และ tel
พร็อพเพอร์ตี้ทั้ง 3 รายการ
จะแสดงในเครื่องมือเลือก หรือ
หากเว็บไซต์ขอแค่ tel
เท่านั้น เครื่องมือเลือกจะแสดงเฉพาะชื่อ และ
หมายเลขโทรศัพท์
การกดค้างที่ผู้ติดต่อจะแสดงข้อมูลทั้งหมดที่จะ แชร์หากมีการเลือกรายชื่อติดต่อไว้ (ดูรูปภาพการติดต่อของแมว Cheshire)
ไม่มีการถาวรของสิทธิ์
การเข้าถึงรายชื่อติดต่อจะทำได้แบบออนดีมานด์และคงอยู่ตลอดไป ทุกครั้งที่เว็บไซต์ต้องการ
การดำเนินการนี้ต้องเรียกใช้ navigator.contacts.select()
ด้วยท่าทางสัมผัสของผู้ใช้
และผู้ใช้จะต้องเลือกรายชื่อติดต่อที่ต้องการแชร์
กับเว็บไซต์
ความคิดเห็น
ทีม Chrome ต้องการทราบเกี่ยวกับประสบการณ์ที่คุณได้รับจากเครื่องมือเลือกรายชื่อติดต่อ API
หากมีปัญหาในการติดตั้งใช้งาน
คุณพบข้อบกพร่องในการติดตั้งใช้งาน Chrome ไหม หรือเป็นการติดตั้งใช้งาน แตกต่างจากข้อกำหนด
- รายงานข้อบกพร่องที่ https://new.crbug.com ตรวจสอบว่าได้ใส่
ให้ละเอียดที่สุด บอกวิธีการง่ายๆ ในการจำลองข้อบกพร่อง และ
ตั้งค่า Components เป็น
Blink>Contacts
Glitch ทำงานได้ดีมาก สำหรับการทำซ้ำโจทย์ที่ง่ายและรวดเร็ว
หากกำลังวางแผนที่จะใช้ API
คุณวางแผนที่จะใช้ Contact Picker API หรือไม่ การสนับสนุนแบบสาธารณะของคุณจะช่วย ให้ทีม Chrome จัดลำดับความสำคัญของฟีเจอร์ต่างๆ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นเห็นว่า ที่สำคัญคือต้องสนับสนุนพวกเขา
- แชร์วิธีที่คุณวางแผนจะใช้ในชุดข้อความของ WICG Discourse
- ส่งทวีตไปยัง @ChromiumDev โดยใช้แฮชแท็ก
#ContactPicker
และ แจ้งให้เราทราบว่าคุณใช้งานที่ไหนและอย่างไร
ลิงก์ที่มีประโยชน์
- คำอธิบายแบบสาธารณะ
- ข้อกำหนดสำหรับเครื่องมือเลือกรายชื่อติดต่อ
- การสาธิต Contact Picker API และแหล่งที่มาการสาธิต Contact Picker API
- ข้อบกพร่องในการติดตาม
- รายการ ChromeStatus.com
- คอมโพเนนต์การกะพริบ:
Blink>Contacts
ขอขอบคุณ
ขอขอบคุณ Finnur Thorarinsson และ Rayan Kanso ที่
ที่นำฟีเจอร์นี้มาใช้ และ Peter Beverloo
รหัส ขี้อาย
ขโมยและเปลี่ยนโครงสร้างภายในโค้ดสำหรับการสาธิต
หมายเหตุ: ชื่อในเครื่องมือเลือกรายชื่อติดต่อของฉันเป็นตัวละครจาก Alice in Wonderland