This is my first time using the Browser plugin, however, the results are not matching my expectation. Have an Angular Capacitor mobile application and we already use several other plus custom plugins in the project. I am wanting to open a page in app rather than the external browser. Given the code below when opening the component Android’s external browser is launched rather than opening the page inside the app. Do I need to specify a DOM element (Angular ViewChild) to insert the browser into or something?
@Component({
selector: 'nvo-browser-dialog-component',
template: '<div>Hi Steve</div>'
})
export class BrowserDialogComponent implements OnInit {
constructor(public dialogRef: MatDialogRef<BrowserDialogComponent>) {}
async ngOnInit() {
const url = 'http://capacitor.ionicframework.com/';
await Browser.open({ url: url });
}
}
The plugin uses Android Custom Tabs using an intent, so it should show a full screen browser on top of your app, not a separate browser.
Which browser is it opening?
Which device are you testing on? Maybe your device don’t support Android Custom Tabs, not all vendors do.
Yeah upon further investigation the browser does appear to be running within the app’s context. Next question would be how do I return control (close the browser on top) back to the underlying app?
When I run the app on an Android phone there is a close ‘X’ at the top left of the browser window which will close and return to app so that seems as expected.
We also have a build of the app that runs on a custom AOSP Android build as a system desktop app and will have the Android OS controls locked out. In this scenario the built-in browser is the Webview Browser Tester and there is no ‘X’ to close, however, the OS ‘Back’, ‘Home’, and ‘Recents’ navigation bar is shown but I’m not sure if that will be available when OS controls are locked down.
I did verify that the OS Back navigation is still present when app is locked down in Kiosk mode which closes browser window on top of app, so I think it should work fine.
