वेब शेयर टारगेट एपीआई से शेयर किया गया डेटा पाना

Web Share Target API की मदद से, मोबाइल और डेस्कटॉप पर फ़ाइलें शेयर करना आसान हो गया है

मोबाइल या डेस्कटॉप डिवाइस पर, शेयर करना उतना ही आसान होना चाहिए जितना शेयर करें बटन पर क्लिक करना, ऐप्लिकेशन चुनना, और किसके साथ शेयर करना है. उदाहरण के लिए, हो सकता है कि आप कोई दिलचस्प लेख शेयर करना चाहें. इसके लिए, उसे दोस्तों को ईमेल करें या दुनिया को ट्वीट करें.

पहले, ऑपरेटिंग सिस्टम के साथ सिर्फ़ प्लैटफ़ॉर्म के हिसाब से रजिस्टर किए जाने वाले ऐप्लिकेशन ही इंस्टॉल किए गए दूसरे ऐप्लिकेशन से शेयर पाने के लिए रजिस्टर कर सकते थे. हालांकि, Web Share Target API की मदद से, इंस्टॉल किए गए वेब ऐप्लिकेशन, शेयर किया गया कॉन्टेंट पाने के लिए, मौजूदा ऑपरेटिंग सिस्टम के साथ शेयर टारगेट के तौर पर रजिस्टर कर सकते हैं.

Android फ़ोन, जिसमें 'इसके ज़रिए शेयर करें' पैनल खुला हुआ है.
विकल्प के तौर पर, इंस्टॉल किए गए PWA के साथ सिस्टम-लेवल का शेयर टारगेट पिकर.

वेब शेयर लक्ष्य को काम करता देखें

  1. Android के लिए Chrome 76 या उसके बाद के वर्शन या डेस्कटॉप पर Chrome 89 या उसके बाद के वर्शन का इस्तेमाल करके, वेब शेयर टारगेट डेमो खोलें.
  2. जब कहा जाए, तब ऐप्लिकेशन को अपनी होम स्क्रीन पर जोड़ने के लिए, इंस्टॉल करें पर क्लिक करें या Chrome मेन्यू का इस्तेमाल करके उसे अपनी होम स्क्रीन पर जोड़ें.
  3. ऐसा कोई भी ऐप्लिकेशन खोलें जो शेयर करने की सुविधा देता हो या डेमो ऐप्लिकेशन में शेयर करें बटन इस्तेमाल करें.
  4. टारगेट पिकर से, वेब शेयर की जांच चुनें.

शेयर करने के बाद, आपको वेब शेयर टारगेट वेब ऐप्लिकेशन में शेयर की गई सारी जानकारी दिखेगी.

अपने ऐप्लिकेशन को शेयर टारगेट के तौर पर रजिस्टर करना

आपके ऐप्लिकेशन को शेयर किए जाने वाले टारगेट के तौर पर रजिस्टर करने के लिए, उसे Chrome के इंस्टॉल करने की ज़रूरी शर्तों को पूरा करना होगा. इसके अलावा, आपके ऐप्लिकेशन पर शेयर करने से पहले, उपयोगकर्ता को उसे अपनी होम स्क्रीन पर जोड़ना होगा. इससे साइटों को, उपयोगकर्ता के शेयर इंटेंट चूज़र में अपने-आप को किसी भी क्रम में जोड़ने से रोका जाता है. साथ ही, यह पक्का होता है कि शेयर करना ऐसा ही है जो उपयोगकर्ता आपके ऐप्लिकेशन से करना चाहते हैं.

अपना वेब ऐप्लिकेशन मेनिफ़ेस्ट अपडेट करें

अपने ऐप्लिकेशन को शेयर टारगेट के तौर पर रजिस्टर करने के लिए, उसके वेब ऐप्लिकेशन मेनिफ़ेस्ट में share_target एंट्री जोड़ें. यह ऑपरेटिंग सिस्टम को बताता है कि इंटेंट चुनने वाले टूल में आपके ऐप्लिकेशन को विकल्प के तौर पर शामिल किया जाए. मेनिफ़ेस्ट में जोड़ी गई जानकारी से उस डेटा को कंट्रोल किया जाता है जिसे आपका ऐप्लिकेशन स्वीकार करेगा. share_target एंट्री के लिए, आम तौर पर तीन स्थितियां होती हैं:

  • बुनियादी जानकारी स्वीकार करना
  • आवेदन में किए गए बदलावों को स्वीकार किया जा रहा है
  • फ़ाइलें स्वीकार की जा रही हैं

बुनियादी जानकारी स्वीकार करना

अगर आपका टारगेट ऐप्लिकेशन सिर्फ़ डेटा, लिंक, और टेक्स्ट जैसी बुनियादी जानकारी स्वीकार कर रहा है, तो manifest.json फ़ाइल में यह जानकारी जोड़ें:

"share_target": {
  "action": "/share-target/",
  "method": "GET",
  "params": {
    "title": "title",
    "text": "text",
    "url": "url"
  }
}

