पिकर एपीआई से संपर्क करें, या किसी ब्राउज़र से अपने संपर्क कैसे साझा करें

आज, हम क्रोम 80 की रिलीज़ की प्रतीक्षा कर रहे हैं , जिसका अर्थ है कि संपर्क बीनने वाला एपीआई मूल परीक्षणों से वयस्कता में आ रहा है , जो हमें उसकी नोटबुक से उपयोगकर्ता-चयनित संपर्कों तक पहुंच प्रदान करने की अनुमति देता है। इस लेख में हम दिखाई देने वाले अवसरों का विश्लेषण करेंगे, और कुछ, शायद, गैर-स्पष्ट बिंदु।

यह क्या है और क्यों है?

कल्पना करें: आप अपने दोस्त को अपनी पसंदीदा साइट पर आमंत्रित करना चाहते हैं; ऑनलाइन ऑर्डर करें और प्राप्तकर्ता के रूप में पत्नी के संपर्क नंबर को निर्दिष्ट करना चाहते हैं; किसी सहकर्मी के लिए एक टैक्सी बुलाएं और यात्री संख्या के रूप में उसका नंबर इंगित करें (हाँ, मैं समझता हूं कि यहां सबसे लोकप्रिय मामला पहला है, लेकिन मैंने पिछले महीने अन्य लोगों का भी सामना किया) या फिर किसी तरह और कहीं न कहीं आप अपनी नोटबुक से फोन नंबर का संकेत देते हैं । तुम क्या कर रहे हो? ब्राउज़र या एप्लिकेशन बंद करें, फ़ोन एप्लिकेशन खोलें, जहां से आप संपर्क में जाते हैं, वांछित प्रविष्टि देखें, उसमें जाएं, नंबर की प्रतिलिपि बनाएं, ब्राउज़र या एप्लिकेशन को फिर से खोलें, इनपुट फ़ील्ड चुनें, कॉपी किए गए रिकॉर्ड को पेस्ट करें। खोज पूरी हुई!

संपर्क पिकर एपीआई उपयोगकर्ता को समान लक्ष्य को बहुत तेज़ी से प्राप्त करने की अनुमति देता है: बटन पर क्लिक करें, वांछित रिकॉर्ड ढूंढें, इसे चुनें, "समाप्त करें" पर क्लिक करें। ठंडा? हाँ। लागू करना मुश्किल? नहीं।

यह कहां और कैसे काम करता है?

अब तक, केवल एंड्रॉइड 6+ के लिए और केवल क्रोम 80+ के लिए। यदि आप इस संयोजन के मालिक हैं, तो यहां डेवलपर्स से एक डेमो है ।

एपीआई

एपीआई में ContactsManagerसंदर्भ द्वारा इस वर्ग का एक वर्ग और एक उदाहरण शामिल है window.navigator.contacts।

दो अतुल्यकालिक तरीके हैं: एक getPropertiesजो आपको यह पता लगाने की अनुमति देता है कि ब्राउज़र और ऑपरेटिंग सिस्टम का वर्तमान गुच्छा किस तरह की संपर्क जानकारी सामान्य रूप से प्रदान कर सकता है, और selectजो उपयोगकर्ता को नोटबुक से डेटा का चयन करने का अनुरोध दिखाता है।

  , 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;
• ,       ;
• ,    ;
• ,     , ( , ).

  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.

यह एपीआई वेब और देशी अनुप्रयोगों के बीच अंतर को कम करने की दिशा में फुगु परियोजना का एक और कदम है। बेशक, आप वैकल्पिक संपर्क प्रबंधन एप्लिकेशन को लिखने में सक्षम नहीं होंगे, लेकिन मुझे ऐसा लगता है कि अधिकांश उपयोग के मामले इसे कवर करते हैं और आपके उपयोगकर्ता को थोड़ा खुश करते हैं। इस पर अपने विचार लिखें या संभावित उपयोग के मामलों को साझा करें!

संदर्भ

• ड्राफ्ट सुझाव
• ऑफ़र का विवरण
• वेब पर लेख। देव
• डेमो