Skip to main content
Version: v6

@capacitor/inappbrowser

The InAppBrowser Plugin provides a web browser view that allows you to load any web page externally. It behaves as a standard web browser and is useful to load untrusted content without risking your application's security. It offers three different ways to open URLs; in a WebView, in an in-app system browser (Custom Tabs for Android and SFSafariViewController for iOS), and in the device's default browser.

Installโ€‹

npm install @capacitor/inappbrowser
npx cap sync

Supported Platformsโ€‹

  • iOS
  • Android

Androidโ€‹

The InAppBrowser plugin requires a minimum Android SDK target of 26. This is higher than the default that comes with your Capacitor application. You can update this value in your android/variables.gradle file.

ext {
minSdkVersion = 26
}

Usage Exampleโ€‹

Open In External Browserโ€‹

import { InAppBrowser } from '@capacitor/inappbrowser';
await InAppBrowser.openInExternalBrowser({
url: "https://www.google.com"
});

Open In System Browser (Custom Tabs for Android, SFSafariViewController for iOS)โ€‹

import { InAppBrowser, DefaultSystemBrowserOptions } from '@capacitor/inappbrowser';
await InAppBrowser.openInSystemBrowser({
url: "https://www.google.com",
options: DefaultSystemBrowserOptions
});

Open In Web Viewโ€‹

import { InAppBrowser, DefaultWebViewOptions } from '@capacitor/inappbrowser';
await InAppBrowser.openInWebView({
url: "https://www.google.com",
options: DefaultWebViewOptions
});

Close (Web View or System Browser)โ€‹

import { InAppBrowser } from '@capacitor/inappbrowser';
await InAppBrowser.close();

Add Listenersโ€‹

import { InAppBrowser } from '@capacitor/inappbrowser';
await InAppBrowser.addListener('browserClosed', () => {
console.log("browser was closed.");
});

await InAppBrowser.addListener('browserPageLoaded', () => {
console.log("browser was loaded.");
});

Remove All Listenersโ€‹

import { InAppBrowser } from '@capacitor/inappbrowser';
InAppBrowser.removeAllListeners();

APIโ€‹

openInWebView(...)โ€‹

openInWebView(model: OpenInWebViewParameterModel) => Promise<void>

Opens the web content of the given URL in your mobile app using a custom web view within your application.

ParamTypeDescription
model
OpenInWebViewParameterModel
The parameters to open the URL in the web view

openInSystemBrowser(...)โ€‹

openInSystemBrowser(model: OpenInSystemBrowserParameterModel) => Promise<void>

Opens the web content of the given URL in your mobile app, using SafariViewController for iOS and Custom Tabs for Android.

ParamTypeDescription
model
OpenInSystemBrowserParameterModel
The parameters to open the URL in the system browser

openInExternalBrowser(...)โ€‹

openInExternalBrowser(model: OpenInDefaultParameterModel) => Promise<void>

Opens the web content of the given URL in a separate browser, outside of your mobile application.

ParamTypeDescription
model
OpenInDefaultParameterModel
The parameters to open the URL in the external browser

close()โ€‹

close() => Promise<void>

Closes the currently active browser. It can be used to close browsers launched through the openInSystemBrowser or openInWebView actions.


addListener('browserClosed' | 'browserPageLoaded', ...)โ€‹

addListener(eventName: 'browserClosed' | 'browserPageLoaded', listenerFunc: () => void) => Promise<PluginListenerHandle>

Adds a listener for the specified browser event.

ParamTypeDescription
eventName'browserClosed' | 'browserPageLoaded'The name of the browser event to listen for: 'browserClosed' or 'browserPageLoaded'.
listenerFunc() => voidThe function to be called when the event occurs.

Returns:

Promise<PluginListenerHandle>


removeAllListeners()โ€‹

removeAllListeners() => void

Removes all listeners for the browser events.


Interfacesโ€‹

OpenInWebViewParameterModelโ€‹

Defines the options for opening a URL in the web view.

PropTypeDescription
options
WebViewOptions
A structure containing some configurations to apply to the Web View.

WebViewOptionsโ€‹

