वेब API ब्रिज

1Web API ब्रिज क्या हैं?#

Android WebView कई आधुनिक Web API सपोर्ट नहीं करता जो Chrome करता है। आपका जेनरेट किया ऐप इन API को अपने-आप पॉलीफ़िल करता है, ताकि वेबसाइटें ठीक वैसे चलें जैसे Chrome में चलती हैं:

✅ वेब नोटिफ़िकेशन (Notification API)
✅ Web Share (navigator.share)
✅ क्लिपबोर्ड (navigator.clipboard)
✅ window.close()
✅ target="_blank" लिंक और window.open()

किसी सेटअप की ज़रूरत नहीं - ये हर जेनरेट किए ऐप में अपने-आप काम करते हैं।

2वेब नोटिफ़िकेशन#

जो वेबसाइटें Notification.requestPermission() और new Notification() इस्तेमाल करती हैं, वे असली Android नोटिफ़िकेशन दिखाएँगी।

• Android 13+ पर यूज़र को सिस्टम का अनुमति डायलॉग मिलता है
• Android 12 और उससे पुराने वर्ज़न पर नोटिफ़िकेशन डिफ़ॉल्ट रूप से अनुमत होते हैं
• नोटिफ़िकेशन पर टैप करने से ऐप खुलता है
• 'tag' विकल्प पिछले नोटिफ़िकेशन को बदल देता है (Web स्पेक के अनुसार)

// Your website JS — works the same as in Chrome:
Notification.requestPermission().then(function(result) {
  if (result === 'granted') {
    new Notification('Hello!', {
      body: 'This is a native Android notification',
      tag: 'my-notif'
    });
  }
});

3Web Share API#

navigator.share() Android की नेटिव शेयर शीट खोलता है, जिससे यूज़र कंटेंट को WhatsApp, Telegram, ईमेल आदि पर शेयर कर सकते हैं।

• title, text और url को सपोर्ट करता है
• navigator.canShare() true लौटाता है
• ठीक Chrome के शेयर डायलॉग की तरह काम करता है

// Share content from your website:
navigator.share({
  title: 'Check this out',
  text: 'Amazing content!',
  url: 'https://example.com/page'
});

4क्लिपबोर्ड API#

navigator.clipboard.writeText() और readText() Android के नेटिव क्लिपबोर्ड से जुड़े हैं।

• writeText() टेक्स्ट को सिस्टम क्लिपबोर्ड में कॉपी करता है
• readText() सिस्टम क्लिपबोर्ड से पढ़ता है
• दोनों Promise लौटाते हैं (Web स्पेक के अनुसार)

// Copy to clipboard:
await navigator.clipboard.writeText('Hello World');

// Read from clipboard:
const text = await navigator.clipboard.readText();

5window.close() और target="_blank"#

WebView की दो आम कमियाँ भी ठीक की गई हैं:

• window.close() - ऐप की गतिविधि को बंद/समाप्त करता है (पेमेंट/ऑथ कॉलबैक पेज के लिए उपयोगी)
• target="_blank" लिंक - चुपचाप छूट जाने के बजाय WebView के अंदर लोड होते हैं
• window.open() कॉल - इन्हें भी इसी तरह संभाला जाता है

वेबसाइट में किसी बदलाव की ज़रूरत नहीं - ये बस काम करते हैं।

6बाहरी लिंक के लिए डोमेन मिलान#

जब 'External Links → Open in Browser' सेट हो, तो ऐप समझदारी से डोमेन मिलाता है:

• google.com और www.google.com को एक ही डोमेन माना जाता है
• सिर्फ़ सचमुच अलग डोमेन ही Chrome में खुलते हैं
• उसी साइट के अंदर के रीडायरेक्ट WebView में ही रहते हैं

इससे वह दिक्कत नहीं होती जिसमें google.com जैसी साइट www.google.com पर रीडायरेक्ट होती है और गलती से Chrome में खुल जाती है।

7UPI और पेमेंट ऐप लिंक (Razorpay, GPay, PhonePe, Paytm)#

जिस लिंक की स्कीम वेब पेज की नहीं है, वह अपने-आप उसी Android ऐप में खुलता है जिसका वह है - न कोई सेटअप, न कॉन्फ़िगर करने के लिए स्कीम सूची:

• upi://pay - सामान्य UPI इंटेंट (यूज़र अपना UPI ऐप चुनता है)
• paytmmp:// (Paytm), phonepe://, tez:// (Google Pay), gpay://
• tel:, mailto:, sms:, whatsapp://, tg://, intent://

