Claude Code के साथ Web Share API Usage Guide

Web Share API से native साझा अनुभव दें

Web Share API एक ऐसा Web API है जो browser से OS का standard share sheet खोलता है और URL, title, body तथा समर्थित environment में file तक — user द्वारा चुनी गई app को सौंपता है। सरल भाषा में, यह “site के share button को mobile के native share button जैसा बनाने का तरीका” है। mobile पर कई SNS icon सजाने के बजाय, LINE, mail, memo, Slack जैसी, user के device में मौजूद उन सभी विकल्पों तक स्वाभाविक रूप से पुल बनता है।

पर 2026 में भी Web Share API “हर browser में एक जैसा चलने वाला feature” नहीं है। MDN का Web Share API भी सीमित उपलब्धता और HTTPS की ज़रूरत बताता है, और Navigator.share() को user की क्रिया (click/tap) से ही बुलाना ज़रूरी है। Claude Code से साझा-feature बनाएँ तो शुरू से ही failure-time प्रदर्शन, clipboard fallback, measurement और PWA path समेत एक छोटा production design रखना सुरक्षित है।

production उन्नयन की नीति

Web Share API लगाते समय पहला निर्णय यह है कि share button को “SNS post button” मानें या “पाठक की अगली क्रिया छोटी करने वाला UI”। बाद वाले रूप में design की प्राथमिकता बदल जाती है। लेख पढ़ने वाला सहकर्मी को भेजे, PWA से दोबारा आए, खरीद से पहले boss को URL भेजे — ये छोटी क्रियाएँ conversion की पूर्व-सीढ़ी हैं।

Claude Code को सिर्फ़ “share button जोड़ो” कहने पर unsupported browser या iframe में आसानी से टूटता है। निर्देश में लिखें: HTTPS आधार, navigator.share की मौजूदगी-जाँच, AbortError को failure न मानना, clipboard fallback, share event का analytics, और text का localization। ख़ासकर PWA में home screen से launch करने पर browser UI घटता है, इसलिए page का share button पाठक का मुख्य external path बन जाता है।

उदाहरण और use cases

पहला use case तकनीकी लेख की social sharing है। mobile पाठक बीच में “बाद में team को भेजूँ” सोचे उसी क्षण page के नीचे या heading के पास से OS का share sheet खुले। सिर्फ़ X/Facebook के fixed link से कई भाषाओं में LINE, Slack, Notion, mail को साझा करना छूट जाता है। title और URL के साथ लेख का एक-पंक्ति सार text में डालें तो पाने वाला भी विषय जल्दी समझता है।

दूसरा use case PWA में पढ़ी जाने वाली checklist या learning material है। PWA बने Claude Code material में पाठक home screen से दोबारा आकर progress देखते हुए सहकर्मी को भेजते हैं। तब Web Share API से material का विशेष page, exercise URL या free PDF download page स्वाभाविक रूप से साझा होता है।

तीसरा use case B2B तुलना/मूल्यांकन page है। SEO से आया पाठक तुरंत न ख़रीदे, पर boss या team को URL भेज दे तो वह सौदे का प्रवेश-द्वार बनता है। CTA के पास share button रखें तो खरीद से पहले की “consultation” क्रिया पकड़ में आती है।

चौथा use case event, webinar और course page हैं। date, signup URL और छोटा परिचय share data में डालें, unsupported environment में clipboard पर copy करें। Claude Code के training page के लिए ऐसा मसौदा रखें जिसे विचार करता व्यक्ति सीधे team chat में चिपका सके।

basic share button का implementation

unsupported browser के लिए SNS link fallback दिखाएँ।

// components/ShareButton.tsx
import { useState } from 'react';

interface ShareButtonProps {
  title: string;
  text: string;
  url: string;
}

export function ShareButton({ title, text, url }: ShareButtonProps) {
  const [showFallback, setShowFallback] = useState(false);
  const canShare = typeof navigator !== 'undefined' && !!navigator.share;

  const handleShare = async () => {
    if (canShare) {
      try {
        await navigator.share({ title, text, url });
      } catch (err) {
        if ((err as Error).name !== 'AbortError') {
          setShowFallback(true);
        }
      }
    } else {
      setShowFallback(true);
    }
  };

  return (
    <div className="relative">
      <button
        onClick={handleShare}
        className="flex items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-white hover:bg-blue-700"
      >
        <ShareIcon />
        साझा करें
      </button>

      {showFallback && (
        <ShareFallback title={title} url={url} onClose={() => setShowFallback(false)} />
      )}
    </div>
  );
}

function ShareIcon() {
  return (
    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M4 12v8a2 2 0 002 2h12a2 2 0 002-2v-8" />
      <polyline points="16 6 12 2 8 6" />
      <line x1="12" y1="2" x2="12" y2="15" />
    </svg>
  );
}

SNS fallback component

// components/ShareFallback.tsx
interface ShareFallbackProps {
  title: string;
  url: string;
  onClose: () => void;
}