PropTypeDescription
showURLbooleanDisplays the URL on the Web View.
showToolbarbooleanDisplays the toolbar on the Web View.
clearCachebooleanClears the Web View's cookie cache before a new window is opened.
clearSessionCachebooleanClears the session cookie cache before a new window is opened.
mediaPlaybackRequiresUserActionbooleanPrevents HTML5 audio or video from auto-playing.
closeButtonTextstringSets the text to display on the Close button on the Web View.
toolbarPosition
ToolbarPosition
Sets the position to display the Toolbar on the Web View.
showNavigationButtonsbooleanDisplays the navigation buttons.
leftToRightbooleanSwaps the positions of the navigation buttons and the close button.
customWebViewUserAgentstring | nullSets a custom user agent to open the Web View with. If empty or not set, the parameter will be ignored.
android
AndroidWebViewOptions
Android-specific Web View options.
iOS
iOSWebViewOptions
iOS-specific Web View options.

AndroidWebViewOptionsโ€‹

PropTypeDescription
allowZoombooleanShows the Android browser's zoom controls.
hardwareBackbooleanUses the hardware back button to navigate backwards through the Web View's history. If there is no previous page, the Web View will close.
pauseMediabooleanMakes the Web View pause/resume with the app to stop background audio.

iOSWebViewOptionsโ€‹

PropTypeDescription
allowOverScrollbooleanTurns on the Web View bounce property.
enableViewportScalebooleanPrevents viewport scaling through a meta tag.
allowInLineMediaPlaybackbooleanAllows in-line HTML5 media playback, displaying within the browser window rather than a device-specific playback interface. Note: The HTML's video element must also include the webkit-playsinline attribute.
surpressIncrementalRenderingbooleanWaits until all new view content is received before being rendered.
viewStyle
iOSViewStyle
Sets the presentation style of the Web View.
animationEffect
iOSAnimation
Sets the transition style of the Web View.

OpenInSystemBrowserParameterModelโ€‹

Defines the options for opening a URL in the system browser.

PropTypeDescription
options
SystemBrowserOptions
A structure containing some configurations to apply to the System Browser.

SystemBrowserOptionsโ€‹

PropTypeDescription
android
AndroidSystemBrowserOptions
Android-specific System Browser options.
iOS
iOSSystemBrowserOptions
iOS-specific System Browser options.

AndroidSystemBrowserOptionsโ€‹

PropTypeDescription
showTitlebooleanEnables the title display.
hideToolbarOnScrollbooleanHides the toolbar when scrolling.
viewStyle
AndroidViewStyle
Sets the presentation style of CustomTabs.
bottomSheetOptions
AndroidBottomSheet
Sets the options for the bottom sheet when this is selected as the viewStyle. If viewStyle is FULL_SCREEN, this will be ignored.
startAnimation
AndroidAnimation
Sets the start animation for when the browser appears.
exitAnimation
AndroidAnimation
Sets the exit animation for when the browser disappears.

AndroidBottomSheetโ€‹

PropTypeDescription
heightnumberSets the height of the bottom sheet. This will be a minimum of 50% of the screen's height. If no value is passed, we will default to the minimum value.
isFixedbooleanSets whether the bottom sheet is fixed.

iOSSystemBrowserOptionsโ€‹

PropTypeDescription
closeButtonText
DismissStyle
Sets a text to use as the close button's caption.
viewStyle
iOSViewStyle
Sets the presentation style of SafariViewController.
animationEffect
iOSAnimation
Sets the transition style of SafariViewController.
enableBarsCollapsingbooleanEnables bars to collapse on scrolling down.
enableReadersModebooleanEnables readers mode.

OpenInDefaultParameterModelโ€‹

Defines the options for opening a URL in the external browser and used by the others.

PropTypeDescription
urlstringThe URL to be opened. It must contain either 'http' or 'https' as the protocol prefix.

PluginListenerHandleโ€‹

PropType
remove() => Promise<void>

Enumsโ€‹

ToolbarPositionโ€‹

Members
TOP
BOTTOM

iOSViewStyleโ€‹

Members
PAGE_SHEET
FORM_SHEET
FULL_SCREEN

iOSAnimationโ€‹

Members
FLIP_HORIZONTAL
CROSS_DISSOLVE
COVER_VERTICAL

AndroidViewStyleโ€‹

Members
BOTTOM_SHEET
FULL_SCREEN

AndroidAnimationโ€‹

Members
FADE_IN
FADE_OUT
SLIDE_IN_LEFT
SLIDE_OUT_RIGHT

DismissStyleโ€‹

Members
CLOSE
CANCEL
DONE