यह हर उस जगह काम करता है जहाँ पेज नेविगेट कर सकता है:
✅ टैप किया गया <a href="upi://pay?..."> लिंक
✅ JS रीडायरेक्ट (window.location.href = 'upi://...')
✅ पॉपअप - window.open('paytmmp://...') - इसी तरह Razorpay Checkout UPI ऐप्स को हैंड-ऑफ़ करता है

इसलिए Razorpay / Cashfree / PhonePe के चेकआउट पेज जैसे हैं वैसे चलते हैं: ग्राहक UPI विकल्प पर टैप करता है, पेमेंट ऐप खुलता है, वह मंज़ूरी देता है, और लौटते ही आपके पेज का सक्सेस हैंडलर चल पड़ता है। अगर फ़ोन पर कोई ऐप उस स्कीम को नहीं खोल सकता, तो यूज़र को खाली एरर पेज के बजाय साफ़ टोस्ट दिखता है।

⚠️ Play Store ऐप में डिजिटल सामान बेच रहे हैं? Google इसके लिए Play Billing ज़रूरी करता है - इसके बजाय IAP गाइड इस्तेमाल करें। UPI/कार्ड चेकआउट भौतिक सामान, सेवाओं और Play के बाहर बँटने वाले ऐप्स के लिए है।

<!-- Simplest form — a plain UPI intent link. The user's phone
     shows every installed UPI app (GPay/PhonePe/Paytm/BHIM): -->
<a href="upi://pay?pa=merchant@bank&pn=MyStore&am=99.00&cu=INR&tn=Order%20123">
  Pay ₹99 via UPI
</a>

8पूरा उदाहरण - UPI के साथ Razorpay Checkout, शुरू से अंत तक#

Razorpay Checkout का पूरा, कॉपी करने लायक फ़्लो। फ़ोन पर क्या होता है:

1. ग्राहक 'Pay ₹499' पर टैप करता है → Razorpay Checkout पेज के अंदर खुलता है
2. ग्राहक UPI चुनता है → उसका UPI ऐप अपने-आप खुल जाता है (यह वही paytmmp:// / phonepe:// हैंड-ऑफ़ है जो ऐप आपके लिए संभालता है)
3. ग्राहक UPI ऐप में मंज़ूरी देकर लौटता है - Android आपके ऐप को अपने-आप वापस ले आता है
4. हैंडलर फ़ंक्शन पेमेंट ID के साथ चलता है → अपनी सफलता वाली स्क्रीन दिखाएँ
5. अगर वे रद्द करते हैं तो dismiss चलता है → उन्हें दोबारा कोशिश करने दें

rzp_test_XXXXXXXX की जगह dashboard.razorpay.com से मिली अपनी कुंजी डालें। पहले key_test वाली कुंजी से टेस्ट करें - Razorpay का टेस्ट मोड UPI की मंज़ूरी का सिमुलेशन करता है।

⚠️ असली स्टोर के लिए, सामान भेजने से पहले पेमेंट की पुष्टि सर्वर-साइड करें (Razorpay वेबहुक या Orders API + सिग्नेचर जाँच) - सिर्फ़ ब्राउज़र-साइड हैंडलर नकली बनाया जा सकता है।

<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://checkout.razorpay.com/v1/checkout.js"></script>

<h2>Premium Plan — ₹499</h2>
<button id="payBtn">Pay ₹499</button>
<p id="result"></p>

<script>
document.getElementById('payBtn').onclick = function () {
  var rzp = new Razorpay({
    key: 'rzp_test_XXXXXXXX',      // your Razorpay Key ID
    amount: 49900,                  // paise — ₹499.00
    currency: 'INR',
    name: 'My Store',
    description: 'Premium Plan',
    prefill: { contact: '', email: '' },
    theme: { color: '#2563eb' },

    // Fires after the customer returns from their UPI app
    handler: function (response) {
      document.getElementById('result').textContent =
        '✅ Paid! Payment ID: ' + response.razorpay_payment_id;
      // Real store: send response.razorpay_payment_id to your
      // server / webhook flow and verify before unlocking anything.
    },

    modal: {
      ondismiss: function () {
        document.getElementById('result').textContent =
          'Payment cancelled — tap Pay to try again.';
      }
    }
  });
  rzp.open();
};
</script>