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'è che questo plugin espone

Flusso del browser di 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.
Clic, tocco e scorrimento in avanti con dispatchInputEvent() Quando l'interfaccia utente dell'app si trova sopra il browser.
Browser a schermo parziale dove i tocchi fuori dal 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 app-pagina con postMessage()Comunicazione pagina-app con window.mobileApp.postMessage(...), e iniezione di script con executeScript().
Gestione dei download, regole di proxy native per primi, controllo dei popup, supporto 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 funzionalità in cui i controlli di 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 in cui cookie, cache, 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 });

Istanze nascoste mantengono lo stato disponibile mentre evitano sovrapposizioni native che bloccano 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 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 da Utilizza @capgo/capacitor-inappbrowser

Se stai utilizzando Utilizza @capgo/capacitor-inappbrowser per pianificare il lavoro di plugin nativo, collegalo con @capgo/capacitor-inappbrowser per i dettagli di implementazione in @capgo/capacitor-inappbrowser Guida di avvio per i dettagli di implementazione in Guida di avvio 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