इस पेज का अनुवाद Cloud Translation API से किया गया है.

Web Share API की मदद से, ओएस शेयरिंग यूज़र इंटरफ़ेस (यूआई) के साथ इंटिग्रेट करें

वेब ऐप्लिकेशन, प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन की तरह ही, शेयर करने की उन सुविधाओं का इस्तेमाल कर सकते हैं जो सिस्टम की ओर से उपलब्ध कराई जाती हैं.

Joe Medley

Web Share API की मदद से, वेब ऐप्लिकेशन भी प्लैटफ़ॉर्म के हिसाब से बनाए गए ऐप्लिकेशन की तरह, शेयर करने की सुविधाओं का इस्तेमाल कर सकते हैं. Web Share API की मदद से, वेब ऐप्लिकेशन डिवाइस पर इंस्टॉल किए गए अन्य ऐप्लिकेशन के साथ लिंक, टेक्स्ट, और फ़ाइलें उसी तरह शेयर कर सकते हैं जिस तरह प्लैटफ़ॉर्म के हिसाब से ऐप्लिकेशन के लिए की जाती हैं.

सिस्टम-लेवल पर शेयर करने के लिए टारगेट पिकर, जिसमें इंस्टॉल किए गए PWA को विकल्प के तौर पर शामिल किया गया हो. — सिस्टम-लेवल पर शेयर करने के लिए, टारगेट पिकर. इसमें इंस्टॉल किए गए PWA को विकल्प के तौर पर शामिल किया गया है.

सुविधाएं और सीमाएं

वेब शेयर की ये सुविधाएं और सीमाएं हैं:

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

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

लिंक और टेक्स्ट शेयर करना

लिंक और टेक्स्ट शेयर करने के लिए, share() तरीके का इस्तेमाल करें. यह तरीका, ज़रूरी प्रॉपर्टी ऑब्जेक्ट के साथ प्रॉमिस-आधारित है. ब्राउज़र को TypeError दिखाने से रोकने के लिए, ऑब्जेक्ट में इनमें से कम से कम एक प्रॉपर्टी होनी चाहिए: title, text, url या files. उदाहरण के लिए, यूआरएल के बिना टेक्स्ट शेयर किया जा सकता है या इसके उलट, टेक्स्ट के बिना यूआरएल शेयर किया जा सकता है. तीनों सदस्यों को अनुमति देने से, इस्तेमाल के उदाहरणों में ज़्यादा विकल्प मिलते हैं. मान लें कि नीचे दिए गए कोड को चलाने के बाद, उपयोगकर्ता ने टारगेट के तौर पर किसी ईमेल ऐप्लिकेशन को चुना है. title पैरामीटर ईमेल का विषय, text, मैसेज का मुख्य हिस्सा, और फ़ाइलें, अटैचमेंट बन सकता है.

if (navigator.share) {
  navigator.share({
    title: 'web.dev',
    text: 'Check out web.dev.',
    url: 'https://web.dev/',
  })
    .then(() => console.log('Successful share'))
    .catch((error) => console.log('Error sharing', error));
}

अगर आपकी साइट पर एक ही कॉन्टेंट के लिए कई यूआरएल हैं, तो मौजूदा यूआरएल के बजाय पेज का कैननिकल यूआरएल शेयर करें. document.location.href शेयर करने के बजाय, आपको पेज के <head> में कैननिकल यूआरएल <meta> टैग की जांच करनी होगी और उसे शेयर करना होगा. इससे उपयोगकर्ता को बेहतर अनुभव मिलेगा. यह न सिर्फ़ रीडायरेक्ट से बचाता है, बल्कि यह भी पक्का करता है कि शेयर किया गया यूआरएल किसी खास क्लाइंट के लिए सही उपयोगकर्ता अनुभव देता है. उदाहरण के लिए, अगर कोई दोस्त आपके साथ मोबाइल यूआरएल शेयर करता है और आप उसे डेस्कटॉप कंप्यूटर पर देखते हैं, तो आपको डेस्कटॉप वर्शन दिखेगा:

let url = document.location.href;
const canonicalElement = document.querySelector('link[rel=canonical]');
if (canonicalElement !== null) {
    url = canonicalElement.href;
}
navigator.share({url});

फ़ाइलें शेयर करना

फ़ाइलें शेयर करने के लिए, पहले navigator.canShare() को टेस्ट करें और उन्हें कॉल करें. इसके बाद, navigator.share() को कॉल करते समय फ़ाइलों की एक कलेक्शन शामिल करें:

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Vacation Pictures',
    text: 'Photos from September 27 to October 14.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

ध्यान दें कि सैंपल, navigator.share() के बजाय navigator.canShare() की जांच करके, सुविधा का पता लगाता है. canShare() को पास किया गया डेटा ऑब्जेक्ट, सिर्फ़ files प्रॉपर्टी के साथ काम करता है. कुछ खास तरह की ऑडियो, इमेज, PDF, वीडियो, और टेक्स्ट फ़ाइलें शेयर की जा सकती हैं. पूरी सूची के लिए, Chromium में इस्तेमाल किए जा सकने वाले फ़ाइल एक्सटेंशन देखें. आने वाले समय में, इसमें और फ़ाइल टाइप जोड़े जा सकते हैं.

तीसरे पक्ष के iframe में शेयर करना

तीसरे पक्ष के iframe में शेयर करने की कार्रवाई को ट्रिगर करने के लिए, allow एट्रिब्यूट की वैल्यू के तौर पर web-share का इस्तेमाल करके iframe को एम्बेड करें:

<!-- On https://example.com/index.html -->
<iframe allow="web-share" src="https://third-party.example.com/iframe.html"></iframe>

Glitch पर मौजूद डेमो में इसे काम करते हुए देखा जा सकता है और सोर्स कोड देखा जा सकता है. अगर यह एट्रिब्यूट नहीं दिया जाता है, तो Failed to execute 'share' on 'Navigator': Permission denied मैसेज के साथ NotAllowedError दिखेगा.

सांता ट्रैकर की केस स्टडी

Santa Tracker ऐप्लिकेशन में, शेयर करने का बटन दिख रहा है. — सैंटा ट्रैकर का शेयर बटन.

सैंटा ट्रैकर एक ओपन सोर्स प्रोजेक्ट है. यह Google की छुट्टियों की परंपरा है. हर दिसंबर, इस मौसम में गेम और शिक्षा से जुड़े अनुभव का जश्न मनाया जा सकता है.

साल 2016 में, सैंटा ट्रैकर टीम ने Android पर Web Share API का इस्तेमाल किया था. यह एपीआई, मोबाइल के लिए एकदम सही था. पिछले सालों में, टीम ने मोबाइल पर शेयर बटन हटा दिए थे, क्योंकि स्पेस की कमी थी और वे शेयर करने के लिए कई टारगेट नहीं जोड़ सकते थे.

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

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

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

इस सुविधा के लिए सहायता से जुड़ी खास जानकारी यहां दी गई है. ज़्यादा जानकारी के लिए, सहायता से जुड़े इनमें से किसी एक लिंक पर जाएं.

navigator.canShare()

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

navigator.share()

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

एपीआई के लिए सहायता दिखाना

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

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

Web Share API की मदद से, ओएस शेयरिंग यूज़र इंटरफ़ेस (यूआई) के साथ इंटिग्रेट करें

सुविधाएं और सीमाएं

लिंक और टेक्स्ट शेयर करना

फ़ाइलें शेयर करना

तीसरे पक्ष के iframe में शेयर करना

सांता ट्रैकर की केस स्टडी

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

एपीआई के लिए सहायता दिखाना

सहायक लिंक्स