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

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

Joe Medley
Joe Medley
GitHub

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

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

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

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

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

ब्राउज़र सहायता

  • 89
  • 93
  • 78 जीबी में से

सोर्स

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

लिंक और टेक्स्ट शेयर करने के लिए, 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>

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

सैंटा ट्रैकर से जुड़ी केस स्टडी

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

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

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

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

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

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

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

navigator.canShare()

ब्राउज़र सहायता

  • 89
  • 93
  • 14

सोर्स

navigator.share()

ब्राउज़र सहायता

  • 89
  • 93
  • 78 जीबी में से

सोर्स

एपीआई के साथ काम करता है

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

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