Contacts Picker API

Introduction

Android and IOS applications (native apps) inherently had the capability to access contact list of a user. Ofcouse the user needs to provide permission for that (I think) but it was there. The web however did not have this feature.

Starting from chrome 80, we have support for this feature on android. The user experience is not as great or as powerful as native implementation, but it is not bad by any means. I can see usage of this feature in let's say

1. Share trip data to contacts.
2. Share gift purchase information.
3. Upload and share contact information with ease.
4. Sending mails to people from contact list, gone are the days when you need to remember email ids.

and much more...

Demo

Run this application on an android device using the chrome browser.

Source Code

Check the source code on codesandbox.

Getting started

1. We need a https domain for this feature to work. Usually these powerful features need extra security for good reasons usually.
2. Chrome browser version should be >= 80, which was released in Feb, 2020

3. Check if contacts is supported by the browser.

   const supported = "contacts" in navigator && "ContactsManager" in window;

4. Use the async method to prompt the user to select permission and then pick the contacts.

   const props = ["name", "email", "tel"];
   const opts = { multiple: true };
   const contacts = await navigator.contacts.select(props, opts);

5. Contacts are an array of objects, so loop through this data and manipulate it as you wish.
6. Bonus point, I used ant-design for this project. This allowed me to create this beautiful UI really fast.

Conclusion

I believe this feature is production ready and going forward we can see companies adopting this feature to make better user experiences. Although a compatibility issue is there, but it a "nice" step forward.