@capacitor/browser

What is @capacitor/browser?

@capacitor/browser is a Capacitor plugin that provides functionality to open an in-app browser within a Capacitor-based application. It allows developers to open URLs in a browser view that is embedded within the app, providing a seamless user experience.

What are @capacitor/browser's main functionalities?

Open a URL

This feature allows you to open a specified URL in an in-app browser. The code sample demonstrates how to use the `open` method from the `Browser` module to open 'https://example.com'.

const { Browser } = require('@capacitor/browser');

async function openUrl() {
  await Browser.open({ url: 'https://example.com' });
}

openUrl();

Close the Browser

This feature allows you to programmatically close the in-app browser. The code sample demonstrates how to use the `close` method from the `Browser` module to close the browser.

const { Browser } = require('@capacitor/browser');

async function closeBrowser() {
  await Browser.close();
}

closeBrowser();

Listen for Browser Events

This feature allows you to listen for events such as when the browser is closed or when a new page is loaded. The code sample demonstrates how to use the `addListener` method to listen for `browserFinished` and `browserPageLoaded` events.

const { Browser } = require('@capacitor/browser');

Browser.addListener('browserFinished', () => {
  console.log('Browser is closed');
});

Browser.addListener('browserPageLoaded', () => {
  console.log('New page loaded in the browser');
});

Other packages similar to @capacitor/browser

cordova-plugin-inappbrowser

The `cordova-plugin-inappbrowser` plugin provides similar functionality for Cordova-based applications. It allows you to open URLs in an in-app browser and provides various options for customization. Compared to @capacitor/browser, it is designed for Cordova rather than Capacitor, but offers similar capabilities.

react-native-inappbrowser-reborn

The `react-native-inappbrowser-reborn` package provides in-app browser functionality for React Native applications. It allows you to open URLs in a browser view within the app and offers various customization options. Compared to @capacitor/browser, it is tailored for React Native rather than Capacitor, but serves a similar purpose.

README

@capacitor/browser

The 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.

Install

npm install @capacitor/browser
npx cap sync

Android

Variables

This plugin will use the following project variables (defined in your app's variables.gradle file):

• androidxBrowserVersion: version of androidx.browser:browser (default: 1.7.0)

Example

import { Browser } from '@capacitor/browser';

const openCapacitorSite = async () => {
  await Browser.open({ url: 'http://capacitorjs.com/' });
};

API

• open(...)
• close()
• addListener('browserFinished', ...)
• addListener('browserPageLoaded', ...)
• removeAllListeners()
• Interfaces

open(...)

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

Open a page with the specified options.

Param	Type
options	OpenOptions

Since: 1.0.0

---

close()

close() => Promise<void>

Web & iOS only: Close an open browser window.

No-op on other platforms.

Since: 1.0.0

---

addListener('browserFinished', ...)

addListener(eventName: 'browserFinished', listenerFunc: () => void) => Promise<PluginListenerHandle>

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

---

addListener('browserPageLoaded', ...)

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

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

---

removeAllListeners()

removeAllListeners() => Promise<void>

Remove all native listeners for this plugin.

Since: 1.0.0

---

Interfaces

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	string	A hex color to which the toolbar color is set.	1.0.0
presentationStyle	'fullscreen' | 'popover'	iOS only: The presentation style of the browser. Defaults to fullscreen. Ignored on other platforms.	1.0.0
width	number	iOS only: The width the browser when using presentationStyle 'popover' on iPads. Ignored on other platforms.	4.0.0
height	number	iOS only: The height the browser when using presentationStyle 'popover' on iPads. Ignored on other platforms.	4.0.0

PluginListenerHandle

Prop	Type
remove	() => Promise<void>