@jackobo/capacitor-webview

Capacitor plugin for Android and iOS WebView,
It opens an URL in a WebView.
It doesn't provide navigation support in the WebView. No back and forward buttons just a close button and a title in a toolbar.
You can control the toolbar background and text color.

Install

npm install @jackobo/capacitor-webview
npx cap sync

API

• openWebView(...)
• closeWebView()
• addListener('urlChanged', ...)
• addListener('webViewClosed', ...)
• removeAllListeners()
• Interfaces
• Type Aliases

A capacitor plugin for opening a second WebView inside your app. Android and iOS only.

openWebView(...)

openWebView(options: IOpenWebViewOptions) => Promise<IOpenWebViewResponse>

Opens a new WebView using parameters specified in options. After opening the WebView the urlChanged event is also triggered for the initial URL provided in the options parameter. Method resolves when the WebView is closed either by the user or programatically by calling closeWebView. The response contains the URL that was in the WebView by the time of closing it.

| Param | Type | | ------------- | ------------------------------------------------------------------- | | options | IOpenWebViewOptions |

Returns: Promise<IOpenWebViewResponse>

Since: 1.0.0

closeWebView()

closeWebView() => Promise<void>

Programmatically closes the WebView. The webViewClosed event is triggered also when calling this method.

addListener('urlChanged', ...)

addListener(eventName: 'urlChanged', handler: UrlChangedEventHandler) => Promise<PluginListenerHandle>

Subscribes to urlChanged event. This event is triggered when navigation occurs inside the WebView

| Param | Type | | --------------- | ------------------------------------------------------------------------- | | eventName | 'urlChanged' | | handler | UrlChangedEventHandler |

Returns: Promise<PluginListenerHandle>

Since: 1.0.0

addListener('webViewClosed', ...)

addListener(eventName: 'webViewClosed', handler: WebViewClosedEventHandler) => Promise<PluginListenerHandle>

Subscribes to webViewClosed event. This event is triggered when user closes the WebView or when the WebView is closed programmatically by calling closeWebView

| Param | Type | | --------------- | ------------------------------------------------------------------------------- | | eventName | 'webViewClosed' | | handler | WebViewClosedEventHandler |

Returns: Promise<PluginListenerHandle>

Since: 1.0.0

removeAllListeners()

removeAllListeners() => Promise<void>

Removes all events subscriptions

Since: 1.0.0

Interfaces

IOpenWebViewResponse

The result of the openWebView method

| Prop | Type | Description | Since | | --------- | ------------------- | -------------------------------------------- | ----- | | url | string | The URL in the WebView by the time is closed | 1.0.0 |

IOpenWebViewOptions

| Prop | Type | Description | Default | Since | | ---------------------------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----- | | url | string | URL to load in the Webview | | 1.0.0 | | headers | Record<string, string> | Headers to be appended to the initial request. These are not used for subsequent navigation inside the WebView. | | 1.0.0 | | enableDebug | boolean | Whether to enable debug on the webview (iOS only) | false | 1.0.0 | | toolbar | IWebViewToolbarOptions | Specify toolbar options. If null or undefined the toolbar will not be shown | | 1.0.0 | | ignoreSslErrors | boolean | When set to true will disable the SSL errors (Android only) It should be used only for testing purpose in test environments if you encounter certificates issues Only SSL_UNTRUSTED errors are ignored when this property is set to true | false | 1.0.0 | | urlPatternsToOpenInExternalBrowser | string[] | An array of partial matching URLs that will be open in the system browser when an open in new tab request happens inside the webview. (Android only) This property is ignored when navigation is a server side redirect. Example: urlPatternsToOpenInExternalBrowser: ['/cookies-policy', '/privacy-notice'] // Any URL navigation with open in new tab that contains any of these segments will be open in the device default browser | | 1.0.7 | | screenOrientation | 'portrait' | 'landscape' | Enforce a specific screen orientation for the activity that contains the webview (Android only) If not specified it will allow both portrait and landscape screen orientations | | 1.0.9 |

IWebViewToolbarOptions

| Prop | Type | Description | Since | | --------------------- | ------------------- | --------------------------------------------------------------------- | ----- | | title | string | The text to appear in the toolbar | 1.0.0 | | backgroundColor | string | Background color of the toolbar in hex format | 1.0.0 | | color | string | The color for the title text and for the X close button in hex format | 1.0.0 |

PluginListenerHandle

| Prop | Type | | ------------ | ----------------------------------------- | | remove | () => Promise<void> |

UrlChangedEvent

Emit when the url changes in the Webview

| Prop | Type | Description | Since | | --------- | ------------------- | -------------------------- | ----- | | url | string | The new URL in the WebView | 1.0.0 |

WebViewClosedEvent

Emit when the Webview is closed

| Prop | Type | Description | Since | | --------- | ------------------- | --------------------------------------------------- | ----- | | url | string | Current URL in the Webview by the time it is closed | 1.0.0 |

Type Aliases

Record

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

{ [P in K]: T; }

UrlChangedEventHandler

Handler for urlChanged event

(state: UrlChangedEvent): void

WebViewClosedEventHandler

Handler for webViewClosedEvent event

(state: WebViewClosedEvent): void