Недавно я исследовал, возможно ли получить доступ к телефонной книге из Интернета в хорошем смысле. И я решил поделиться тем, что я нашел — очевидно, что нет решения для экрана рабочего стола. Contact Picker API сам по себе предоставляет решение для некоторых браузеров мобильных устройств. И в этой статье я постараюсь объяснить, что он предлагает.
Хорошо, давайте сначала подумаем: у вас есть форма на вашем сайте с вводом номера телефона. Возможно, вы захотите автоматически заполнить этот ввод из списка контактов пользователя на его мобильном устройстве. Вероятно, его легко разрабатывать для мобильных платформ независимо от того, какую платформу вы используете (IOS или Android), но для Интернета это немного отличается по соображениям безопасности.
В настоящее время системы адаптивного дизайна являются естественной частью каждого процесса проектирования пользовательского интерфейса. Однако некоторые функции все еще настолько ограничены.
Тем не менее, было бы неплохо предложить пользователю выбрать номер телефона из списка контактов, а не вводить его вручную.
Для этой цели существует возможный (также необычный) способ, называемый API выбора контактов. И это часть объекта, называемого navigator, предоставляемого браузером.Этоозначает, что нет необходимости иметь дополнительную зависимость в вашем проекте и/или нет нужно иметь какие-либо сторонние библиотеки, что приятно.
Заранее скажу, что на IOS нет поддержки ни одного браузера.
Я нашел пару статей об этом API и его использовании. Я делюсь ниже:
Использование выглядит довольно просто. Первое, что вам нужно, это определить, поддерживается ли API выбора контактов. Затем, если он поддерживается, у вас будут две основные функции, называемые getProperties() и select().
getProperties помогает увидеть, какие свойства доступны, а функция select предназначена для получения списка контактов с некоторыми свойствами, которые вы определили как массив с именем props.
const props = ["name", "email", "tel", "address", "icon"];
const opts = { multiple: true };
async function getContacts() {
try {
const contacts = await navigator.contacts.select(props, opts);
// Handle results
} catch (ex) {
// Handle any errors here.
}
}
Теперь у вас есть список контактов, а в остальном вы сможете показывать их как часть потока.
Однако эта функция настолько ограничена и настолько экспериментальна!!
Ниже я показываю некоторые функции API выбора контактов и совместимость браузера с этими функциями в настоящее время.
Так что, в конце концов, очень сложно сказать, стоит внедрять на мою страницу или нет из-за низкого уровня поддержки на данный момент. Но это определенно выглядит так захватывающе!
В ходе расследования я также нашел веб-сайт, на котором рассказывается о веб-возможностях. Смотрится весело.
