Today we are waiting for the release of Chrome 80 , which means that the Contact Picker API is coming out of Origin Trials into adulthood , which allows us to provide the site with access to user-selected contacts from his notebook. In this article we will analyze the opportunities that have appeared, and some, perhaps, non-obvious points.
What is this and why?
Imagine: you want to invite your friend to your favorite site; make an online order and want to specify the contact number of the wife as the recipient; call a taxi for a colleague and indicate his number as the passenger number (yes, I understand that the most popular case is here first, but I also encountered the others in the last month) or else somehow and somewhere you indicate the phone number from your notebook . What are you doing? Turn off the browser or application, open the Phone application, from where you go to Contacts, look for the desired entry, go into it, copy the number, open the browser or application again, select the input field, paste the copied entry. Quest completed!
Contact Picker API allows the user to achieve the same goal much faster: click on the button, find the desired record, select it, click "Finish". Cool? Yes. Difficult to implement? No.
Where and how does it work?
So far, only for Android 6+ and only for Chrome 80+. If you own this combination, here is a demo from the developers .
API
The API includes a class ContactsManagerand an instance of this class by reference window.navigator.contacts.
There are two asynchronous methods: one getPropertiesthat allows you to find out what kind of contact information a current bunch of browser and operating system can provide in general, and selectwhich just displays a request to the user to select data from the notebook.
, API : «address», «email», «icon», «name» «tel». , , , , , .
const supportedProps = await navigator.contacts.getProperties();
if (supportedProps.includes('address') && supportedProps.includes('icon')) {
// ,
}
.
navigator.contacts.select , . , . , , . , . multiple ( false), .. , .
(, multiple) - , , — ( — ). :
[{
"email": [],
"name": ["Queen O’Hearts"],
"tel": ["+1-206-555-1000", "+1-206-555-1111"]
}]
«email», «name» «tel» . . , , Android, <> <> <> <>, </>. «address» , ContactAddress, ( ) PaymentAddress. «icon» — Blob-.
.
, . , , . .
? «», . .
, ( ), , TypeError: Unable to open a contact selector.
:
const supported = ('contacts' in navigator && 'ContactsManager' in window);
, , , Android 5- . . , Unable to open a contact selector.
API, , . . , API. , , , , , , . , API Permission API, .
? . : navigator.contacts.select , , , . : , , , . , . , , , , , .
:
API Android. , , Windows 10 Contact Picker API API Windows.ApplicationModel.Contacts, macOS — API Contacts. Chrome .
Chroimum-based- Android API , . Samsung Internet Miui, .
Firefox API, .
- , , Safari , , . Safari.
This API is another step of the Fugu Project towards narrowing the gap between the web and native applications. Of course, you won’t be able to write an alternative contact management application, but it seems to me that most of the use cases cover it and make your user a little happier. Write your thoughts on this or share possible use cases!
References