function ShareFallback({ title, url, onClose }: ShareFallbackProps) {
  const encodedUrl = encodeURIComponent(url);
  const encodedTitle = encodeURIComponent(title);

  const platforms = [
    {
      name: 'X (Twitter)',
      href: `https://twitter.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`,
      color: 'bg-black',
    },
    {
      name: 'Facebook',
      href: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
      color: 'bg-blue-600',
    },
    {
      name: 'LINE',
      href: `https://social-plugins.line.me/lineit/share?url=${encodedUrl}`,
      color: 'bg-green-500',
    },
    {
      name: 'Hatena Bookmark',
      href: `https://b.hatena.ne.jp/entry/${url}`,
      color: 'bg-blue-400',
    },
  ];

  return (
    <div className="absolute right-0 top-full mt-2 w-56 rounded-xl border bg-white p-3 shadow-lg dark:bg-gray-800">
      <div className="mb-2 flex items-center justify-between">
        <span className="text-sm font-medium">साझा करने का माध्यम चुनें</span>
        <button onClick={onClose} className="text-gray-400 hover:text-gray-600">&times;</button>
      </div>
      <div className="space-y-1">
        {platforms.map(p => (
          <a
            key={p.name}
            href={p.href}
            target="_blank"
            rel="noopener noreferrer"
            className={`block rounded-lg ${p.color} px-3 py-2 text-sm text-white transition-opacity hover:opacity-80`}
          >
            {p.name}
          </a>
        ))}
      </div>
      <button
        onClick={() => { navigator.clipboard.writeText(url); onClose(); }}
        className="mt-2 w-full rounded-lg bg-gray-100 px-3 py-2 text-sm hover:bg-gray-200 dark:bg-gray-700"
      >
        URL कॉपी करें
      </button>
    </div>
  );
}

file की साझेदारी

// image या file की साझेदारी
async function shareFile(file: File, title: string): Promise<void> {
  if (!navigator.canShare?.({ files: [file] })) {
    console.log('file साझेदारी समर्थित नहीं है');
    return;
  }

  await navigator.share({
    title,
    files: [file],
  });
}

// Canvas image की साझेदारी
async function shareCanvasImage(canvas: HTMLCanvasElement): Promise<void> {
  const blob = await new Promise<Blob | null>(resolve =>
    canvas.toBlob(resolve, 'image/png')
  );
  if (!blob) return;

  const file = new File([blob], 'image.png', { type: 'image/png' });
  await shareFile(file, 'generated image');
}

Web Share Target API

PWA के रूप में share target पर register करके, अन्य apps से आई साझेदारी को भी प्राप्त किया जा सकता है।

{
  "share_target": {
    "action": "/share-receiver",
    "method": "POST",
    "enctype": "multipart/form-data",
    "params": {
      "title": "title",
      "text": "text",
      "url": "url",
      "files": [
        {
          "name": "media",
          "accept": ["image/*", "video/*"]
        }
      ]
    }
  }
}

pitfalls और असफलता के उदाहरण

आम ग़लती page load होते ही अपने-आप share sheet खोलने वाला implementation है। navigator.share() को user की अस्थायी क्रिया, यानी click/tap से ही बुलाना ज़रूरी है। modal खोलने के बाद लंबा async काम बीच में आने पर कुछ browsers में user-क्रिया का दर्जा कट जाता है और NotAllowedError आता है।

दूसरा pitfall AbortError को failure मानकर लाल रंग में दिखाना है। user ने सिर्फ़ share sheet बंद किया तो वह failure नहीं है। “रद्द किया” छोटे में दिखाएँ या कुछ न दिखाएँ। वहीं TypeError/DataError data के रूप, URL या file-समर्थन में समस्या का संकेत हो सकते हैं।

conversion measurement पर अति-भरोसा भी जोखिम है। Web Share API यह नहीं लौटाता कि user ने किस app में साझा किया। इसलिए LINE गया या mail — यह न पता चलने वाली मानकर, share के बाद की पुनर्यात्रा, UTM-युक्त URL, PWA restart और form-पहुँच को मिलाकर मूल्यांकन करें।

Summary

Web Share API mobile users को ख़ासकर असरदार साझा-feature देता है। Claude Code का उपयोग करके Clipboard API के साथ fallback-युक्त implementation efficiently बनाया जा सकता है। PWA के साथ मिलाने पर share target के रूप में feature भी जोड़ा जा सकता है। विस्तृत spec के लिए MDN Web Docs - Web Share API देखें।

इस लेख में बताई बातों को असल में आज़माने पर

इस update में MDN के spec को आधार मानकर navigator.share(), HTTPS, user-क्रिया, AbortError और clipboard fallback को ध्यान में रखकर लेख फिर से जोड़ा गया। असल में आज़माने पर पता चला कि share button का मूल्य API से ज़्यादा उस fallback में है जो failure पर पाठक को रोकता नहीं, और उस design में है जो साझा के बाद PWA, analytics, SEO और training CTA को जोड़ता है। Claude Code से माँगते समय भी “share button बनाओ” नहीं, बल्कि “unsupported browser में भी copy हो और analytics event तक भेजे ऐसा share path बनाओ” कहना production के क़रीब output देता है।