Utilizza @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 layer UI di Ionic sopra la 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.
Clicca, tocca e scorri in avanti con dispatchInputEvent() quando l'interfaccia utente dell'app si trova sopra il browser.
Browsers a schermo parziale dove i tocchi all'esterno del frame del WebView nativo 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 app-pagina con postMessage(), comunicazione pagina-app con window.mobileApp.postMessage(...), e iniezione 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 preloadabili.

Casi d'uso comuni

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

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

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 });

Una finestra del browser personalizzata cattura solo i tocchi all'interno della sua cornice. 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 cambio account, i test di checkout, l'impersonazione del supporto, o i flussi di autenticazione in cui i cookie, il cache, lo storage locale e IndexedDB non dovrebbero sopravvivere più a lungo del necessario.

Precarica e Sostituisci Multiple WebViews

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 });

Istituzioni 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 modello per i portali dei documenti, i flussi di caricamento, i banchi di supporto, le chiamate video, le pagine di Google Pay o le app web interattive che richiedono il controllo dell'app nativa senza lasciare la shell dell'app.

Riferimento Completo

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

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

Se stai utilizzando Utilizza @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 i dettagli di implementazione in Capacitor Plugins realizzati da Capgo, e Aggiungere o Aggiornare Plugins per i dettagli di implementazione in Aggiungere o Aggiornare Plugins.

Browser in-app

Tutorial sull'In App Browser