अगर आपके ऐप्लिकेशन में पहले से ही शेयर यूआरएल स्कीम मौजूद है, तो params वैल्यू को अपने मौजूदा क्वेरी पैरामीटर से बदला जा सकता है. उदाहरण के लिए, अगर शेयर किए जाने वाले यूआरएल की स्कीम, text के बजाय body का इस्तेमाल करती है, तो "text": "text" को "text": "body" से बदला जा सकता है.

method वैल्यू न देने पर, डिफ़ॉल्ट वैल्यू "GET" हो जाती है. इस उदाहरण में नहीं दिखाया गया enctype फ़ील्ड, डेटा को कोड में बदलने के तरीके के बारे में बताता है. "GET" वाले तरीके के लिए, enctype डिफ़ॉल्ट तौर पर "application/x-www-form-urlencoded" को सेट करता है. अगर इसे किसी और तरीके पर सेट किया गया है, तो इसे अनदेखा कर दिया जाता है.

आवेदन में किए गए बदलावों को स्वीकार किया जा रहा है

अगर शेयर किए गए डेटा से, टारगेट ऐप्लिकेशन में कोई बदलाव होता है—उदाहरण के लिए, टारगेट किए गए ऐप्लिकेशन में बुकमार्क सेव करना, तो method की वैल्यू को "POST" पर सेट करें और enctype फ़ील्ड को शामिल करें. नीचे दिया गया उदाहरण टारगेट ऐप्लिकेशन में एक बुकमार्क बनाता है, ताकि वह method के लिए "POST" और enctype के लिए "multipart/form-data" का इस्तेमाल करे:

{
  "name": "Bookmark",
  "share_target": {
    "action": "/bookmark",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "url": "link"
    }
  }
}

फ़ाइलें स्वीकार की जा रही हैं

ऐप्लिकेशन में किए जाने वाले बदलावों की तरह ही, फ़ाइलों को स्वीकार करने के लिए ज़रूरी है कि method, "POST" हो और enctype मौजूद हो. इसके अलावा, enctype "multipart/form-data" होना चाहिए और files की एंट्री जोड़ना ज़रूरी है.

आपको files कलेक्शन भी जोड़ना होगा. इसमें यह बताया जाएगा कि आपका ऐप्लिकेशन किस तरह की फ़ाइलें स्वीकार कर सकता है. ऐरे एलिमेंट में दो सदस्यों वाली एंट्री होती हैं: name फ़ील्ड और accept फ़ील्ड. accept फ़ील्ड में MIME टाइप, फ़ाइल एक्सटेंशन या ऐसा कलेक्शन होता है जिसमें दोनों शामिल होते हैं. एक ऐसा कलेक्शन उपलब्ध कराना सबसे अच्छा होता है जिसमें MIME टाइप और फ़ाइल एक्सटेंशन, दोनों शामिल हों. इसकी वजह यह है कि ऑपरेटिंग सिस्टम अलग-अलग तरह के होते हैं.

{
  "name": "Aggregator",
  "share_target": {
    "action": "/cgi-bin/aggregate",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "name",
      "text": "description",
      "url": "link",
      "files": [
        {
          "name": "records",
          "accept": ["text/csv", ".csv"]
        },
        {
          "name": "graphs",
          "accept": "image/svg+xml"
        }
      ]
    }
  }
}

आने वाले कॉन्टेंट को मैनेज करें

शेयर किए गए इनकमिंग डेटा का इस्तेमाल कैसे किया जाता है, यह आप पर निर्भर करता है और यह आपके ऐप्लिकेशन पर निर्भर करता है. उदाहरण के लिए:

  • कोई ईमेल क्लाइंट, ईमेल के सब्जेक्ट के तौर पर title का इस्तेमाल करके, नए ईमेल को ड्राफ़्ट कर सकता है. इसमें text और url को मुख्य हिस्से के तौर पर जोड़कर, नया ईमेल पता जोड़ा जा सकता है.
  • कोई सोशल नेटवर्किंग ऐप्लिकेशन, title को अनदेखा करके, text को मैसेज के मुख्य हिस्से के तौर पर और लिंक के तौर पर url को जोड़कर, नई पोस्ट ड्राफ़्ट कर सकता है. अगर text मौजूद नहीं है, तो ऐप्लिकेशन शरीर में भी url का इस्तेमाल कर सकता है. अगर url मौजूद नहीं है, तो ऐप्लिकेशन यूआरएल खोजने के लिए text को स्कैन कर सकता है और उसे लिंक के तौर पर जोड़ सकता है.
  • फ़ोटो शेयर करने वाला कोई ऐप्लिकेशन, स्लाइड शो के टाइटल के तौर पर title, ब्यौरे के तौर पर text, और स्लाइड शो की इमेज के तौर पर files का इस्तेमाल करके, नया स्लाइड शो बना सकता है.
  • कोई मैसेजिंग ऐप्लिकेशन, text और url को एक साथ जोड़कर title को अलग करके, नया मैसेज ड्राफ़्ट कर सकता है.

GET शेयर प्रोसेस किए जा रहे हैं

