Web APIs Bridge

1¿Qué son los puentes de API web?#

El WebView de Android no admite varias API web modernas que sí admite Chrome. Tu app generada incorpora polyfills de estas API automáticamente para que los sitios web funcionen como en Chrome:

✅ Notificaciones web (Notification API)
✅ Web Share (navigator.share)
✅ Portapapeles (navigator.clipboard)
✅ window.close()
✅ enlaces target="_blank" y window.open()

No necesitas configurar nada: esto funciona automáticamente en todas las apps generadas.

2Notificaciones web#

Los sitios web que usan Notification.requestPermission() y new Notification() mostrarán notificaciones reales de Android.

• En Android 13+, el usuario recibe un cuadro de diálogo de permiso del sistema
• En Android 12 y anteriores, las notificaciones están permitidas de forma predeterminada
• Al tocar una notificación se abre la app
• La opción 'tag' reemplaza las notificaciones anteriores (como indica la especificación 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() abre la hoja de compartir nativa de Android, para que los usuarios compartan contenido por WhatsApp, Telegram, correo, etc.

• Admite title, text y url
• navigator.canShare() devuelve true
• Funciona exactamente como el cuadro de compartir de Chrome

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

4API del portapapeles#

navigator.clipboard.writeText() y readText() están conectados al portapapeles nativo de Android.

• writeText() copia texto al portapapeles del sistema
• readText() lee del portapapeles del sistema
• Ambos devuelven Promises (como indica la especificación web)

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

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

5window.close() y target="_blank"#

También se corrigen dos carencias habituales del WebView:

• window.close(): cierra o finaliza la actividad de la app (útil para páginas de retorno de pago o autenticación)
• enlaces target="_blank": se cargan dentro del WebView en lugar de descartarse en silencio
• llamadas a window.open(): se manejan de la misma manera

No necesitas cambiar tu sitio web: simplemente funciona.

6Coincidencia de dominios en enlaces externos#

Cuando está configurado «Enlaces externos → Abrir en el navegador», la app compara dominios de forma inteligente:

• google.com y www.google.com se tratan como el mismo dominio
• Solo los dominios realmente distintos se abren en Chrome
• Las redirecciones dentro del mismo sitio se quedan en el WebView

Esto evita el problema de que un sitio como google.com redirija a www.google.com y se abra por error en Chrome.

7UPI y enlaces de apps de pago (Razorpay, GPay, PhonePe, Paytm)#

Cualquier enlace cuyo esquema no sea una página web abre automáticamente la app de Android que le corresponde: sin configuración y sin lista de esquemas que ajustar:

• upi://pay: intención UPI genérica (el usuario elige su app de UPI)
• paytmmp:// (Paytm), phonepe://, tez:// (Google Pay), gpay://
• tel:, mailto:, sms:, whatsapp://, tg://, intent://

Esto funciona en cualquier lugar al que una página pueda navegar:
✅ Un enlace <a href="upi://pay?..."> tocado
✅ Una redirección JS (window.location.href = 'upi://...')
✅ Una ventana emergente: window.open('paytmmp://...'), que es como Razorpay Checkout pasa el control a las apps de UPI

Así las páginas de pago de Razorpay / Cashfree / PhonePe funcionan tal cual: el cliente toca una opción de UPI, se abre la app de pago, aprueba y se ejecuta el manejador de éxito de tu página cuando regresa. Si ninguna app del teléfono puede manejar el esquema, el usuario ve un aviso claro en lugar de una página de error en blanco.

⚠️ ¿Vendes bienes DIGITALES en una app de Play Store? Google exige Play Billing para ellos: usa la guía de compras dentro de la app. El pago con UPI/tarjeta es para bienes físicos, servicios y apps distribuidas fuera de 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>

8Ejemplo completo: Razorpay Checkout con UPI, de principio a fin#

Un flujo completo, listo para copiar y pegar, con Razorpay Checkout. Lo que ocurre en el teléfono:

1. El cliente toca «Pagar ₹499» → Razorpay Checkout se abre en la página
2. El cliente elige UPI → su app de UPI se abre automáticamente (este es el traspaso paytmmp:// / phonepe:// que la app gestiona por ti)
3. El cliente aprueba en la app de UPI y regresa: Android devuelve tu app por sí solo
4. La función handler se ejecuta con un ID de pago → muestra tu pantalla de éxito
5. dismiss se dispara si cancelan → déjalos reintentar

Reemplaza rzp_test_XXXXXXXX por tu clave de dashboard.razorpay.com. Prueba primero con una clave key_test: el modo de prueba de Razorpay simula la aprobación de UPI.

⚠️ En una tienda real, confirma el pago en el servidor (webhook de Razorpay o Orders API con verificación de firma) antes de enviar mercancía: el handler del lado del navegador por sí solo se puede falsificar.

<!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>