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
SFSafariViewControllerOn 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 conclearAllBrowsingData. - , comunicazione pagina-app con
postMessage(), e iniezione di script conwindow.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.