Awesome

@capgo/inappbrowser

<a href="https://capgo.app/"><img src='https://raw.githubusercontent.com/Cap-go/capgo/main/assets/capgo_banner.png' alt='Capgo - Instant updates for capacitor'/></a>

Capacitor plugin in app browser with urlChangeEvent

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

Android

Add the following to your AndroidManifest.xml file:

    <uses-permission android:name="android.permission.CAMERA" />
		<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
		<uses-permission android:name="android.permission.RECORD_AUDIO"/>

Then the permission will be asked when the camera is used.

iOS

Add the following to your Info.plist file:

<key>NSCameraUsageDescription</key>
<string>We need access to the camera to record audio.</string>

Microphone usage

Android

Add the following to your AndroidManifest.xml file:

<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

Then the permission will be asked when the microphone is used.

iOS

Add the following to your Info.plist file:

<key>NSMicrophoneUsageDescription</key>
<string>We need access to the microphone to record audio.</string>

API

• open(...)
• clearCookies(...)
• clearAllCookies()
• clearCache()
• getCookies(...)
• close()
• openWebView(...)
• executeScript(...)
• postMessage(...)
• setUrl(...)
• addListener('urlChangeEvent', ...)
• addListener('buttonNearDoneClick', ...)
• addListener('closeEvent', ...)
• addListener('confirmBtnClicked', ...)
• addListener('messageFromWebview', ...)
• addListener('browserPageLoaded', ...)
• addListener('pageLoadError', ...)
• removeAllListeners()
• reload()
• Interfaces
• Type Aliases
• Enums

open(...)

open(options: OpenOptions) => Promise<any>

Open url in a new window fullscreen

Returns: <code>Promise<any></code>

Since: 0.1.0

clearCookies(...)

clearCookies(options: ClearCookieOptions) => Promise<any>

Clear cookies of url

Returns: <code>Promise<any></code>

Since: 0.5.0

clearAllCookies()

clearAllCookies() => Promise<any>

Clear all cookies

Returns: <code>Promise<any></code>

Since: 6.5.0

clearCache()

clearCache() => Promise<any>

Clear cache

Returns: <code>Promise<any></code>

Since: 6.5.0

getCookies(...)

getCookies(options: GetCookieOptions) => Promise<Record<string, string>>

Get cookies for a specific URL.

Returns: <code>Promise<<a href="#record">Record</a><string, string>></code>

close()

close() => Promise<any>

Close the webview.

Returns: <code>Promise<any></code>

openWebView(...)

openWebView(options: OpenWebViewOptions) => Promise<any>

Open url in a new webview with toolbars, and enhanced capabilities, like camera access, file access, listen events, inject javascript, bi directional communication, etc.

Returns: <code>Promise<any></code>

Since: 0.1.0

executeScript(...)

executeScript({ code }: { code: string; }) => Promise<void>

Injects JavaScript code into the InAppBrowser window.

postMessage(...)

postMessage(options: { detail: Record<string, any>; }) => Promise<void>

Sends an event to the webview. you can listen to this event with addListener("messageFromWebview", listenerFunc: (event: <a href="#record">Record</a><string, any>) => void) detail is the data you want to send to the webview, it's a requirement of Capacitor we cannot send direct objects Your object has to be serializable to JSON, so no functions or other non-JSON-serializable types are allowed.

setUrl(...)

setUrl(options: { url: string; }) => Promise<any>

Sets the URL of the webview.

Returns: <code>Promise<any></code>

addListener('urlChangeEvent', ...)

addListener(eventName: "urlChangeEvent", listenerFunc: UrlChangeListener) => Promise<PluginListenerHandle>

Listen for url change, only for openWebView

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>

Since: 0.0.1

addListener('buttonNearDoneClick', ...)

addListener(eventName: "buttonNearDoneClick", listenerFunc: ButtonNearListener) => Promise<PluginListenerHandle>

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>

addListener('closeEvent', ...)

addListener(eventName: "closeEvent", listenerFunc: UrlChangeListener) => Promise<PluginListenerHandle>

Listen for close click only for openWebView

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>

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

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>

Since: 0.0.1

addListener('messageFromWebview', ...)

addListener(eventName: "messageFromWebview", listenerFunc: (event: { detail: Record<string, any>; }) => void) => Promise<PluginListenerHandle>

Will be triggered when event is sent from webview, to send an event to the webview use window.mobileApp.postMessage({ "detail": { "message": "myMessage" } }) detail is the data you want to send to the webview, it's a requirement of Capacitor we cannot send direct objects Your object has to be serializable to JSON, so no functions or other non-JSON-serializable types are allowed.

This method is inject at runtime in the webview

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>

addListener('browserPageLoaded', ...)

addListener(eventName: "browserPageLoaded", listenerFunc: () => void) => Promise<PluginListenerHandle>

Will be triggered when page is loaded

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>

addListener('pageLoadError', ...)

addListener(eventName: "pageLoadError", listenerFunc: () => void) => Promise<PluginListenerHandle>

Will be triggered when page load error

Returns: <code>Promise<<a href="#pluginlistenerhandle">PluginListenerHandle</a>></code>

removeAllListeners()

removeAllListeners() => Promise<void>

Remove all listeners for this plugin.

Since: 1.0.0

reload()

reload() => Promise<any>

Reload the current web page.

Returns: <code>Promise<any></code>

Since: 1.0.0

Interfaces

OpenOptions

Headers

Credentials

ClearCookieOptions

HttpCookie

GetCookieOptions

OpenWebViewOptions

DisclaimerOptions

String

Allows manipulation and formatting of text strings and determination and location of substrings within strings.

RegExpMatchArray

RegExp

RegExpExecArray

PluginListenerHandle

UrlEvent

BtnEvent

Type Aliases

ClearCookieOptions

<code><a href="#omit">Omit</a><<a href="#httpcookie">HttpCookie</a>, 'key' | 'value'></code>

Omit

Construct a type with the properties of T except for those in type K.

<code><a href="#pick">Pick</a><T, <a href="#exclude">Exclude</a><keyof T, K>></code>

Pick

From T, pick a set of properties whose keys are in the union K

<code>{ [P in K]: T[P]; }</code>

Exclude

<a href="#exclude">Exclude</a> from T those types that are assignable to U

<code>T extends U ? never : T</code>

Record

Construct a type with a set of properties K of type T

<code>{ [P in K]: T; }</code>

GetCookieOptions

<code><a href="#omit">Omit</a><<a href="#httpcookie">HttpCookie</a>, 'key' | 'value'></code>

UrlChangeListener

<code>(state: <a href="#urlevent">UrlEvent</a>): void</code>

ButtonNearListener

<code>(state: {}): void</code>

ConfirmBtnListener

<code>(state: <a href="#btnevent">BtnEvent</a>): void</code>

Enums

ToolBarType

BackgroundColor

Credits

• WKWebViewController - for iOS
• CapBrowser - For the base in capacitor v2