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

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

Joe Medley
Joe Medley
GitHub

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

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

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

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

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

Browser Support

  • Chrome: 89.
  • Edge: 93.
  • Firefox: behind a flag.
  • Safari: 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 में शेयर करने की कार्रवाई को ट्रिगर करने के लिए, allow एट्रिब्यूट की वैल्यू के तौर पर web-share का इस्तेमाल करके iframe को एम्बेड करें:

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

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

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

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

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

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

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

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

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

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

navigator.canShare()

Browser Support

  • Chrome: 89.
  • Edge: 93.
  • Firefox: behind a flag.
  • Safari: 14.

Source

navigator.share()

Browser Support

  • Chrome: 89.
  • Edge: 93.
  • Firefox: behind a flag.
  • Safari: 12.1.

Source

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

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

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