نحوه دسترسی به مخاطبین از دفترچه آدرس

توماس اشتاینر

گاهی اوقات می‌خواهید به کاربران برنامه خود اجازه دهید یکی از مخاطبین خود را برای ارسال پیام از طریق ایمیل یا برنامه چت انتخاب کنند، یا به آنها کمک کنید تا بفهمند کدام یک از مخاطبینشان قبلاً به یک پلتفرم اجتماعی پیوسته‌اند.

روش مدرن

استفاده از API انتخابگر مخاطب

برای دریافت مخاطبین از دفترچه آدرس، باید از API انتخابگر مخاطبین استفاده کنید که به کاربران امکان می‌دهد ورودی‌ها را از لیست مخاطبین خود انتخاب کنند و جزئیات محدودی از ورودی‌های انتخاب شده را با برنامه شما به اشتراک بگذارند. چندین ویژگی مانند name ، email ، tel ، address و icon در دسترس هستند. برای اطلاع از ویژگی‌های پشتیبانی‌شده، navigator.contacts.getProperties() را فراخوانی کنید. برای اینکه به کاربر اجازه دهید چندین مخاطب را انتخاب کند، {multiple: true} را به عنوان پارامتر دوم navigator.contacts.select() ارسال کنید.

Browser Support

  • کروم: پشتیبانی نمی‌شود.
  • لبه: پشتیبانی نمی‌شود.
  • فایرفاکس: پشتیبانی نمی‌شود.
  • سافاری: پشتیبانی نمی‌شود.

Source

رابط برنامه‌نویسی کاربردی انتخاب مخاطب (Contact Picker API) از نسخه ۸۰ به بعد در نسخه اندروید کروم موجود است.

روش کلاسیک

با استفاده از فرم معمولی

روش جایگزین، استفاده از یک فرم معمولی است که به کاربر اجازه می‌دهد جزئیات مخاطب را وارد کند.

Browser Support

  • کروم: ۱.
  • لبه: ۱۲.
  • فایرفاکس: ۱.
  • سافاری: ۳.

Source

بهبود تدریجی

اگر API انتخابگر مخاطب پشتیبانی می‌شود، فیلدهای فرم استاتیک را پنهان کنید و به جای آن یک دکمه انتخابگر نمایش دهید.

const button = document.querySelector('button');
const name = document.querySelector('.name');
const address = document.querySelector('.address');
const email = document.querySelector('.email');
const tel = document.querySelector('.tel');
const pre = document.querySelector('pre');
const autofills = document.querySelectorAll('.autofill');

if ('contacts' in navigator) {
  button.hidden = false;
  for (const autofill of autofills) {
    autofill.parentElement.style.display = 'none';
  }
  address.parentElement.style.display = 'block';
  button.addEventListener('click', async () => {
    const props = ['name', 'email', 'tel', 'address'];
    const opts = { multiple: false };
    try {
      const [contact] = await navigator.contacts.select(props, opts);
      name.value = contact.name;
      address.value = contact.address;
      tel.value = contact.tel;
      email.value = contact.email;
    } catch (err) {
      pre.textContent = `${err.name}: ${err.message}`;
    }
  });
}

مطالعه بیشتر

نسخه آزمایشی

اچ‌تی‌ام‌ال 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="icon"
      href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
    />
    <title>How to access contacts from the address book</title>
  </head>
  <body>
    <h1>How to access contacts from the address book</h1>

    <p>Ship your order as a present to a friend.</p>
    <button hidden type="button">Open address book</button>
    <pre></pre>

    <label> Name <input class="name" autocomplete="name"></label>

    <label hidden>Address <input class="address" required></label>

    <label>Street <input class="autofill" autocomplete="address-line1" required></label>

    <label>City <input class="autofill" autocomplete="address-level2" required></label>

    <label>State / Province / Region (optional) <input class="autofill" autocomplete="address-level1"></label>

    <label>ZIP / Postal code (optional) <input class="autofill" autocomplete="postal-code"></label>

    <label>Country <input class="autofill" autocomplete="country"></label>

    <label>Email<input class="email" autocomplete="email"></label>

    <label>Telephone<input class="tel" autocomplete="tel"></label>
  </body>
</html>

سی‌اس‌اس 


        html {
  box-sizing: border-box;
  font-family: system-ui, sans-serif;
  color-scheme: dark light;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  margin: 1rem;
}

input {
  display: block;
  margin-block-end: 1rem;
}

جی‌اس 


        const button = document.querySelector('button');
const name = document.querySelector('.name')
const address = document.querySelector('.address')
const email = document.querySelector('.email')
const tel = document.querySelector('.tel')
const pre = document.querySelector('pre')
const autofills = document.querySelectorAll('.autofill')

if ('contacts' in navigator) {
  button.hidden = false;
  for (const autofill of autofills) {
    autofill.parentElement.style.display = 'none'
  }
  address.parentElement.style.display = 'block';
  button.addEventListener('click', async () => {
    const props = ['name', 'email', 'tel', 'address'];
    const opts = {multiple: false};
    try {
      const [contact] = await navigator.contacts.select(props, opts);
      name.value = contact.name;
      address.value = contact.address;
      tel.value = contact.tel
      email.value = contact.email;
    } catch (err) {
      pre.textContent = `${err.name}: ${err.message}`
    }
  });
}