In App Browser plugin Capacitor

Usando @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser apre contenuti web esterni da un'app Capacitor. Usa open() per il 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.

Installazione

npm install @capgo/capacitor-inappbrowser
npx cap sync

Cosa espone il plugin

• Flusso del browser di sistema con 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 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 precaricate.

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 lo stato disponibile evitando overlay nativi che bloccano i touch dell'app.

Incorpora una web app avanzata

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 dalla shell dell'app.

Riferimento completo

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

Continua da Utilizzo di @capgo/capacitor-inappbrowser

Se stai usando Utilizzo di @capgo/capacitor-inappbrowser per pianificare il lavoro sui plugin nativi, collegalo a @capgo/capacitor-inappbrowser per i dettagli di implementazione in @capgo/capacitor-inappbrowser, Guida rapida per i dettagli di implementazione in Getting Started, Directory dei plugin Capgo per il workflow del prodotto nella Directory dei plugin Capgo, Plugin Capacitor di Capgo per i dettagli di implementazione nei plugin Capacitor di Capgo, e Aggiungere o aggiornare i plugin per i dettagli di implementazione in Aggiungere o aggiornare i plugin.