अगर उपयोगकर्ता आपके ऐप्लिकेशन को चुनता है और आपका method "GET" (डिफ़ॉल्ट रूप से) है, तो ब्राउज़र action यूआरएल पर नई विंडो खोलता है. इसके बाद ब्राउज़र, मेनिफ़ेस्ट में बताए गए यूआरएल के साथ कोड में बदली गई वैल्यू का इस्तेमाल करके, एक क्वेरी स्ट्रिंग जनरेट करता है. उदाहरण के लिए, अगर शेयर करने वाला ऐप्लिकेशन title और text उपलब्ध कराता है, तो क्वेरी स्ट्रिंग ?title=hello&text=world होगी. इसे प्रोसेस करने के लिए, अपने फ़ोरग्राउंड पेज में DOMContentLoaded इवेंट लिसनर का इस्तेमाल करें और क्वेरी स्ट्रिंग को पार्स करें:

window.addEventListener('DOMContentLoaded', () => {
  const parsedUrl = new URL(window.location);
  // searchParams.get() will properly handle decoding the values.
  console.log('Title shared: ' + parsedUrl.searchParams.get('title'));
  console.log('Text shared: ' + parsedUrl.searchParams.get('text'));
  console.log('URL shared: ' + parsedUrl.searchParams.get('url'));
});

action पेज को प्री-कैश करने के लिए सर्विस वर्कर का इस्तेमाल करना न भूलें, ताकि यह तेज़ी से लोड हो और भरोसेमंद तरीके से काम करे, भले ही उपयोगकर्ता ऑफ़लाइन हो. Workbox एक टूल है, जो सर्विस वर्कर में प्रीकैशिंग की सुविधा लागू करने में आपकी मदद कर सकता है.

POST शेयर संसाधित किया जा रहा है

अगर आपका method "POST" है, जैसा कि आपका टारगेट ऐप्लिकेशन सेव किए गए बुकमार्क या शेयर की गई फ़ाइलें स्वीकार करता है, तो मिलने वाले POST अनुरोध के मुख्य हिस्से में, शेयर करने वाले ऐप्लिकेशन से पास किया गया डेटा शामिल होता है. इसे मेनिफ़ेस्ट में दिए गए enctype वैल्यू का इस्तेमाल करके एन्कोड किया जाता है.

फ़ोरग्राउंड पेज इस डेटा को सीधे प्रोसेस नहीं कर सकता. पेज, इसे अनुरोध के तौर पर देखता है, इसलिए पेज इसे सर्विस वर्कर को भेज देता है, जहां इसे fetch इवेंट लिसनर की मदद से रोका जा सकता है. यहां से, postMessage() का इस्तेमाल करके डेटा को वापस फ़ोरग्राउंड पेज पर भेजा जा सकता है या उसे सर्वर पर भेजा जा सकता है:

self.addEventListener('fetch', event => {
  const url = new URL(event.request.url);
  // If this is an incoming POST request for the
  // registered "action" URL, respond to it.
  if (event.request.method === 'POST' &&
      url.pathname === '/bookmark') {
    event.respondWith((async () => {
      const formData = await event.request.formData();
      const link = formData.get('link') || '';
      const responseUrl = await saveBookmark(link);
      return Response.redirect(responseUrl, 303);
    })());
  }
});

शेयर किए गए कॉन्टेंट की पुष्टि की जा रही है

Android फ़ोन में डेमो ऐप्लिकेशन दिख रहा है, जिसमें कॉन्टेंट शेयर किया गया है.
शेयर करने के लिए टारगेट ऐप्लिकेशन का सैंपल.

इनकमिंग डेटा की पुष्टि ज़रूर करें. माफ़ करें, इस बात की कोई गारंटी नहीं है कि दूसरे ऐप्लिकेशन, सही पैरामीटर में सही कॉन्टेंट शेयर करेंगे.

उदाहरण के लिए, Android पर, url फ़ील्ड खाली रहेगा, क्योंकि यह Android के शेयर सिस्टम में काम नहीं करता. इसके बजाय, यूआरएल अक्सर text फ़ील्ड में या कभी-कभी title फ़ील्ड में दिखेंगे.

ब्राउज़र समर्थन

वेब शेयर टारगेट एपीआई नीचे बताए गए तरीके से काम करता है:

सभी प्लैटफ़ॉर्म पर, शेयर किया गया डेटा पाने के संभावित टारगेट के तौर पर दिखने से पहले, आपका वेब ऐप्लिकेशन इंस्टॉल किया जाना चाहिए.

ऐप्लिकेशन के नमूने

एपीआई के साथ काम करता है

क्या आपको वेब शेयर टारगेट एपीआई इस्तेमाल करना है? आपकी सार्वजनिक सहायता से, Chromium की टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, वह दूसरे ब्राउज़र वेंडर को दिखाती है कि उनकी मदद करना कितना ज़रूरी है.

हैशटैग #WebShareTarget इस्तेमाल करके @ChromiumDev को एक ट्वीट भेजें और हमें बताएं कि उसका इस्तेमाल कहां और कैसे किया जा रहा है.