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

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

Joe Medley

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

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

सिस्टम-लेवल पर शेयर टारगेट पिकर, जिसमें इंस्टॉल किए गए पीडब्ल्यूए को एक विकल्प के तौर पर दिखाया गया है.

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

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

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

Browser Support

• 128
• 93
• 
• 12.1

Source

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

लिंक और टेक्स्ट शेयर करने के लिए, 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 से शेयर करने की कार्रवाई को ट्रिगर करने के लिए, iframe को allow एट्रिब्यूट के साथ एम्बेड करें. साथ ही, इसकी वैल्यू web-share पर सेट करें:

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

Santa Tracker की केस स्टडी

Santa Tracker का शेयर बटन.

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

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

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

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

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

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

navigator.canShare()

Browser Support

• 128
• 93
• 
• 14

Source

navigator.share()

Browser Support

• 128
• 93
• 
• 12.1

Source

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

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

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

सहायता के लिए लिंक

• वेब शेयर डेमो
• Scrapbook PWA