In App Browser
Capacitor plugin in app browser
@capgo/inappbrowser
Install
npm install @capgo/inappbrowser
npx cap sync
Usage
import { InAppBrowser } from '@capgo/inappbrowser'
InAppBrowser.open({ url: "YOUR_URL" });
Web platform is not supported. Use window.open instead.
Camera usage
if you need the Camera to work in Android, you need to add the following to your AndroidManifest.xml file:
<uses-permission android:name="android.permission.CAMERA" />
Then the permission will be asked when the camera is used.
API
open(...)
open(options: OpenOptions) => Promise<any>
Open url in a new window fullscreen
| Param | Type |
|---|---|
options |
OpenOptions |
Returns: Promise<any>
Since: 0.1.0
clearCookies(...)
clearCookies(options: ClearCookieOptions) => Promise<any>
Clear cookies of url
| Param | Type |
|---|---|
options |
ClearCookieOptions |
Returns: Promise<any>
Since: 0.5.0
getCookies(...)
getCookies(options: GetCookieOptions) => Promise<Record<string, string>>
Get cookies for a specific URL.
| Param | Type | Description |
|---|---|---|
options |
GetCookieOptions |
The options, including the URL to get cookies for. |
Returns: Promise<Record<string, string>>
close()
close() => Promise<any>
Returns: Promise<any>
openWebView(...)
openWebView(options: OpenWebViewOptions) => Promise<any>
Open url in a new webview with toolbars
| Param | Type |
|---|---|
options |
OpenWebViewOptions |
Returns: Promise<any>
Since: 0.1.0
executeScript(...)
executeScript({ code }: { code: string; }) => Promise<void>
Injects JavaScript code into the InAppBrowser window.
| Param | Type |
|---|---|
__0 |
{ code: string; } |
setUrl(...)
setUrl(options: { url: string; }) => Promise<any>
| Param | Type |
|---|---|
options |
{ url: string; } |
Returns: Promise<any>
addListener('urlChangeEvent', ...)
addListener(eventName: "urlChangeEvent", listenerFunc: UrlChangeListener) => Promise<PluginListenerHandle>
Listen for url change, only for openWebView
| Param | Type |
|---|---|
eventName |
'urlChangeEvent' |
listenerFunc |
UrlChangeListener |
Returns: Promise<PluginListenerHandle>
Since: 0.0.1
addListener('closeEvent', ...)
addListener(eventName: "closeEvent", listenerFunc: UrlChangeListener) => Promise<PluginListenerHandle>
Listen for close click only for openWebView
| Param | Type |
|---|---|
eventName |
'closeEvent' |
listenerFunc |
UrlChangeListener |
Returns: Promise<PluginListenerHandle>
Since: 0.4.0
addListener('confirmBtnClicked', ...)
addListener(eventName: "confirmBtnClicked", listenerFunc: ConfirmBtnListener) => Promise<PluginListenerHandle>
Will be triggered when user clicks on confirm button when disclaimer is required, works only on iOS
| Param | Type |
|---|---|
eventName |
'confirmBtnClicked' |
listenerFunc |
ConfirmBtnListener |
Returns: Promise<PluginListenerHandle>
Since: 0.0.1
removeAllListeners()
removeAllListeners() => Promise<void>
Remove all listeners for this plugin.
Since: 1.0.0
reload()
reload() => Promise<any>
Reload the current web page.
Returns: Promise<any>
Since: 1.0.0
Interfaces
OpenOptions
| Prop | Type | Description | Since |
|---|---|---|---|
url |
string |
Target URL to load. | 0.1.0 |
headers |
Headers |
Headers to send with the request. | 0.1.0 |
isPresentAfterPageLoad |
boolean |
if true, the browser will be presented after the page is loaded, if false, the browser will be presented immediately. | 0.1.0 |
preventDeeplink |
boolean |
Headers
ClearCookieOptions
| Prop | Type |
|---|---|
url |
string |
cache |
boolean |
HttpCookie
| Prop | Type | Description |
|---|---|---|
url |
string |
The URL of the cookie. |
key |
string |
The key of the cookie. |
value |
string |
The value of the cookie. |
GetCookieOptions
| Prop | Type |
|---|---|
url |
string |
includeHttpOnly |
boolean |
OpenWebViewOptions
| Prop | Type | Description | Default | Since |
|---|---|---|---|---|
url |
string |
Target URL to load. | 0.1.0 | |
headers |
Headers |
Headers to send with the request. | 0.1.0 | |
shareDisclaimer |
DisclaimerOptions |
share options | 0.1.0 | |
toolbarType |
ToolBarType |
Toolbar type | ToolBarType.DEFAULT |
0.1.0 |
shareSubject |
string |
Share subject | 0.1.0 | |
title |
string |
Title of the browser | 'New Window' |
0.1.0 |
backgroundColor |
BackgroundColor |
Background color of the browser, only on IOS | BackgroundColor.BLACK |
0.1.0 |
activeNativeNavigationForWebview |
boolean |
If true, active the native navigation within the webview, Android only | false |
|
disableGoBackOnNativeApplication |
boolean |
Disable the possibility to go back on native application, usefull to force user to stay on the webview, Android only | false |
|
isPresentAfterPageLoad |
boolean |
Open url in a new window fullscreen isPresentAfterPageLoad: if true, the browser will be presented after the page is loaded, if false, the browser will be presented immediately. | false |
0.1.0 |
isInspectable |
boolean |
Whether the website in the webview is inspectable or not, ios only | false |
|
isAnimated |
boolean |
Whether the webview opening is animated or not, ios only | true |
|
showReloadButton |
boolean |
Shows a reload button that reloads the web page | false |
1.0.15 |
closeModal |
boolean |
CloseModal: if true a confirm will be displayed when user clicks on close button, if false the browser will be closed immediately. | false |
1.1.0 |
closeModalTitle |
string |
CloseModalTitle: title of the confirm when user clicks on close button, only on IOS | 'Close' |
1.1.0 |
closeModalDescription |
string |
CloseModalDescription: description of the confirm when user clicks on close button, only on IOS | 'Are you sure you want to close this window?' |
1.1.0 |
closeModalOk |
string |
CloseModalOk: text of the confirm button when user clicks on close button, only on IOS | 'Close' |
1.1.0 |
closeModalCancel |
string |
CloseModalCancel: text of the cancel button when user clicks on close button, only on IOS | 'Cancel' |
1.1.0 |
visibleTitle |
boolean |
visibleTitle: if true the website title would be shown else shown empty | true |
1.2.5 |
toolbarColor |
string |
toolbarColor: color of the toolbar in hex format | '#ffffff'' |
1.2.5 |
showArrow |
boolean |
showArrow: if true an arrow would be shown instead of cross for closing the window | false |
1.2.5 |
DisclaimerOptions
| Prop | Type |
|---|---|
title |
string |
message |
string |
confirmBtn |
string |
cancelBtn |
string |
PluginListenerHandle
| Prop | Type |
|---|---|
remove |
() => Promise<void> |
UrlEvent
| Prop | Type | Description | Since |
|---|---|---|---|
url |
string |
Emit when the url changes | 0.0.1 |
BtnEvent
| Prop | Type | Description | Since |
|---|---|---|---|
url |
string |
Emit when a button is clicked. | 0.0.1 |
Type Aliases
ClearCookieOptions
Omit<HttpCookie, 'key' | 'value'>
Omit
Construct a type with the properties of T except for those in type K.
Pick
From T, pick a set of properties whose keys are in the union K
{
[P in K]: T[P];
}
Exclude
Exclude from T those types that are assignable to U
T extends U ? never : T
Record
Construct a type with a set of properties K of type T
{
[P in K]: T;
}
GetCookieOptions
Omit<HttpCookie, 'key' | 'value'>
UrlChangeListener
(state: UrlEvent): void
ConfirmBtnListener
(state: BtnEvent): void
Enums
ToolBarType
| Members | Value |
|---|---|
ACTIVITY |
"activity" |
NAVIGATION |
"navigation" |
BLANK |
"blank" |
DEFAULT |
"" |
BackgroundColor
| Members | Value |
|---|---|
WHITE |
"white" |
BLACK |
"black" |
Credits
- WKWebViewController - for iOS
- CapBrowser - For the base in capacitor v2
@capgo/inappbrowser Package Tutorial
The @capgo/inappbrowser package is a Capacitor plugin that allows you to open a URL in an in-app browser window. Here's a step-by-step guide on how to use this package:
Installation
To install the package, run the following command in your project's root directory:
npm install @capgo/inappbrowser
npx cap sync
Usage
Import the
InAppBrowserclass from the@capgo/inappbrowserpackage:import { InAppBrowser } from '@capgo/inappbrowser';Use the
InAppBrowser.openmethod to open a URL in a new fullscreen window:InAppBrowser.open("YOUR_URL");Replace
"YOUR_URL"with the URL you want to open.You can also use other methods provided by the
InAppBrowserclass:clearCookies: Clear all cookies.close: Close the in-app browser window.openWebView: Open a URL in a new webview with toolbars.setUrl: Set the URL of the in-app browser.
Refer to the API section below for more details on these methods.
API
The @capgo/inappbrowser package provides the following API methods:
open(options: OpenOptions): Open a URL in a new fullscreen window. Takes anOpenOptionsobject as a parameter.clearCookies(): Clear all cookies.close(): Close the in-app browser window.openWebView(options: OpenWebViewOptions): Open a URL in a new webview with toolbars. Takes anOpenWebViewOptionsobject as a parameter.setUrl(options: { url: string; }): Set the URL of the in-app browser. Takes an object with aurlproperty as a parameter.addListener('urlChangeEvent', listenerFunc: UrlChangeListener): Listen for URL change events. Takes aUrlChangeListenerfunction as a parameter.addListener('closeEvent', listenerFunc: UrlChangeListener): Listen for close events. Takes aUrlChangeListenerfunction as a parameter.addListener('confirmBtnClicked', listenerFunc: UrlChangeListener): Listen for confirm button click events. Takes aUrlChangeListenerfunction as a parameter.removeAllListeners(): Remove all event listeners.
For more information on the parameters and return values of these methods, refer to the package documentation.
And that's it! You've learned how to use the @capgo/inappbrowser package to open URLs in an in-app browser window in Capacitor. Happy coding!