---
description: Capacitor plugin to open URLs in the external browser, the system browser, or an embedded web view on Android, iOS, and the web.
title: Capacitor In-App Browser Plugin - Capawesome
image: https://capawesome.io/docs/assets/images/social/sdks/capacitor/in-app-browser.png
---
[Skip to content ](#capacitor-in-app-browser-plugin)
[π₯οΈ Introducing the **Capacitor Electron Platform** β build desktop apps for macOS, Windows, and Linux. Free & open source. ](/blog/announcing-the-capacitor-electron-platform/)
* [ SDKs ](/docs/sdks/)
* [ Formbricks ](/docs/sdks/capacitor/formbricks/)
* [ Geocoder ](/docs/sdks/capacitor/geocoder/)
* [ Google Sign-In ](/docs/sdks/capacitor/google-sign-in/)
* [ Grafana Faro ](/docs/sdks/capacitor/grafana-faro/)
* [ Gyroscope ](/docs/sdks/capacitor/gyroscope/)
* [ Haptics ](/docs/sdks/capacitor/haptics/)
* [ Home Indicator ](/docs/sdks/capacitor/home-indicator/)
* In-App Browser [ In-App Browser ](/docs/sdks/capacitor/in-app-browser/)
* [ iOS ](#ios)
* [ Configuration ](#configuration)
* [ Usage ](#usage)
* [ API ](#api)
* [ Type Aliases ](#type-aliases)
* [ Messaging ](#messaging)
* [ Platform Behavior ](#platform-behavior)
* [ FAQ ](#faq)
* [ Related Plugins ](#related-plugins)
* [ Newsletter ](#newsletter)
* [ Changelog ](#changelog)
* [ License ](#license)
* [ Install Referrer ](/docs/sdks/capacitor/install-referrer/)
* [ Intercom ](/docs/sdks/capacitor/intercom/)
* [ Intune ](/docs/sdks/capacitor/intune/)
* [ Keep Awake ](/docs/sdks/capacitor/keep-awake/)
* [ libSQL ](/docs/sdks/capacitor/libsql/)
* [ Light Sensor ](/docs/sdks/capacitor/light-sensor/)
* [ Live Update ](/docs/sdks/capacitor/live-update/)
* [ Localization ](/docs/sdks/capacitor/localization/)
* [ Mail Composer ](/docs/sdks/capacitor/mail-composer/)
* [ Managed Configurations ](/docs/sdks/capacitor/managed-configurations/)
* [ Maps Launcher ](/docs/sdks/capacitor/maps-launcher/)
* [ Media Session ](/docs/sdks/capacitor/media-session/)
* [ ML Kit ](/docs/sdks/capacitor/mlkit/)
* [ Navigation Bar ](/docs/sdks/capacitor/navigation-bar/)
* [ Network ](/docs/sdks/capacitor/network/)
* [ NFC ](/docs/sdks/capacitor/nfc/)
* [ Node.js ](/docs/sdks/capacitor/nodejs/)
* [ OAuth ](/docs/sdks/capacitor/oauth/)
* [ Passkeys ](/docs/sdks/capacitor/passkeys/)
* [ Password Autofill ](/docs/sdks/capacitor/password-autofill/)
* [ PDF Generator ](/docs/sdks/capacitor/pdf-generator/)
* [ PDF Viewer ](/docs/sdks/capacitor/pdf-viewer/)
* [ Pedometer ](/docs/sdks/capacitor/pedometer/)
* [ Permissions ](/docs/sdks/capacitor/permissions/)
* [ Phone Dialer ](/docs/sdks/capacitor/phone-dialer/)
* [ Photo Editor ](/docs/sdks/capacitor/photo-editor/)
* [ Photo Manipulator ](/docs/sdks/capacitor/photo-manipulator/)
* [ PixLive ](/docs/sdks/capacitor/pixlive/)
* [ PostHog ](/docs/sdks/capacitor/posthog/)
* [ Printer ](/docs/sdks/capacitor/printer/)
* [ Privacy Screen ](/docs/sdks/capacitor/privacy-screen/)
* [ Proximity Sensor ](/docs/sdks/capacitor/proximity-sensor/)
* [ Purchases ](/docs/sdks/capacitor/purchases/)
* [ RealtimeKit ](/docs/sdks/capacitor/realtimekit/)
* [ Root Detection ](/docs/sdks/capacitor/root-detection/)
* [ Screen Brightness ](/docs/sdks/capacitor/screen-brightness/)
* [ Screen Orientation ](/docs/sdks/capacitor/screen-orientation/)
* [ Screen Reader ](/docs/sdks/capacitor/screen-reader/)
* [ Screenshot ](/docs/sdks/capacitor/screenshot/)
* [ Secure Preferences ](/docs/sdks/capacitor/secure-preferences/)
* [ Settings Launcher ](/docs/sdks/capacitor/settings-launcher/)
* [ Shake ](/docs/sdks/capacitor/shake/)
* [ Silent Mode ](/docs/sdks/capacitor/silent-mode/)
* [ SIM ](/docs/sdks/capacitor/sim/)
* [ SMS Composer ](/docs/sdks/capacitor/sms-composer/)
* [ Speech Recognition ](/docs/sdks/capacitor/speech-recognition/)
* [ Speech Synthesis ](/docs/sdks/capacitor/speech-synthesis/)
* [ Share Target ](/docs/sdks/capacitor/share-target/)
* [ Square Mobile Payments ](/docs/sdks/capacitor/square-mobile-payments/)
* [ SQLite ](/docs/sdks/capacitor/sqlite/)
* [ Superwall ](/docs/sdks/capacitor/superwall/)
* [ System WebView ](/docs/sdks/capacitor/system-webview/)
* [ Tauri ](/docs/sdks/capacitor/tauri/)
* [ Text Interaction ](/docs/sdks/capacitor/text-interaction/)
* [ Text Zoom ](/docs/sdks/capacitor/text-zoom/)
* [ Thermal State ](/docs/sdks/capacitor/thermal-state/)
* [ Toast ](/docs/sdks/capacitor/toast/)
* [ Torch ](/docs/sdks/capacitor/torch/)
* [ Vault ](/docs/sdks/capacitor/vault/)
* [ Volume ](/docs/sdks/capacitor/volume/)
* [ Wallet ](/docs/sdks/capacitor/wallet/)
* [ Wifi ](/docs/sdks/capacitor/wifi/)
* [ YouTube Player ](/docs/sdks/capacitor/youtube-player/)
* [ Zip ](/docs/sdks/capacitor/zip/)
* [ Cordova ](/docs/sdks/cordova/)
* [ Cloud ](/docs/cloud/)
* [ Integrations ](/docs/cloud/live-updates/integrations/)
* Concepts
* Reference
* [ Troubleshooting ](/docs/cloud/live-updates/troubleshooting/)
* [ FAQ ](/docs/cloud/live-updates/faq/)
* [ Native Builds ](/docs/cloud/native-builds/)
* [ Set Up Environments ](/docs/cloud/native-builds/environments/)
* [ Overwrite Native Configurations ](/docs/cloud/native-builds/native-configurations/)
* [ Auto-Increment Build Numbers ](/docs/cloud/native-builds/auto-incrementing-build-numbers/)
* [ Configure the Web Build Script ](/docs/cloud/native-builds/web-build-script/)
* [ Build from a Monorepo ](/docs/cloud/native-builds/monorepo/)
* [ Use pnpm, Yarn, or bun ](/docs/cloud/native-builds/package-managers/)
* [ Install Private npm Packages ](/docs/cloud/native-builds/npm-private-registry/)
* [ Override the Java Version ](/docs/cloud/native-builds/override-java-version/)
* [ Custom iOS Provisioning Profiles ](/docs/cloud/native-builds/custom-ios-provisioning-profiles/)
* [ Build without Git ](/docs/cloud/native-builds/build-without-git/)
* [ Access Git Behind a Firewall ](/docs/cloud/native-builds/firewall-access/)
* [ Integrations ](/docs/cloud/native-builds/integrations/)
* Reference
* [ Troubleshooting ](/docs/cloud/native-builds/troubleshooting/)
* [ FAQ ](/docs/cloud/native-builds/faq/)
* [ App Store Publishing ](/docs/cloud/app-store-publishing/)
* [ Submit a Build ](/docs/cloud/app-store-publishing/submit-a-build/)
* [ Submit Automatically After a Build ](/docs/cloud/app-store-publishing/submit-automatically/)
* [ Troubleshooting ](/docs/cloud/app-store-publishing/troubleshooting/)
* [ FAQ ](/docs/cloud/app-store-publishing/faq/)
* [ Automations ](/docs/cloud/automations/)
* [ Reference ](/docs/cloud/automations/reference/)
* [ Troubleshooting ](/docs/cloud/automations/troubleshooting/)
* [ FAQ ](/docs/cloud/automations/faq/)
* [ Assist ](/docs/cloud/assist/)
* [ CLI ](/docs/cloud/cli/)
* APIs and SDKs
* [ Webhooks ](/docs/cloud/webhooks/)
* [ Integrations ](/docs/cloud/integrations/)
* Account
* [ Organization ](/docs/cloud/organizations/)
* [ Two-Factor Enforcement ](/docs/cloud/organizations/two-factor-authentication/)
* [ Audit Logs ](/docs/cloud/organizations/audit-logs/)
* [ Billing ](/docs/cloud/organizations/billing/)
* [ License Keys ](/docs/cloud/license-keys/)
* [ AI ](/docs/ai/)
* [ Insiders ](/docs/insiders/)
* [ Billing & Plans ](/docs/insiders/billing-and-plans/)
* [ FAQ ](/docs/insiders/faq/)
* [ License ](https://capawesome.io/legal/eula/)
* [ Support ](/docs/support/)
* [ Contributing ](/docs/contributing/)
* Contributing code
* [ Code of Conduct ](/docs/contributing/code-of-conduct/)
* [ Questions ](https://docs.github.com/en/discussions/collaborating-with-your-community-using-discussions/participating-in-a-discussion#creating-a-discussion)
* [ Blog ](/blog/)
* Categories
* [ iOS ](#ios)
* [ Configuration ](#configuration)
* [ Usage ](#usage)
* [ API ](#api)
* [ Type Aliases ](#type-aliases)
* [ Messaging ](#messaging)
* [ Platform Behavior ](#platform-behavior)
* [ FAQ ](#faq)
* [ Related Plugins ](#related-plugins)
* [ Newsletter ](#newsletter)
* [ Changelog ](#changelog)
* [ License ](#license)
# Capacitor In-App Browser Plugin[ΒΆ](#capacitor-in-app-browser-plugin "Permanent link")
Capacitor plugin to open URLs in the external browser, the system browser or an embedded web view.
[  ](https://cloud.capawesome.io/)
## Features[ΒΆ](#features "Permanent link")
The Capacitor In-App Browser plugin is one of the most complete in-app browsing solutions for Capacitor apps. Here are some of the key features:
* π **Three browser modes**: Open URLs in the external browser, the system browser (Custom Tabs on Android, `SFSafariViewController` on iOS) or an embedded web view.
* π§ **Navigation events**: Get notified when the browser is closed, a page has been loaded or a navigation has been completed.
* π **JavaScript execution**: Execute any JavaScript code in the embedded web view.
* π¬ **Messaging**: Exchange messages between your app and the web page in both directions.
* π¨ **Toolbar theming**: Customize the toolbar color, title, close button and navigation buttons.
* πͺ **Session control**: Clear the cache and session data, or use an isolated data store on iOS.
* π₯ **Media permissions**: Camera and microphone permission requests from web pages are forwarded to the app.
* π¦ **CocoaPods & SPM**: Supports CocoaPods and Swift Package Manager for iOS.
* π **Up-to-date**: Always supports the latest Capacitor version.
Missing a feature? Just [open an issue](https://github.com/capawesome-team/capacitor-plugins/issues) and we'll take a look!
## Use Cases[ΒΆ](#use-cases "Permanent link")
The In-App Browser plugin is typically used whenever an app needs to display web content without losing the user, for example:
* **External links**: Open links, terms of service, or documentation in the system browser without leaving the app context.
* **Login and checkout flows**: Open a web-based flow in the embedded web view and watch for a redirect using the `browserUrlChanged` event.
* **Hybrid web content**: Embed a web page with a themed native toolbar and exchange messages between the app and the page.
* **Background loading**: Load a URL in a hidden web view with the `visible` option and present it once the page has loaded.
* **Session control**: Clear the cache and session data of the web view, or use an isolated data store on iOS.
## Compatibility[ΒΆ](#compatibility "Permanent link")
| Plugin Version | Capacitor Version | Status |
| -------------- | ----------------- | -------------- |
| 0.x.x | \>=8.x.x | Active support |
## Installation[ΒΆ](#installation "Permanent link")
You can use our **AI-Assisted Setup** to install the plugin. Add the [Capawesome Skills](https://github.com/capawesome-team/skills) to your AI tool using the following command:
`[](#%5F%5Fcodelineno-0-1)npx skills add capawesome-team/skills --skill capacitor-plugins
`
Then use the following prompt:
`` [](#%5F%5Fcodelineno-1-1) Use the `capacitor-plugins` skill from `capawesome-team/skills` to install the `@capawesome/capacitor-in-app-browser` plugin in my project.
``
If you prefer **Manual Setup**, install the plugin by running the following commands and follow the platform-specific instructions below:
`[](#%5F%5Fcodelineno-2-1)npm install @capawesome/capacitor-in-app-browser
[](#%5F%5Fcodelineno-2-2)npx cap sync
`
### Android[ΒΆ](#android "Permanent link")
#### Variables[ΒΆ](#variables "Permanent link")
This plugin will use the following project variables (defined in your appβs `variables.gradle` file):
* `$androidxBrowserVersion` version of `androidx.browser:browser` (default: `1.9.0`)
#### Permissions[ΒΆ](#permissions "Permanent link")
If web pages opened in the embedded web view should be able to access the camera or microphone, the following elements must be added to your `AndroidManifest.xml` before or after the `application` tag:
`[](#%5F%5Fcodelineno-3-1)
[](#%5F%5Fcodelineno-3-2)
[](#%5F%5Fcodelineno-3-3)
[](#%5F%5Fcodelineno-3-4)
`
The permissions must also be granted before a web page requests access to the camera or microphone.
### iOS[ΒΆ](#ios "Permanent link")
#### Privacy Descriptions[ΒΆ](#privacy-descriptions "Permanent link")
If web pages opened in the embedded web view should be able to access the camera or microphone, the `NSCameraUsageDescription` and `NSMicrophoneUsageDescription` keys must be added to the `Info.plist` file of your app:
`[](#%5F%5Fcodelineno-4-1)NSCameraUsageDescription
[](#%5F%5Fcodelineno-4-2)The camera is used by websites opened in the in-app browser.
[](#%5F%5Fcodelineno-4-3)NSMicrophoneUsageDescription
[](#%5F%5Fcodelineno-4-4)The microphone is used by websites opened in the in-app browser.
`
## Configuration[ΒΆ](#configuration "Permanent link")
No configuration required for this plugin.
## Usage[ΒΆ](#usage "Permanent link")
The following examples show how to open URLs in the external, system, and in-app browsers, control the embedded web view, exchange messages with the loaded page, clear browsing data, and listen for browser events.
### Open a URL in the external browser[ΒΆ](#open-a-url-in-the-external-browser "Permanent link")
Open a URL in the default browser app of the device. Since the browser is opened in a separate app, no events are emitted in this mode:
`[](#%5F%5Fcodelineno-5-1)import { InAppBrowser } from '@capawesome/capacitor-in-app-browser';
[](#%5F%5Fcodelineno-5-2)
[](#%5F%5Fcodelineno-5-3)const openInExternalBrowser = async () => {
[](#%5F%5Fcodelineno-5-4) await InAppBrowser.openInExternalBrowser({
[](#%5F%5Fcodelineno-5-5) url: 'https://capawesome.io',
[](#%5F%5Fcodelineno-5-6) });
[](#%5F%5Fcodelineno-5-7)};
`
### Open a URL in the system browser[ΒΆ](#open-a-url-in-the-system-browser "Permanent link")
Open a URL in the system browser (Custom Tabs on Android, `SFSafariViewController` on iOS) and customize the toolbar with platform-specific options. Only available on Android and iOS:
`[](#%5F%5Fcodelineno-6-1)import { InAppBrowser } from '@capawesome/capacitor-in-app-browser';
[](#%5F%5Fcodelineno-6-2)
[](#%5F%5Fcodelineno-6-3)const openInSystemBrowser = async () => {
[](#%5F%5Fcodelineno-6-4) await InAppBrowser.openInSystemBrowser({
[](#%5F%5Fcodelineno-6-5) url: 'https://capawesome.io',
[](#%5F%5Fcodelineno-6-6) android: {
[](#%5F%5Fcodelineno-6-7) showTitle: true,
[](#%5F%5Fcodelineno-6-8) toolbarColor: '#008080',
[](#%5F%5Fcodelineno-6-9) },
[](#%5F%5Fcodelineno-6-10) ios: {
[](#%5F%5Fcodelineno-6-11) dismissButtonStyle: 'close',
[](#%5F%5Fcodelineno-6-12) toolbarColor: '#008080',
[](#%5F%5Fcodelineno-6-13) },
[](#%5F%5Fcodelineno-6-14) });
[](#%5F%5Fcodelineno-6-15)};
`
### Open a URL in an embedded web view[ΒΆ](#open-a-url-in-an-embedded-web-view "Permanent link")
Open a URL in an embedded web view with a native toolbar whose color, title, and buttons can be customized. Only available on Android and iOS:
`[](#%5F%5Fcodelineno-7-1)import { InAppBrowser } from '@capawesome/capacitor-in-app-browser';
[](#%5F%5Fcodelineno-7-2)
[](#%5F%5Fcodelineno-7-3)const openInWebView = async () => {
[](#%5F%5Fcodelineno-7-4) await InAppBrowser.openInWebView({
[](#%5F%5Fcodelineno-7-5) url: 'https://capawesome.io',
[](#%5F%5Fcodelineno-7-6) toolbar: {
[](#%5F%5Fcodelineno-7-7) backgroundColor: '#008080',
[](#%5F%5Fcodelineno-7-8) color: '#FFFFFF',
[](#%5F%5Fcodelineno-7-9) showNavigationButtons: true,
[](#%5F%5Fcodelineno-7-10) },
[](#%5F%5Fcodelineno-7-11) });
[](#%5F%5Fcodelineno-7-12)};
`
### Close the browser[ΒΆ](#close-the-browser "Permanent link")
Close the currently open browser. This closes browsers opened with `openInWebView(...)` or `openInSystemBrowser(...)`. Only available on Android and iOS:
`[](#%5F%5Fcodelineno-8-1)import { InAppBrowser } from '@capawesome/capacitor-in-app-browser';
[](#%5F%5Fcodelineno-8-2)
[](#%5F%5Fcodelineno-8-3)const close = async () => {
[](#%5F%5Fcodelineno-8-4) await InAppBrowser.close();
[](#%5F%5Fcodelineno-8-5)};
`
### Execute JavaScript in the web view[ΒΆ](#execute-javascript-in-the-web-view "Permanent link")
Execute any JavaScript code in the currently open web view. This method is only available for browsers opened with `openInWebView(...)` on Android and iOS:
`[](#%5F%5Fcodelineno-9-1)import { InAppBrowser } from '@capawesome/capacitor-in-app-browser';
[](#%5F%5Fcodelineno-9-2)
[](#%5F%5Fcodelineno-9-3)const executeScript = async () => {
[](#%5F%5Fcodelineno-9-4) const { result } = await InAppBrowser.executeScript({
[](#%5F%5Fcodelineno-9-5) script: 'document.title',
[](#%5F%5Fcodelineno-9-6) });
[](#%5F%5Fcodelineno-9-7) return result;
[](#%5F%5Fcodelineno-9-8)};
`
### Post a message to the web page[ΒΆ](#post-a-message-to-the-web-page "Permanent link")
Post a message to the currently open web view. The web page receives the message by listening for the `capacitorInAppBrowserMessage` window event, see [Messaging](#messaging). This method is only available for browsers opened with `openInWebView(...)` on Android and iOS:
`[](#%5F%5Fcodelineno-10-1)import { InAppBrowser } from '@capawesome/capacitor-in-app-browser';
[](#%5F%5Fcodelineno-10-2)
[](#%5F%5Fcodelineno-10-3)const postMessage = async () => {
[](#%5F%5Fcodelineno-10-4) await InAppBrowser.postMessage({
[](#%5F%5Fcodelineno-10-5) data: { name: 'Capawesome' },
[](#%5F%5Fcodelineno-10-6) });
[](#%5F%5Fcodelineno-10-7)};
`
### Clear the cache and session data[ΒΆ](#clear-the-cache-and-session-data "Permanent link")
Clear the cache or the session data (cookies and web storage) of the web view. Only available on Android and iOS:
`[](#%5F%5Fcodelineno-11-1)import { InAppBrowser } from '@capawesome/capacitor-in-app-browser';
[](#%5F%5Fcodelineno-11-2)
[](#%5F%5Fcodelineno-11-3)const clearCache = async () => {
[](#%5F%5Fcodelineno-11-4) await InAppBrowser.clearCache();
[](#%5F%5Fcodelineno-11-5)};
[](#%5F%5Fcodelineno-11-6)
[](#%5F%5Fcodelineno-11-7)const clearSessionData = async () => {
[](#%5F%5Fcodelineno-11-8) await InAppBrowser.clearSessionData();
[](#%5F%5Fcodelineno-11-9)};
`
### Listen for browser events[ΒΆ](#listen-for-browser-events "Permanent link")
Get notified when the browser is closed, a message is received, a navigation has been completed, a page has been loaded, or the URL has changed:
`[](#%5F%5Fcodelineno-12-1)import { InAppBrowser } from '@capawesome/capacitor-in-app-browser';
[](#%5F%5Fcodelineno-12-2)
[](#%5F%5Fcodelineno-12-3)const addListeners = async () => {
[](#%5F%5Fcodelineno-12-4) await InAppBrowser.addListener('browserClosed', () => {
[](#%5F%5Fcodelineno-12-5) console.log('Browser closed');
[](#%5F%5Fcodelineno-12-6) });
[](#%5F%5Fcodelineno-12-7) await InAppBrowser.addListener('browserMessageReceived', event => {
[](#%5F%5Fcodelineno-12-8) console.log('Message received', event.data);
[](#%5F%5Fcodelineno-12-9) });
[](#%5F%5Fcodelineno-12-10) await InAppBrowser.addListener('browserNavigationCompleted', event => {
[](#%5F%5Fcodelineno-12-11) console.log('Navigation completed', event.url);
[](#%5F%5Fcodelineno-12-12) });
[](#%5F%5Fcodelineno-12-13) await InAppBrowser.addListener('browserPageLoaded', () => {
[](#%5F%5Fcodelineno-12-14) console.log('Browser page loaded');
[](#%5F%5Fcodelineno-12-15) });
[](#%5F%5Fcodelineno-12-16) await InAppBrowser.addListener('browserUrlChanged', event => {
[](#%5F%5Fcodelineno-12-17) console.log('URL changed', event.url);
[](#%5F%5Fcodelineno-12-18) });
[](#%5F%5Fcodelineno-12-19)};
`
## API[ΒΆ](#api "Permanent link")
* [clearCache()](#clearcache)
* [clearSessionData()](#clearsessiondata)
* [close()](#close)
* [executeScript(...)](#executescript)
* [getCookies(...)](#getcookies)
* [openInExternalBrowser(...)](#openinexternalbrowser)
* [openInSystemBrowser(...)](#openinsystembrowser)
* [openInWebView(...)](#openinwebview)
* [postMessage(...)](#postmessage)
* [show()](#show)
* [addListener('browserClosed', ...)](#addlistenerbrowserclosed-)
* [addListener('browserMessageReceived', ...)](#addlistenerbrowsermessagereceived-)
* [addListener('browserNavigationCompleted', ...)](#addlistenerbrowsernavigationcompleted-)
* [addListener('browserPageLoaded', ...)](#addlistenerbrowserpageloaded-)
* [addListener('browserUrlChanged', ...)](#addlistenerbrowserurlchanged-)
* [removeAllListeners()](#removealllisteners)
* [Interfaces](#interfaces)
* [Type Aliases](#type-aliases)
### clearCache()[ΒΆ](#clearcache "Permanent link")
`[](#%5F%5Fcodelineno-13-1)clearCache() => Promise
`
Clear the cache of the web view.
Only available on Android and iOS.
**Since:** 0.1.0
---
### clearSessionData()[ΒΆ](#clearsessiondata "Permanent link")
`[](#%5F%5Fcodelineno-14-1)clearSessionData() => Promise
`
Clear the session data (cookies and web storage) of the web view.
Only available on Android and iOS.
**Since:** 0.1.0
---
### close()[ΒΆ](#close "Permanent link")
`[](#%5F%5Fcodelineno-15-1)close() => Promise
`
Close the currently open browser.
This closes browsers opened with `openInWebView(...)` or `openInSystemBrowser(...)`.
Only available on Android and iOS.
**Since:** 0.1.0
---
### executeScript(...)[ΒΆ](#executescript "Permanent link")
`[](#%5F%5Fcodelineno-16-1)executeScript(options: ExecuteScriptOptions) => Promise
`
Execute a JavaScript script in the currently open web view.
This method is only available for browsers opened with `openInWebView(...)`.
Only available on Android and iOS.
| Param | Type |
| ----------- | --------------------------------------------- |
| **options** | [ExecuteScriptOptions](#executescriptoptions) |
**Returns:** `Promise<[ExecuteScriptResult](#executescriptresult)>`
**Since:** 0.1.0
---
### getCookies(...)[ΒΆ](#getcookies "Permanent link")
`[](#%5F%5Fcodelineno-17-1)getCookies(options: GetCookiesOptions) => Promise
`
Get the cookies for a specific URL.
On iOS, only cookies from the shared data store are returned. Cookies from a web view opened with `dataStore: 'isolated'` are not included.
Only available on Android and iOS.
| Param | Type |
| ----------- | --------------------------------------- |
| **options** | [GetCookiesOptions](#getcookiesoptions) |
**Returns:** `Promise<[GetCookiesResult](#getcookiesresult)>`
**Since:** 0.1.0
---
### openInExternalBrowser(...)[ΒΆ](#openinexternalbrowser "Permanent link")
`[](#%5F%5Fcodelineno-18-1)openInExternalBrowser(options: OpenInExternalBrowserOptions) => Promise
`
Open a URL in the default browser app of the device.
| Param | Type |
| ----------- | ------------------------------------------------------------- |
| **options** | [OpenInExternalBrowserOptions](#openinexternalbrowseroptions) |
**Since:** 0.1.0
---
### openInSystemBrowser(...)[ΒΆ](#openinsystembrowser "Permanent link")
`[](#%5F%5Fcodelineno-19-1)openInSystemBrowser(options: OpenInSystemBrowserOptions) => Promise
`
Open a URL in the system browser (Custom Tabs on Android, `SFSafariViewController` on iOS).
Only available on Android and iOS.
| Param | Type |
| ----------- | --------------------------------------------------------- |
| **options** | [OpenInSystemBrowserOptions](#openinsystembrowseroptions) |
**Since:** 0.1.0
---
### openInWebView(...)[ΒΆ](#openinwebview "Permanent link")
`[](#%5F%5Fcodelineno-20-1)openInWebView(options: OpenInWebViewOptions) => Promise
`
Open a URL in an embedded web view with a native toolbar.
Only available on Android and iOS.
| Param | Type |
| ----------- | --------------------------------------------- |
| **options** | [OpenInWebViewOptions](#openinwebviewoptions) |
**Since:** 0.1.0
---
### postMessage(...)[ΒΆ](#postmessage "Permanent link")
`[](#%5F%5Fcodelineno-21-1)postMessage(options: PostMessageOptions) => Promise
`
Post a message to the currently open web view.
The web page receives the message by listening for the `capacitorInAppBrowserMessage` window event. The message data is available in the `detail` property of the event.
This method is only available for browsers opened with `openInWebView(...)`.
Only available on Android and iOS.
| Param | Type |
| ----------- | ----------------------------------------- |
| **options** | [PostMessageOptions](#postmessageoptions) |
**Since:** 0.1.0
---
### show()[ΒΆ](#show "Permanent link")
`[](#%5F%5Fcodelineno-22-1)show() => Promise
`
Show the web view if it was opened with `visible: false`.
This method is only available for browsers opened with `openInWebView(...)`.
Only available on Android and iOS.
**Since:** 0.1.0
---
### addListener('browserClosed', ...)[ΒΆ](#addlistenerbrowserclosed "Permanent link")
`[](#%5F%5Fcodelineno-23-1)addListener(eventName: 'browserClosed', listenerFunc: () => void) => Promise
`
Called when the browser is closed.
Only available on Android and iOS.
| Param | Type |
| ---------------- | --------------- |
| **eventName** | 'browserClosed' |
| **listenerFunc** | () => void |
**Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>`
**Since:** 0.1.0
---
### addListener('browserMessageReceived', ...)[ΒΆ](#addlistenerbrowsermessagereceived "Permanent link")
`[](#%5F%5Fcodelineno-24-1)addListener(eventName: 'browserMessageReceived', listenerFunc: (event: BrowserMessageReceivedEvent) => void) => Promise
`
Called when the web page posts a message to the app using the injected `window.CapacitorInAppBrowser.postMessage(...)` function.
This event is only emitted for browsers opened with `openInWebView(...)`.
Only available on Android and iOS.
| Param | Type |
| ---------------- | ---------------------------------------------------------------------------- |
| **eventName** | 'browserMessageReceived' |
| **listenerFunc** | (event: [BrowserMessageReceivedEvent](#browsermessagereceivedevent)) => void |
**Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>`
**Since:** 0.1.0
---
### addListener('browserNavigationCompleted', ...)[ΒΆ](#addlistenerbrowsernavigationcompleted "Permanent link")
`[](#%5F%5Fcodelineno-25-1)addListener(eventName: 'browserNavigationCompleted', listenerFunc: (event: BrowserNavigationCompletedEvent) => void) => Promise
`
Called when a page navigation has been completed in the web view.
This event is only emitted for browsers opened with `openInWebView(...)`.
Only available on Android and iOS.
| Param | Type |
| ---------------- | ------------------------------------------------------------------------------------ |
| **eventName** | 'browserNavigationCompleted' |
| **listenerFunc** | (event: [BrowserNavigationCompletedEvent](#browsernavigationcompletedevent)) => void |
**Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>`
**Since:** 0.1.0
---
### addListener('browserPageLoaded', ...)[ΒΆ](#addlistenerbrowserpageloaded "Permanent link")
`[](#%5F%5Fcodelineno-26-1)addListener(eventName: 'browserPageLoaded', listenerFunc: () => void) => Promise
`
Called when the initial page of the browser has finished loading.
On Android, this event is only emitted for browsers opened with `openInWebView(...)`.
Only available on Android and iOS.
| Param | Type |
| ---------------- | ------------------- |
| **eventName** | 'browserPageLoaded' |
| **listenerFunc** | () => void |
**Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>`
**Since:** 0.1.0
---
### addListener('browserUrlChanged', ...)[ΒΆ](#addlistenerbrowserurlchanged "Permanent link")
`[](#%5F%5Fcodelineno-27-1)addListener(eventName: 'browserUrlChanged', listenerFunc: (event: BrowserUrlChangedEvent) => void) => Promise
`
Called when the current URL of the web view changes, e.g. when the user navigates to a new page, a server redirect occurs, or a single-page application updates the browser history.
This event is also emitted for the initial URL and fires earlier than `browserNavigationCompleted`.
This event is only emitted for browsers opened with `openInWebView(...)`.
Only available on Android and iOS.
| Param | Type |
| ---------------- | ------------------------------------------------------------------ |
| **eventName** | 'browserUrlChanged' |
| **listenerFunc** | (event: [BrowserUrlChangedEvent](#browserurlchangedevent)) => void |
**Returns:** `Promise<[PluginListenerHandle](#pluginlistenerhandle)>`
**Since:** 0.1.0
---
### removeAllListeners()[ΒΆ](#removealllisteners "Permanent link")
`[](#%5F%5Fcodelineno-28-1)removeAllListeners() => Promise
`
Remove all listeners for this plugin.
**Since:** 0.1.0
---
### Interfaces[ΒΆ](#interfaces "Permanent link")
#### ExecuteScriptResult[ΒΆ](#executescriptresult "Permanent link")
| Prop | Type | Description | Since |
| ---------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----- |
| **result** | string \| null | The result of the script execution serialized as a JSON string. If the script does not return a JSON-serializable value, null is returned. | 0.1.0 |
#### ExecuteScriptOptions[ΒΆ](#executescriptoptions "Permanent link")
| Prop | Type | Description | Since |
| ---------- | ------ | ----------------------------------------------- | ----- |
| **script** | string | The JavaScript code to execute in the web view. | 0.1.0 |
#### GetCookiesResult[ΒΆ](#getcookiesresult "Permanent link")
| Prop | Type | Description | Since |
| ----------- | ---------------------------- | ----------------------------------------------------------- | ----- |
| **cookies** | { \[key: string\]: string; } | The cookies for the URL as a map of cookie names to values. | 0.1.0 |
#### GetCookiesOptions[ΒΆ](#getcookiesoptions "Permanent link")
| Prop | Type | Description | Since |
| ------- | ------ | ------------------------------- | ----- |
| **url** | string | The URL to get the cookies for. | 0.1.0 |
#### OpenInExternalBrowserOptions[ΒΆ](#openinexternalbrowseroptions "Permanent link")
| Prop | Type | Description | Since |
| ------- | ------ | ---------------------------------------- | ----- |
| **url** | string | The URL to open in the external browser. | 0.1.0 |
#### OpenInSystemBrowserOptions[ΒΆ](#openinsystembrowseroptions "Permanent link")
| Prop | Type | Description | Since |
| ----------- | ----------------------------------------------------------------------- | -------------------------------------------------------------------- | ----- |
| **android** | [OpenInSystemBrowserAndroidOptions](#openinsystembrowserandroidoptions) | Options that are only applied on Android. Only available on Android. | 0.1.0 |
| **ios** | [OpenInSystemBrowserIosOptions](#openinsystembrowseriosoptions) | Options that are only applied on iOS. Only available on iOS. | 0.1.0 |
| **url** | string | The URL to open in the system browser. | 0.1.0 |
#### OpenInSystemBrowserAndroidOptions[ΒΆ](#openinsystembrowserandroidoptions "Permanent link")
| Prop | Type | Description | Default | Since |
| ----------------------- | ------- | ---------------------------------------------------------------------------------------------------------- | ------- | ----- |
| **hideToolbarOnScroll** | boolean | Whether or not the toolbar should be hidden when the user scrolls down and shown when the user scrolls up. | false | 0.1.0 |
| **showTitle** | boolean | Whether or not the title of the web page should be shown in the toolbar. | false | 0.1.0 |
| **toolbarColor** | string | The background color of the toolbar as a hex color code. | | 0.1.0 |
#### OpenInSystemBrowserIosOptions[ΒΆ](#openinsystembrowseriosoptions "Permanent link")
| Prop | Type | Description | Default | Since |
| ---------------------- | ----------------------------------------- | ------------------------------------------------------------------------------------- | ------- | ----- |
| **barCollapsing** | boolean | Whether or not the toolbar should collapse when the user scrolls down. | true | 0.1.0 |
| **dismissButtonStyle** | [DismissButtonStyle](#dismissbuttonstyle) | The style of the dismiss button in the toolbar. | 'done' | 0.1.0 |
| **readerMode** | boolean | Whether or not the reader mode should be entered if it is available for the web page. | false | 0.1.0 |
| **toolbarColor** | string | The background color of the toolbar as a hex color code. | | 0.1.0 |
#### OpenInWebViewOptions[ΒΆ](#openinwebviewoptions "Permanent link")
| Prop | Type | Description | Default | Since |
| ----------------------------------- | ----------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ----- |
| **android** | [OpenInWebViewAndroidOptions](#openinwebviewandroidoptions) | Options that are only applied on Android. Only available on Android. | | 0.1.0 |
| **dataStore** | [WebViewDataStore](#webviewdatastore) | The data store to use for the web view. On Android, this option is ignored. The web view always uses the app-global (shared) data store. Only available on iOS. | 'shared' | 0.1.0 |
| **headers** | { \[key: string\]: string; } | Additional HTTP headers to send with the initial request. | | 0.1.0 |
| **ios** | [OpenInWebViewIosOptions](#openinwebviewiosoptions) | Options that are only applied on iOS. Only available on iOS. | | 0.1.0 |
| **mediaPlaybackRequiresUserAction** | boolean | Whether or not media playback requires user action. | false | 0.1.0 |
| **toolbar** | [WebViewToolbarOptions](#webviewtoolbaroptions) | Options for the toolbar of the web view. | | 0.1.0 |
| **url** | string | The URL to open in the web view. | | 0.1.0 |
| **userAgent** | string | The custom user agent to use for the web view. | | 0.1.0 |
| **visible** | boolean | Whether or not the web view is presented when opened. If false, the web view loads the URL in the background and stays hidden until show() is called. The browserPageLoaded event is still emitted and close() can be called while the web view is hidden. | true | 0.1.0 |
#### OpenInWebViewAndroidOptions[ΒΆ](#openinwebviewandroidoptions "Permanent link")
| Prop | Type | Description | Default | Since |
| ------------------------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ----- |
| **allowZoom** | boolean | Whether or not the user can zoom the web page. | false | 0.1.0 |
| **hardwareBackButton** | boolean | Whether or not the hardware back button navigates back in the web view's history before closing the web view. If false, the hardware back button closes the web view immediately. | true | 0.1.0 |
| **pauseMediaWhenHidden** | boolean | Whether or not media playback is paused when the app is hidden. | true | 0.1.0 |
#### OpenInWebViewIosOptions[ΒΆ](#openinwebviewiosoptions "Permanent link")
| Prop | Type | Description | Default | Since |
| --------------------------------------- | ------- | --------------------------------------------------------------------------------------------- | ------- | ----- |
| **allowsBackForwardNavigationGestures** | boolean | Whether or not horizontal swipe gestures navigate back and forward in the web view's history. | false | 0.1.0 |
| **overscroll** | boolean | Whether or not the web view bounces when scrolled past the edge of the content. | true | 0.1.0 |
#### WebViewToolbarOptions[ΒΆ](#webviewtoolbaroptions "Permanent link")
| Prop | Type | Description | Default | Since |
| ------------------------- | ------- | ------------------------------------------------------------------------------------------------------ | ------- | ----- |
| **backgroundColor** | string | The background color of the toolbar as a hex color code. | | 0.1.0 |
| **closeButtonText** | string | The text of the close button in the toolbar. | 'Close' | 0.1.0 |
| **color** | string | The text color of the toolbar as a hex color code. | | 0.1.0 |
| **showNavigationButtons** | boolean | Whether or not the back and forward navigation buttons should be shown in the toolbar. | false | 0.1.0 |
| **showUrl** | boolean | Whether or not the current URL should be displayed in the toolbar instead of the title. | false | 0.1.0 |
| **title** | string | The fixed title to display in the toolbar. If not set, the title of the current web page is displayed. | | 0.1.0 |
| **visible** | boolean | Whether or not the toolbar should be visible. | true | 0.1.0 |
#### PostMessageOptions[ΒΆ](#postmessageoptions "Permanent link")
| Prop | Type | Description | Since |
| -------- | ----------------------------- | ----------------------------------------------------------------------------- | ----- |
| **data** | { \[key: string\]: unknown; } | The message data to post to the web view. Must be a JSON-serializable object. | 0.1.0 |
#### PluginListenerHandle[ΒΆ](#pluginlistenerhandle "Permanent link")
| Prop | Type |
| ---------- | ------------------- |
| **remove** | () => Promise |
#### BrowserMessageReceivedEvent[ΒΆ](#browsermessagereceivedevent "Permanent link")
| Prop | Type | Description | Since |
| -------- | ------- | ---------------------------------------- | ----- |
| **data** | unknown | The message data posted by the web page. | 0.1.0 |
#### BrowserNavigationCompletedEvent[ΒΆ](#browsernavigationcompletedevent "Permanent link")
| Prop | Type | Description | Since |
| ------- | ------ | ------------------------------------------ | ----- |
| **url** | string | The URL of the page that was navigated to. | 0.1.0 |
#### BrowserUrlChangedEvent[ΒΆ](#browserurlchangedevent "Permanent link")
| Prop | Type | Description | Since |
| ------- | ------ | ---------------------------- | ----- |
| **url** | string | The new URL of the web view. | 0.1.0 |
### Type Aliases[ΒΆ](#type-aliases "Permanent link")
#### DismissButtonStyle[ΒΆ](#dismissbuttonstyle "Permanent link")
The style of the dismiss button in the toolbar of the system browser.
* `cancel`: A button with the text "Cancel".
* `close`: A button with the text "Close".
* `done`: A button with the text "Done".
`'cancel' | 'close' | 'done'`
#### WebViewDataStore[ΒΆ](#webviewdatastore "Permanent link")
The data store to use for the web view.
* `isolated`: The web view uses a non-persistent data store. Cookies and web storage are discarded when the web view is closed.
* `shared`: The web view uses the app-global data store which is shared with other web views.
`'isolated' | 'shared'`
## Messaging[ΒΆ](#messaging "Permanent link")
The embedded web view injects a small message bridge into every web page. This allows you to exchange messages between your app and the web page in both directions.
### From the web page to the app[ΒΆ](#from-the-web-page-to-the-app "Permanent link")
The web page can post a message to the app using the injected `window.CapacitorInAppBrowser.postMessage(...)` function:
`[](#%5F%5Fcodelineno-29-1)window.CapacitorInAppBrowser.postMessage({ name: 'Capawesome' });
`
The app receives the message via the `browserMessageReceived` event.
### From the app to the web page[ΒΆ](#from-the-app-to-the-web-page "Permanent link")
The app can post a message to the web page using the `postMessage(...)` method. The web page receives the message by listening for the `capacitorInAppBrowserMessage` window event:
`[](#%5F%5Fcodelineno-30-1)window.addEventListener('capacitorInAppBrowserMessage', event => {
[](#%5F%5Fcodelineno-30-2) console.log('Message received', event.detail);
[](#%5F%5Fcodelineno-30-3)});
`
## Platform Behavior[ΒΆ](#platform-behavior "Permanent link")
The three browser modes behave differently on each platform. Keep the following differences in mind:
* **System browser**: Tracking the visited URLs is not possible by design. If you need the `browserNavigationCompleted` or `browserUrlChanged` event, use the `openInWebView(...)` method instead. On Android, the `browserPageLoaded` event is not emitted for the system browser and the `browserClosed` event is emitted when the user returns to the app.
* **Embedded web view**: The web view always uses the app-global (`shared`) data store on Android. The `dataStore` option is only supported on iOS. On iOS, hiding the toolbar removes the close button, so the browser can then only be closed using the `close(...)` method.
* **External browser**: The browser is opened in a separate app. For this reason, no events are emitted and the `close(...)` method has no effect.
## FAQ[ΒΆ](#faq "Permanent link")
### How is this plugin different from other similar plugins?[ΒΆ](#how-is-this-plugin-different-from-other-similar-plugins "Permanent link")
It covers three browsing modes in one fully typed API β the external browser, the system browser (Custom Tabs on Android, `SFSafariViewController` on iOS), and an embedded web view with a themed native toolbar, JavaScript execution, two-way messaging, navigation events, and session control. Camera and microphone requests from web pages are forwarded to the app, and you can even load a URL hidden in the background and present it once it's ready. If you only need to open a link, the external mode is a simple one-liner; if you need to embed, theme, and communicate with web content, this plugin is designed for exactly that.
### What is the difference between the external browser, the system browser and the embedded web view?[ΒΆ](#what-is-the-difference-between-the-external-browser-the-system-browser-and-the-embedded-web-view "Permanent link")
The `openInExternalBrowser(...)` method opens the URL in the default browser app of the device, so no events are emitted and the `close()` method has no effect. The `openInSystemBrowser(...)` method presents the system browser (Custom Tabs on Android, `SFSafariViewController` on iOS) inside your app with a customizable toolbar. The `openInWebView(...)` method opens an embedded web view with a native toolbar and offers the most control, including JavaScript execution, messaging, and navigation events. See [Platform Behavior](#platform-behavior) for the differences between the modes.
### How can I track which URLs the user visits?[ΒΆ](#how-can-i-track-which-urls-the-user-visits "Permanent link")
Tracking the visited URLs is only possible in the embedded web view. Open the URL with `openInWebView(...)` and listen for the `browserUrlChanged` or `browserNavigationCompleted` event. In the system browser, tracking the visited URLs is not possible by design, and in the external browser no events are emitted at all.
### How can I exchange data between my app and the opened web page?[ΒΆ](#how-can-i-exchange-data-between-my-app-and-the-opened-web-page "Permanent link")
The embedded web view injects a small message bridge into every web page. The web page can post messages to the app using the injected `window.CapacitorInAppBrowser.postMessage(...)` function, which the app receives via the `browserMessageReceived` event. The app can post messages to the web page using the `postMessage(...)` method, which the web page receives via the `capacitorInAppBrowserMessage` window event. See [Messaging](#messaging) for more details.
### Can web pages access the camera or microphone?[ΒΆ](#can-web-pages-access-the-camera-or-microphone "Permanent link")
Yes, camera and microphone permission requests from web pages opened in the embedded web view are forwarded to the app. On Android, the corresponding permissions must be declared in your `AndroidManifest.xml` and granted before a web page requests access. On iOS, the `NSCameraUsageDescription` and `NSMicrophoneUsageDescription` keys must be added to your `Info.plist` file. See [Installation](#installation) for details.
### Can I load a URL in the background before showing it?[ΒΆ](#can-i-load-a-url-in-the-background-before-showing-it "Permanent link")
Yes, open the URL with `openInWebView(...)` and set the `visible` option to `false`. The web view then loads the URL in the background and stays hidden until you call the `show()` method. The `browserPageLoaded` event is still emitted and `close()` can be called while the web view is hidden.
### Can I use this plugin with Ionic, React, Vue or Angular?[ΒΆ](#can-i-use-this-plugin-with-ionic-react-vue-or-angular "Permanent link")
Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects.
## Related Plugins[ΒΆ](#related-plugins "Permanent link")
* [App Launcher](https://capawesome.io/docs/sdks/capacitor/app-launcher/): Check if an app can be opened and open it.
* [OAuth](https://capawesome.io/docs/sdks/capacitor/oauth/): Communicate with OAuth 2.0 and OpenID Connect providers.
* [System WebView](https://capawesome.io/docs/sdks/capacitor/system-webview/): Detect an outdated Android System WebView and guide users to update it.
## Newsletter[ΒΆ](#newsletter "Permanent link")
Stay up to date with the latest news and updates about the Capawesome, Capacitor, and Ionic ecosystem by subscribing to our [Capawesome Newsletter](https://cloud.capawesome.io/newsletter/).
## Changelog[ΒΆ](#changelog "Permanent link")
See [CHANGELOG.md](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/in-app-browser/CHANGELOG.md).
## License[ΒΆ](#license "Permanent link")
See [LICENSE](https://github.com/capawesome-team/capacitor-plugins/blob/main/packages/in-app-browser/LICENSE).
July 8, 2026
Back to top
```json
{"@context": "https://schema.org", "@graph": [{"@type": "TechArticle", "@id": "https://capawesome.io/docs/sdks/capacitor/in-app-browser/#article", "headline": "Capacitor In-App Browser Plugin", "name": "Capacitor In-App Browser Plugin", "description": "Capacitor plugin to open URLs in the external browser, the system browser, or an embedded web view on Android, iOS, and the web.", "inLanguage": "en", "url": "https://capawesome.io/docs/sdks/capacitor/in-app-browser/", "mainEntityOfPage": "https://capawesome.io/docs/sdks/capacitor/in-app-browser/", "author": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "publisher": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "about": {"@id": "https://capawesome.io/docs/sdks/capacitor/in-app-browser/#software"}}, {"@type": "SoftwareSourceCode", "@id": "https://capawesome.io/docs/sdks/capacitor/in-app-browser/#software", "name": "Capacitor In-App Browser Plugin", "description": "Capacitor plugin to open URLs in the external browser, the system browser, or an embedded web view on Android, iOS, and the web.", "url": "https://capawesome.io/docs/sdks/capacitor/in-app-browser/", "programmingLanguage": "TypeScript", "runtimePlatform": "Capacitor", "codeRepository": "https://github.com/capawesome-team", "author": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}, "publisher": {"@type": "Organization", "name": "Capawesome", "url": "https://capawesome.io", "logo": {"@type": "ImageObject", "url": "https://capawesome.io/assets/images/logo.svg"}}}]}
{"@context": "https://schema.org", "@type": "FAQPage", "mainEntity": [{"@type": "Question", "name": "How is this plugin different from other similar plugins?", "acceptedAnswer": {"@type": "Answer", "text": "It covers three browsing modes in one fully typed API β the external browser, the system browser (Custom Tabs on Android, SFSafariViewController on iOS), and an embedded web view with a themed native toolbar, JavaScript execution, two-way messaging, navigation events, and session control. Camera and microphone requests from web pages are forwarded to the app, and you can even load a URL hidden in the background and present it once it's ready. If you only need to open a link, the external mode is a simple one-liner; if you need to embed, theme, and communicate with web content, this plugin is designed for exactly that."}}, {"@type": "Question", "name": "What is the difference between the external browser, the system browser and the embedded web view?", "acceptedAnswer": {"@type": "Answer", "text": "The openInExternalBrowser(...) method opens the URL in the default browser app of the device, so no events are emitted and the close() method has no effect. The openInSystemBrowser(...) method presents the system browser (Custom Tabs on Android, SFSafariViewController on iOS) inside your app with a customizable toolbar. The openInWebView(...) method opens an embedded web view with a native toolbar and offers the most control, including JavaScript execution, messaging, and navigation events. See Platform Behavior for the differences between the modes."}}, {"@type": "Question", "name": "How can I track which URLs the user visits?", "acceptedAnswer": {"@type": "Answer", "text": "Tracking the visited URLs is only possible in the embedded web view. Open the URL with openInWebView(...) and listen for the browserUrlChanged or browserNavigationCompleted event. In the system browser, tracking the visited URLs is not possible by design, and in the external browser no events are emitted at all."}}, {"@type": "Question", "name": "How can I exchange data between my app and the opened web page?", "acceptedAnswer": {"@type": "Answer", "text": "The embedded web view injects a small message bridge into every web page. The web page can post messages to the app using the injected window.CapacitorInAppBrowser.postMessage(...) function, which the app receives via the browserMessageReceived event. The app can post messages to the web page using the postMessage(...) method, which the web page receives via the capacitorInAppBrowserMessage window event. See Messaging for more details."}}, {"@type": "Question", "name": "Can web pages access the camera or microphone?", "acceptedAnswer": {"@type": "Answer", "text": "Yes, camera and microphone permission requests from web pages opened in the embedded web view are forwarded to the app. On Android, the corresponding permissions must be declared in your AndroidManifest.xml and granted before a web page requests access. On iOS, the NSCameraUsageDescription and NSMicrophoneUsageDescription keys must be added to your Info.plist file. See Installation for details."}}, {"@type": "Question", "name": "Can I load a URL in the background before showing it?", "acceptedAnswer": {"@type": "Answer", "text": "Yes, open the URL with openInWebView(...) and set the visible option to false. The web view then loads the URL in the background and stays hidden until you call the show() method. The browserPageLoaded event is still emitted and close() can be called while the web view is hidden."}}, {"@type": "Question", "name": "Can I use this plugin with Ionic, React, Vue or Angular?", "acceptedAnswer": {"@type": "Answer", "text": "Yes, the plugin is framework-agnostic. It works in any Capacitor app regardless of the web framework, including Ionic with Angular, React, or Vue, as well as plain JavaScript projects."}}], "url": "https://capawesome.io/docs/sdks/capacitor/in-app-browser/"}
```