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" });
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() => Promise<any>
Clear all cookies
Returns: Promise<any>
Since: 0.5.0
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
setUrl(...)
setUrl(options: { url: string; }) => Promise<any>
| Param | Type |
|---|---|
options |
{ url: string; } |
Returns: Promise<any>
addListener('urlChangeEvent', ...)
addListener(eventName: "urlChangeEvent", listenerFunc: UrlChangeListener) => Promise<PluginListenerHandle> & PluginListenerHandle
Listen for url change, only for openWebView
| Param | Type |
|---|---|
eventName |
'urlChangeEvent' |
listenerFunc |
UrlChangeListener |
Returns: Promise<PluginListenerHandle> & PluginListenerHandle
Since: 0.0.1
addListener('closeEvent', ...)
addListener(eventName: "closeEvent", listenerFunc: UrlChangeListener) => Promise<PluginListenerHandle> & PluginListenerHandle
Listen for close click only for openWebView
| Param | Type |
|---|---|
eventName |
'closeEvent' |
listenerFunc |
UrlChangeListener |
Returns: Promise<PluginListenerHandle> & PluginListenerHandle
Since: 0.4.0
addListener('confirmBtnClicked', ...)
addListener(eventName: "confirmBtnClicked", listenerFunc: ConfirmBtnListener) => Promise<PluginListenerHandle> & 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> & 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
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 |
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 |
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
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!