Usando @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser apre contenuti web esterni da un'app Capacitor. Utilizza open() per la superficie del browser del dispositivo o openWebView() quando la tua app ha bisogno di un WebView nativo gestito con dimensioni personalizzate, barra degli strumenti, messaggi, script, download, proxying, controllo popup, archiviazione privata o interfaccia UI di Ionic sovrapposta alla pagina.

Installa

npm install @capgo/capacitor-inappbrowser
npx cap sync

Cos'è che questo plugin espone

Flusso del browser del sistema con Chrome Custom Tabs su Android e SFSafariViewController On iOS.
Viste Web gestite che possono essere dimensionate, nascoste, mostrate, spostate dietro l'app Capacitor e riportate in primo piano.
Avanzamento di click, tocco e scorrimento con dispatchInputEvent() Situazioni in cui l'interfaccia utente dell'app si trova sopra il browser.
Navigatori a schermo parziale dove i tocchi esterni al frame della viste Web nativa passano attraverso all'app Capacitor su Android e iOS.
Pulizia dei cookie, cache e dati di navigazione completi con persistWebViewData, clearCookies, clearAllCookies, clearCache, e clearAllBrowsingData.
Comunicazione tra app e pagina con postMessage()Comunicazione tra pagina e app con window.mobileApp.postMessage(...), e iniezione di script con executeScript().
Gestione dei download, regole di proxy native per primi, controllo dei popup, supporto a Google Pay _blank Gestione dei link, e istanze di browser nascoste e precaricabili.

Uso comune

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

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

Tieni l'app cliccabile intorno a una finestra del 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.

Evita le 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.

Carica in anticipo e sostituisci 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 });

Istanze nascoste mantengono lo stato disponibile mentre evitano le sovrapposizioni native che bloccano i tocchi dell'app.

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

Riferimento completo

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

Continua con l'uso di @capgo/capacitor-inappbrowser

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

In App Browser

Tutoriale sull'In App Browser