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
SFSafariViewControllersu 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, eclearAllBrowsingData. - Comunicazione app-pagina con
postMessage(), comunicazione pagina-app conwindow.mobileApp.postMessage(...), e iniezione script conexecuteScript(). - Gestione dei download, regole di proxy native per primi, controllo dei popup, supporto a Google Pay,
_blankgestione 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.