The Browser API provides the ability to open an in-app browser and subscribe to browser events.
npm install supp-capacitor-browserThe Browser API provides the ability to open an in-app browser and subscribe to browser events.
On iOS, this uses SFSafariViewController and is compliant with leading OAuth service in-app-browser requirements.
``bash`
npm install @capacitor/browser
npx cap sync
This plugin will use the following project variables (defined in your app's variables.gradle file):
- androidxBrowserVersion: version of androidx.browser:browser (default: 1.8.0)
`typescript
import { Browser } from '@capacitor/browser';
const openCapacitorSite = async () => {
await Browser.open({ url: 'http://capacitorjs.com/' });
};
`
`typescript
import { Browser } from '@capacitor/browser';
const openWithWebAuthSession = async () => {
await Browser.open({
url: 'https://example.com/oauth',
useASWebAuthenticationSession: true,
callbackUrlScheme: 'myapp', // your app's custom scheme
prefersEphemeralWebBrowserSession: true, // optional
});
};
`
* open(...)
* close()
* addListener('browserFinished', ...)
* addListener('browserPageLoaded', ...)
* removeAllListeners()
* Interfaces
`typescript`
open(options: OpenOptions) => Promise
Open a page with the specified options.
| Param | Type |
| ------------- | --------------------------------------------------- |
| options | OpenOptions |
Since: 1.0.0
--------------------
`typescript`
close() => Promise
Web & iOS only: Close an open browser window.
No-op on other platforms.
Since: 1.0.0
--------------------
`typescript`
addListener(eventName: 'browserFinished', listenerFunc: () => void) => Promise
Android & iOS only: Listen for the browser finished event.
It fires when the Browser is closed by the user.
| Param | Type |
| ------------------ | ------------------------------ |
| eventName | 'browserFinished' |
| listenerFunc | () => void |
Returns: Promise<PluginListenerHandle>
Since: 1.0.0
--------------------
`typescript`
addListener(eventName: 'browserPageLoaded', listenerFunc: () => void) => Promise
Android & iOS only: Listen for the page loaded event.
It's only fired when the URL passed to open method finish loading.
It is not invoked for any subsequent page loads.
| Param | Type |
| ------------------ | -------------------------------- |
| eventName | 'browserPageLoaded' |
| listenerFunc | () => void |
Returns: Promise<PluginListenerHandle>
Since: 1.0.0
--------------------
`typescript`
removeAllListeners() => Promise
Remove all native listeners for this plugin.
Since: 1.0.0
--------------------
#### OpenOptions
Represents the options passed to open.
| Prop | Type | Description | Since |
| --------------------------------------- | -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----- |
| url | string | The URL to which the browser is opened. | 1.0.0 |
| windowName | string | Web only: Optional target for browser open. Follows the target property for window.open. Defaults to _blank. Ignored on other platforms. | 1.0.0 |toolbarColor
| | presentationStylestring | A hex color to which the toolbar color is set. | 1.0.0 |
| | width'fullscreen' \| 'popover' | iOS only: The presentation style of the browser. Defaults to fullscreen. Ignored on other platforms. | 1.0.0 |
| | heightnumber | iOS only: The width the browser when using presentationStyle 'popover' on iPads. Ignored on other platforms. | 4.0.0 |
| | useASWebAuthenticationSessionnumber | iOS only: The height the browser when using presentationStyle 'popover' on iPads. Ignored on other platforms. | 4.0.0 |
| | callbackUrlSchemeboolean | iOS only: Use ASWebAuthenticationSession instead of SFSafariViewController. Useful for OAuth flows or when you need access to the callback URL. Ignored on other platforms. | 7.1.0 |
| | prefersEphemeralWebBrowserSessionstring | iOS only: The callback URL scheme to listen for when using ASWebAuthenticationSession. Required if useASWebAuthenticationSession is true. | 7.1.0 |
| | boolean | iOS only: Whether to use an ephemeral web browser session (no cookies shared). Only applies when useASWebAuthenticationSession is true. | 7.1.0 |
#### PluginListenerHandle
| Prop | Type |
| ------------ | ----------------------------------------- |
| remove` | () => Promise<void> |