Web APIs Bridge

1Cosa sono i Web API Bridge?#

Android WebView non supporta diverse Web API moderne che invece Chrome supporta. La tua app generata applica automaticamente dei polyfill per queste API, così i siti funzionano come in Chrome:

✅ Web Notifications (Notification API)
✅ Web Share (navigator.share)
✅ Clipboard (navigator.clipboard)
✅ window.close()
✅ link target="_blank" e window.open()

Non serve alcuna configurazione: funzionano in automatico in ogni app generata.

2Web Notifications#

I siti web che usano Notification.requestPermission() e new Notification() mostreranno vere notifiche Android.

• Su Android 13+, l'utente riceve una finestra di autorizzazione di sistema
• Su Android 12 e versioni precedenti le notifiche sono consentite per impostazione predefinita
• Toccando una notifica si apre l'app
• L'opzione 'tag' sostituisce le notifiche precedenti (come da specifica 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() apre il foglio di condivisione nativo di Android, permettendo agli utenti di condividere contenuti su WhatsApp, Telegram, e-mail, ecc.

• Supporta title, text e url
• navigator.canShare() restituisce true
• Funziona esattamente come la finestra di condivisione di Chrome

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

4Clipboard API#

navigator.clipboard.writeText() e readText() sono collegati agli appunti nativi di Android.

• writeText() copia il testo negli appunti di sistema
• readText() legge dagli appunti di sistema
• Entrambi restituiscono Promise (come da specifica Web)

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

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

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

Vengono corretti anche due problemi comuni della WebView:

• window.close(): chiude/termina l'activity dell'app (utile per le pagine di callback di pagamento/autenticazione)
• Link target="_blank": si caricano dentro la WebView invece di essere scartati in silenzio
• Chiamate window.open(): gestite allo stesso modo

Non servono modifiche al sito: funzionano e basta.

6Corrispondenza dei domini per i link esterni#

Quando è impostato 'External Links → Open in Browser', l'app confronta i domini in modo intelligente:

• google.com e www.google.com sono considerati lo stesso dominio
• Solo i domini davvero diversi si aprono in Chrome
• I reindirizzamenti all'interno dello stesso sito restano nella WebView

Questo evita il problema per cui un sito come google.com reindirizza a www.google.com e si apre per errore in Chrome.

7UPI e link alle app di pagamento (Razorpay, GPay, PhonePe, Paytm)#

Qualsiasi link il cui schema non sia una pagina web apre automaticamente l'app Android che lo gestisce: nessuna configurazione, nessun elenco di schemi da impostare:

• upi://pay: intent UPI generico (l'utente sceglie la sua app UPI)
• paytmmp:// (Paytm), phonepe://, tez:// (Google Pay), gpay://
• tel:, mailto:, sms:, whatsapp://, tg://, intent://

Funziona ovunque una pagina possa navigare:
✅ Un link <a href="upi://pay?..."> toccato
✅ Un reindirizzamento JS (window.location.href = 'upi://...')
✅ Un popup - window.open('paytmmp://...') - che è il modo in cui Razorpay Checkout passa il controllo alle app UPI

Così le pagine di checkout di Razorpay / Cashfree / PhonePe funzionano così come sono: il cliente tocca un'opzione UPI, si apre l'app di pagamento, approva e il gestore di successo della tua pagina scatta al ritorno. Se nessuna app sul telefono può gestire lo schema, l'utente vede un chiaro avviso invece di una pagina di errore vuota.

⚠️ Vendi beni DIGITALI in un'app del Play Store? Google richiede Play Billing per quelli: usa invece la guida IAP. Il checkout UPI/carta è per beni fisici, servizi e app distribuite fuori da 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>

8Esempio completo: Razorpay Checkout con UPI, da capo a fondo#

Un flusso completo, da copiare e incollare, con Razorpay Checkout. Cosa succede sul telefono:

1. Il cliente tocca 'Paga ₹499' → Razorpay Checkout si apre nella pagina
2. Il cliente sceglie UPI → la sua app UPI si apre automaticamente (è il passaggio paytmmp:// / phonepe:// che l'app gestisce per te)
3. Il cliente approva nell'app UPI e torna indietro: Android riporta la tua app in primo piano da solo
4. La funzione handler scatta con un ID di pagamento → mostra la tua schermata di successo
5. dismiss scatta se l'utente annulla → lascialo riprovare

Sostituisci rzp_test_XXXXXXXX con la tua chiave da dashboard.razorpay.com. Prova prima con una chiave key_test: la modalità di prova di Razorpay simula l'approvazione UPI.

⚠️ In un negozio vero, conferma il pagamento lato server (webhook Razorpay oppure Orders API + verifica della firma) prima di spedire la merce: il solo handler lato browser può essere falsificato.

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