@capacitor/inappbrowser v1.0.2
@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(...)
openInSystemBrowser(...)
openInExternalBrowser(...)
close()
addListener('browserClosed' | 'browserPageLoaded', ...)
removeAllListeners()
- Interfaces
- Enums
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.
Param | Type | Description |
---|---|---|
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.
Param | Type | Description |
---|---|---|
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.
Param | Type | Description |
---|---|---|
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.
Param | Type | Description |
---|---|---|
eventName | 'browserClosed' | 'browserPageLoaded' | The name of the browser event to listen for: 'browserClosed' or 'browserPageLoaded'. |
listenerFunc | () => void | The 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.
Prop | Type | Description |
---|---|---|
options | WebViewOptions | A structure containing some configurations to apply to the Web View. |
WebViewOptions
Prop | Type | Description |
---|---|---|
showURL | boolean | Displays the URL on the Web View. |
showToolbar | boolean | Displays the toolbar on the Web View. |
clearCache | boolean | Clears the Web View's cookie cache before a new window is opened. |
clearSessionCache | boolean | Clears the session cookie cache before a new window is opened. |
mediaPlaybackRequiresUserAction | boolean | Prevents HTML5 audio or video from auto-playing. |
closeButtonText | string | Sets 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. |
showNavigationButtons | boolean | Displays the navigation buttons. |
leftToRight | boolean | Swaps the positions of the navigation buttons and the close button. |
customWebViewUserAgent | string | null | Sets 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
Prop | Type | Description |
---|---|---|
allowZoom | boolean | Shows the Android browser's zoom controls. |
hardwareBack | boolean | Uses the hardware back button to navigate backwards through the Web View's history. If there is no previous page, the Web View will close. |
pauseMedia | boolean | Makes the Web View pause/resume with the app to stop background audio. |
iOSWebViewOptions
Prop | Type | Description |
---|---|---|
allowOverScroll | boolean | Turns on the Web View bounce property. |
enableViewportScale | boolean | Prevents viewport scaling through a meta tag. |
allowInLineMediaPlayback | boolean | Allows 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. |
surpressIncrementalRendering | boolean | Waits 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.
Prop | Type | Description |
---|---|---|
options | SystemBrowserOptions | A structure containing some configurations to apply to the System Browser. |
SystemBrowserOptions
Prop | Type | Description |
---|---|---|
android | AndroidSystemBrowserOptions | Android-specific System Browser options. |
iOS | iOSSystemBrowserOptions | iOS-specific System Browser options. |
AndroidSystemBrowserOptions
Prop | Type | Description |
---|---|---|
showTitle | boolean | Enables the title display. |
hideToolbarOnScroll | boolean | Hides 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
Prop | Type | Description |
---|---|---|
height | number | Sets 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. |
isFixed | boolean | Sets whether the bottom sheet is fixed. |
iOSSystemBrowserOptions
Prop | Type | Description |
---|---|---|
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. |
enableBarsCollapsing | boolean | Enables bars to collapse on scrolling down. |
enableReadersMode | boolean | Enables readers mode. |
OpenInDefaultParameterModel
Defines the options for opening a URL in the external browser and used by the others.
Prop | Type | Description |
---|---|---|
url | string | The URL to be opened. It must contain either 'http' or 'https' as the protocol prefix. |
PluginListenerHandle
Prop | Type |
---|---|
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 |
9 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
1 year ago