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

वेब शेयर टारगेट एपीआई की मदद से, मोबाइल और डेस्कटॉप पर फ़ाइल शेयर करना आसान हो गया है

Pete LePage

Joe Medley

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

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

वेब शेयर टारगेट को काम करते देखें

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 को बदला जा सकता है मौजूदा क्वेरी पैरामीटर के साथ वैल्यू शामिल करें. उदाहरण के लिए, अगर आपका URL स्कीम, text के बजाय body का इस्तेमाल करती है. इसलिए, "text": "text" को "text": "body" से बदला जा सकता है.

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

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

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

{
  "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 को ड्रॉप किया जा रहा है.

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

अगर उपयोगकर्ता आपका ऐप्लिकेशन चुनता है और आपका 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 को प्रीकैश करने के लिए, सर्विस वर्कर का इस्तेमाल ज़रूर करें पेज को इस तरह लोड किया जाता है कि यह तेज़ी से लोड हो सके और भरोसेमंद तरीके से काम करे, भले ही उपयोगकर्ता ऑफ़लाइन हो. वर्कबॉक्स एक ऐसा टूल है जो आपकी मदद कर सकता है अपने सर्विस वर्कर में प्री-कैशिंग की सुविधा लागू करें.

पीओएसटी शेयर करने की प्रक्रिया प्रोसेस की जा रही है

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

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

Web Share Target API की सुविधा, नीचे बताए गए तरीके से काम करती है:

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

ऐप्लिकेशन के सैंपल

• स्क्वॉश
• स्क्रैपबुक का PWA

यह एपीआई काम करता है

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

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