Web Share Target API की मदद से, मोबाइल और डेस्कटॉप पर फ़ाइलें शेयर करना आसान हो गया है
मोबाइल या डेस्कटॉप डिवाइस पर, शेयर करना उतना ही आसान होना चाहिए जितना शेयर करें बटन पर क्लिक करना, ऐप्लिकेशन चुनना, और किसके साथ शेयर करना है. उदाहरण के लिए, हो सकता है कि आप कोई दिलचस्प लेख शेयर करना चाहें. इसके लिए, उसे दोस्तों को ईमेल करें या दुनिया को ट्वीट करें.
पहले, ऑपरेटिंग सिस्टम के साथ सिर्फ़ प्लैटफ़ॉर्म के हिसाब से रजिस्टर किए जाने वाले ऐप्लिकेशन ही इंस्टॉल किए गए दूसरे ऐप्लिकेशन से शेयर पाने के लिए रजिस्टर कर सकते थे. हालांकि, Web Share Target API की मदद से, इंस्टॉल किए गए वेब ऐप्लिकेशन, शेयर किया गया कॉन्टेंट पाने के लिए, मौजूदा ऑपरेटिंग सिस्टम के साथ शेयर टारगेट के तौर पर रजिस्टर कर सकते हैं.
![Android फ़ोन, जिसमें 'इसके ज़रिए शेयर करें' पैनल खुला हुआ है.](https://developer.chrome.com/static/docs/capabilities/web-apis/web-share-target/image/android-phone-the-share-e651a6cf19688.png?authuser=7&hl=hi)
वेब शेयर लक्ष्य को काम करता देखें
- Android के लिए Chrome 76 या उसके बाद के वर्शन या डेस्कटॉप पर Chrome 89 या उसके बाद के वर्शन का इस्तेमाल करके, वेब शेयर टारगेट डेमो खोलें.
- जब कहा जाए, तब ऐप्लिकेशन को अपनी होम स्क्रीन पर जोड़ने के लिए, इंस्टॉल करें पर क्लिक करें या Chrome मेन्यू का इस्तेमाल करके उसे अपनी होम स्क्रीन पर जोड़ें.
- ऐसा कोई भी ऐप्लिकेशन खोलें जो शेयर करने की सुविधा देता हो या डेमो ऐप्लिकेशन में शेयर करें बटन इस्तेमाल करें.
- टारगेट पिकर से, वेब शेयर की जांच चुनें.
शेयर करने के बाद, आपको वेब शेयर टारगेट वेब ऐप्लिकेशन में शेयर की गई सारी जानकारी दिखेगी.
अपने ऐप्लिकेशन को शेयर टारगेट के तौर पर रजिस्टर करना
आपके ऐप्लिकेशन को शेयर किए जाने वाले टारगेट के तौर पर रजिस्टर करने के लिए, उसे 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 फ़ोन में डेमो ऐप्लिकेशन दिख रहा है, जिसमें कॉन्टेंट शेयर किया गया है.](https://developer.chrome.com/static/docs/capabilities/web-apis/web-share-target/image/an-android-phone-displayi-000d1b109b71e.png?authuser=7&hl=hi)
इनकमिंग डेटा की पुष्टि ज़रूर करें. माफ़ करें, इस बात की कोई गारंटी नहीं है कि दूसरे ऐप्लिकेशन, सही पैरामीटर में सही कॉन्टेंट शेयर करेंगे.
उदाहरण के लिए, Android पर, url
फ़ील्ड खाली रहेगा, क्योंकि यह Android के शेयर सिस्टम में काम नहीं करता. इसके बजाय, यूआरएल अक्सर text
फ़ील्ड में या कभी-कभी title
फ़ील्ड में दिखेंगे.
ब्राउज़र समर्थन
वेब शेयर टारगेट एपीआई नीचे बताए गए तरीके से काम करता है:
सभी प्लैटफ़ॉर्म पर, शेयर किया गया डेटा पाने के संभावित टारगेट के तौर पर दिखने से पहले, आपका वेब ऐप्लिकेशन इंस्टॉल किया जाना चाहिए.
ऐप्लिकेशन के नमूने
एपीआई के साथ काम करता है
क्या आपको वेब शेयर टारगेट एपीआई इस्तेमाल करना है? आपकी सार्वजनिक सहायता से, Chromium की टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, वह दूसरे ब्राउज़र वेंडर को दिखाती है कि उनकी मदद करना कितना ज़रूरी है.
हैशटैग #WebShareTarget
इस्तेमाल करके @ChromiumDev को एक ट्वीट भेजें
और हमें बताएं कि उसका इस्तेमाल कहां और कैसे किया जा रहा है.