Aujourd'hui, nous attendons la sortie de Chrome 80 , ce qui signifie que l' API Contact Picker sort de Origin Trials à l'âge adulte , ce qui nous permet de fournir au site un accès aux contacts sélectionnés par l'utilisateur depuis son ordinateur portable. Dans cet article, nous analyserons les opportunités qui sont apparues et certains, peut-être, des points non évidents.
Qu'est-ce que c'est et pourquoi?
Imaginez: vous souhaitez inviter votre ami sur votre site préféré; faire une commande en ligne et vouloir préciser le numéro de contact de l'épouse en tant que destinataire; appeler un taxi pour un collègue et indiquer son numéro comme numéro de passager (oui, je comprends que le cas le plus populaire ici est le premier, mais j'ai aussi rencontré les autres le mois dernier) ou bien en quelque sorte et quelque part vous indiquez le numéro de téléphone de votre carnet . Qu'est-ce que tu fais? Éteignez le navigateur ou l'application, ouvrez l'application Téléphone, d'où vous allez dans Contacts, recherchez l'entrée souhaitée, accédez-y, copiez le numéro, ouvrez à nouveau le navigateur ou l'application, sélectionnez le champ de saisie, collez l'enregistrement copié. Quête terminée!
L'API Contact Picker permet à l'utilisateur d'atteindre le même objectif beaucoup plus rapidement: cliquez sur le bouton, trouvez l'enregistrement souhaité, sélectionnez-le, cliquez sur "Terminer". Cool? Oui. Difficile à mettre en œuvre? Non.
Où et comment ça marche?
Jusqu'à présent, uniquement pour Android 6+ et uniquement pour Chrome 80+. Si vous possédez cette combinaison, voici une démo des développeurs .
API
L'API inclut une classe ContactsManageret une instance de cette classe par référence window.navigator.contacts.
Il existe deux méthodes asynchrones: une getPropertiesqui vous permet de savoir quel type d'informations de contact le groupe actuel de navigateur et de système d'exploitation peut fournir en général, et selectqui montre simplement à l'utilisateur une demande de sélection de données dans le bloc-notes.
, 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.
Cette API est une autre étape du projet Fugu visant à réduire l'écart entre le Web et les applications natives. Bien sûr, vous ne pourrez pas écrire une autre application de gestion des contacts, mais il me semble que la plupart des cas d'utilisation le couvrent et rendent votre utilisateur un peu plus heureux. Donnez votre avis à ce sujet ou partagez des cas d'utilisation possibles!
Références