Browser

Browser

Browser: Opening an In-App or System Browser

Links to other sites should not replace your app inside its own WebView: the reader loses BookNest's UI and has no address bar to judge where they are. Browser opens the page in a Chrome 1 Custom Tab on Android and an SFSafariViewController on iOS: a real browser drawn over your app (on Android with Chrome's cookies and saved logins) that returns to the app when closed:

Opening a page in src/js/lab.jsJavaScript

export async function web() {
  await Browser.open({ url: 'https://example.com/', toolbarColor: '#b3541e' });
  return show('browser', 'opened');
}
// in watchPlugins():
  Browser.addListener('browserFinished', () => show('browserFinished', 'closed'));

The right-hand screen of the figure in Share shows the tab in BookNest's color, with Chrome's own address, share and menu controls; the first time, Chrome showed its sign-in screen first. Closing the tab with its X:

Output of 59

LAB browser "opened"
LAB appStateChange {"isActive":false}
LAB appStateChange {"isActive":true}
LAB browserFinished "closed"
LAB networkStatusChange {"connected":true,"connectionType":"wifi"}

The app went to the background while the tab was up, which is worth knowing if appStateChange pauses work. Your code cannot read the tab's content or URL, which is the point: it is the right tool for OAuth sign-in pages and payment providers. When you need to inject scripts, intercept navigation or embed a page, the separate InAppBrowser plugin offers a WebView mode alongside the system browser (Overlapping Plugins).

MENU