PWA के लिए वेब शेयर API

देने का उपहार

अगली पीढ़ी के वेब ऐप्स का उपयोग करने के कुछ स्पष्ट लाभ हैं, जिनमें से एक नेविगेटर के शेयर-एपीआई का उपयोग कर रहा है। क्षमताओं के लगातार विकसित होने वाले समृद्ध सेट के लिए धन्यवाद, आपकी पसंद का नेविगेटर अब निम्नलिखित वस्तुओं को साझा करने के लिए वेब शेयर एपीआई को लागू करने में सक्षम है:

सादे पाठ
एक शीर्षक प्रदान करके लिंक
सीधे फ़ाइलें

यदि किसी उपयोगकर्ता का ब्राउज़र नए नेविगेटर.शेयर का समर्थन करता है, तो आप अभी इस सुविधा का उपयोग कर सकते हैं!

डेमो समय!

शेयर-कार्यक्षमता का उपयोग करना जितना आसान हो जाता है, यहां एक उदाहरण है जो वास्तव में साइट पर उपयोग किया जाता है:

<Button
  className={classes.container}
  aria-label={"Share this article"}
  onClick={() => {
    // '.share' can only by called when
    // triggered by click-events to make
    // sure it's the user's intention.
    navigator.share?.({ 
      title: info.title,
      text: info.description,
      url: `${getBaseRoute(routes.posts)}/${info.slug.current}`,
    }).catch(console.error);
    
    // Optionally virbrate slightly.
     navigator.vibrate?.([30, 20, 10]);
  }}>
  <ShareIcon />
  <Typography>{"Share"}</Typography>
</Button>

जैसा कि आप देख सकते हैं, यह कॉलबैक एसिंक शेयर-फ़ंक्शन (यदि संभव हो) को आमंत्रित करता है और कुछ डेटा प्रदान करता है ताकि शेयर-शीट में एक अच्छा यूआरएल + वर्णनात्मक शीर्षक और उपशीर्षक दिखाया जा सके। दिखाया गया कोड इस आलेख के अंत में थोड़ा भिन्न रूप में उपयोग किया गया है। यदि आप ब्राउज़र साझाकरण का समर्थन करते हैं, तो "क्रियाएँ" -पंक्ति में एक संबंधित बटन प्रस्तुत किया जाएगा।

कहां उपयोग करें

लेखन के समय, एपीआई का उपयोग ज्यादातर लोकप्रिय ब्राउज़रों (क्रोम, ओपेरा, सफारी) के मोबाइल वेरिएंट पर किया जा सकता है, लेकिन केवल डेस्कटॉप पर सफारी + एज पर। चूंकि यह कार्यक्षमता विशिष्ट हार्डवेयर आवश्यकताओं तक सीमित नहीं है, मुझे उम्मीद है कि आने वाले महीनों में समर्थन में वृद्धि होगी।

और हाँ, यह वेब शेयर एपीआई के लिए एक त्वरित परिचय था, अधिक जानकारी के लिए लिंक किए गए web.dev के साथ-साथ परिशिष्ट में एमडीएन लेख देखें।