Usando @capgo/capacitor-inappbrowser

@capgo/capacitor-inappbrowser apre contenuti web esterni da un'app Capacitor. Utilizza open() per la superficie del browser della piattaforma, 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

Cosa Questo Plugin Espone

Flusso del browser del sistema con Chrome Custom Tabs su Android e SFSafariViewController On iOS.
WebView gestiti che possono essere dimensionati, nascosti, mostrati, spostati dietro l'app Capacitor e riportati in primo piano.
Avanti con click, touch e scroll quando l'interfaccia utente dell'app si trova sopra il browser. dispatchInputEvent() Browsing parziale con schermo dove i tocchi al di fuori del frame del WebView nativo passano al'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.
, comunicazione pagina-app con postMessage(), e iniezione di script con window.mobileApp.postMessage(...)Gestione dei download, regole proxy native per primi, controllo dei popup, supporto Google Pay, executeScript().
Gestione dei link e istanze di browser nascoste e caricabili in precarico. _blank __CAPGO_KEEP_0__

Uso comune

Posiziona l'interfaccia dell'app sopra un browser in esecuzione

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 in esecuzione.

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 del suo frame. L'area dell'app visibile rimane cliccabile 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, la cache, lo storage locale e IndexedDB non dovrebbero sopravvivere più a lungo del necessario.

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

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 pattern 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 da Utilizzare @capgo/capacitor-inappbrowser

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

In App Browser

Tutorial sull'In App Browser