Utilizza @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser apre contenuto web esterno da un'app Capacitor. Utilizza open() per la superficie del browser della piattaforma, o openWebView() When il tuo app richiede una WebView nativa gestita con dimensione personalizzata, barra degli strumenti, messaggi, script, download, proxying, controllo popup, archiviazione privata o UI Ionic sovrapposta alla pagina.

Installa

npm install @capgo/capacitor-inappbrowser
npx cap sync

Cos'è questo plugin

Flusso del browser del sistema con Chrome Custom Tabs su Android e SFSafariViewController su iOS.
WebView gestiti che possono essere dimensionati, nascosti, mostrati, spostati dietro l'app Capacitor e riportati in primo piano.
Avanti con click, tocco e scorrimento quando l'UI dell'app si trova sopra il browser. dispatchInputEvent() Navigatori a schermo parziale dove i tocchi fuori dal frame del WebView nativo passano attraverso all'app __CAPGO_KEEP_0__ su Android e iOS.
Partial-screen browsers where taps outside the native WebView frame pass through to the Capacitor app on Android and iOS.
, e persistWebViewData, clearCookies, clearAllCookies, clearCacheComunicazione app-pagina con clearAllBrowsingData.
Install postMessage()comunicazione tra pagina e app con window.mobileApp.postMessage(...)e iniezione di script con executeScript().
Download handling, regole proxy native-first, controllo popup, supporto Google Pay, _blank gestione dei link e istanze di browser preloadabili nascoste.

Uso comune

Mettere l'interfaccia dell'app sopra una 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 });

Usa questo per overlay di checkout, flussi di pagamento supportati da browser, flussi di supporto guidati o per qualsiasi feature in cui i controlli di Ionic devono rimanere sopra il contenuto web live.

Tenere l'app cliccabile intorno a una finestra di browser

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 personalizzato di dimensioni custom solo cattura tocchi all'interno della sua finestra. L'area dell'app visibile rimane tappabile su Android e iOS.

Evitare sessioni web persistenti

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

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

Usa questo per il passaggio di account, test di checkout, impersonificazione del supporto, o flussi di autenticazione dove cookie, cache, storage locale e IndexedDB non dovrebbero sopravvivere più a lungo del necessario.

Precaricare e sostituire 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 conservano lo stato disponibile evitando le sovrapposizioni native che bloccano i tocchi dell'applicazione.

Inserisci un'app web 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 modello per porte documentali, flussi di caricamento, banchi di supporto, chiamate video, pagine di pagamento Google o app web interattive che richiedono il controllo dell'app nativa senza lasciare la shell dell'applicazione.

Riferimento completo

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

Continua da Utilizzo di @capgo/capacitor-inappbrowser

Se stai utilizzando Utilizzo di @capgo/capacitor-inappbrowser per pianificare il lavoro del plugin nativo, connettilo con @capgo/capacitor-inappbrowser per i dettagli di implementazione in @capgo/capacitor-inappbrowser, Inizio per i dettagli di implementazione in Inizio, Capgo Directory Plugin per il flusso di lavoro del prodotto in Capgo Directory Plugin, Capacitor Plugin da Capgo per i dettagli di implementazione in Capacitor Plugin da Capgo, e Aggiungere o Aggiornare Plugin per i dettagli di implementazione in Aggiungere o Aggiornare Plugin.

Browser in-app

Tutorial sul Browser in App