In-App Browser Plugin Capacitor

Usare @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser apre contenuti web esterni da un'app Capacitor. Usa open() per la superficie browser della piattaforma, oppure openWebView() quando la tua app richiede una WebView nativa gestita con dimensioni, toolbar, messaggi, script, download, proxy, controllo popup, storage privato o UI Ionic sovrapposta alla pagina.

Installa

npm install @capgo/capacitor-inappbrowser
npx cap sync

Cosa espone questo plugin

• Flusso con browser di sistema tramite Chrome Custom Tabs su Android e SFSafariViewController su iOS.
• WebView gestite che possono essere ridimensionate, nascoste, mostrate, spostate dietro l'app Capacitor e riportate in primo piano.
• Forwarding di click, touch e scroll con dispatchInputEvent() quando l'interfaccia dell'app è sopra il browser.
• Browser a schermo parziale dove i tap fuori dal frame della WebView nativa passano all'app Capacitor su Android e iOS.
• Pulizia di cookie, cache e dati di navigazione completi con persistWebViewData, clearCookies, clearAllCookies, clearCache, e clearAllBrowsingData.
• Comunicazione app-pagina con postMessage(), comunicazione pagina-app con window.mobileApp.postMessage(...), e l'iniezione di script con executeScript().
• Gestione download, regole proxy native, controllo popup, supporto Google Pay, _blank gestione link e istanze browser nascoste precaricabili.

Casi d'uso comuni

Sovrapponi l'UI dell'App a un Browser Live

import { InAppBrowser } from '@capgo/capacitor-inappbrowser';

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/checkout',
  toBack: true,
  transparentBackground: true,
});

await InAppBrowser.dispatchInputEvent({
  id,
  type: 'click',
  x: 160,
  y: 420,
});

await InAppBrowser.bringToFront({ id });

Usalo per overlay di checkout, flussi di pagamento via browser, guide di supporto o qualsiasi funzione in cui i controlli Ionic debbano restare sopra il contenuto web live.

Mantieni l'App cliccabile attorno a un Browser Sheet

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/offers',
  height: window.innerHeight - 200,
  y: 0,
});

await InAppBrowser.updateDimensions({ id, height: window.innerHeight });

Un browser con dimensioni personalizzate cattura i touch solo all'interno del suo frame. Il resto dell'area visibile dell'app rimane interattivo su Android e iOS.

Evita sessioni web persistenti

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/login',
  persistWebViewData: false,
});

await InAppBrowser.clearAllBrowsingData();
await InAppBrowser.close({ id });

Usalo per il cambio account, test di checkout, impersonificazione del supporto o flussi di auth in cui cookie, cache, local storage e IndexedDB non devono sopravvivere oltre il necessario.

Precarica e scambia più WebView

const first = await InAppBrowser.openWebView({ url: 'https://example.com/a', hidden: true });
const second = await InAppBrowser.openWebView({ url: 'https://example.com/b', hidden: true });

await InAppBrowser.show({ id: first.id });
await InAppBrowser.hide({ id: first.id });
await InAppBrowser.show({ id: second.id });

Le istanze nascoste mantengono il proprio stato disponibile evitando overlay nativi che bloccano i touch dell'app.

Integra Web App avanzate

const { id } = await InAppBrowser.openWebView({
  url: 'https://example.com/portal',
  handleDownloads: true,
  openBlankTargetInWebView: true,
  hiddenPopupWindow: true,
  outboundProxyRules: [
    {
      urlRegex: '^https://example\\.com/api/',
      action: 'delegateToJs',
    },
  ],
});

await InAppBrowser.postMessage({
  id,
  detail: { source: 'app', action: 'refresh' },
});

Usa questo pattern per portali documentali, flussi di upload, help desk, videochiamate, pagine Google Pay o web app interattive che richiedono il controllo nativo senza uscire dall'app shell.

Riferimento completo

• GitHub: https://github.com/Cap-go/capacitor-inappbrowser/
• Documentazione: /docs/plugins/inappbrowser/

Continua da Utilizzo di @capgo/capacitor-inappbrowser

Se stai usando Usare @capgo/capacitor-inappbrowser per pianificare il lavoro sui plugin nativi, collegalo a @capgo/capacitor-inappbrowser per i dettagli di implementazione in @capgo/capacitor-inappbrowser, Per iniziare per i dettagli di implementazione nella guida introduttiva, Directory dei plugin di Capgo per il workflow del prodotto nella Capgo Plugin Directory, Plugin Capacitor di Capgo per i dettagli di implementazione in Plugin Capacitor di Capgo, e Aggiunta o aggiornamento dei plugin per i dettagli di implementazione in Aggiunta o aggiornamento dei plugin.