Webview Mobile App in ionic

cordova
1

Hi,

I am new user of ionic. I am developing webview app in Ionic. I have created blank template and run successfully. Now how to i can integrate webview in MyApp ? I want when i’ll open my app than my responsive website should open directly instead button etc or any other home screen ? I want to open directly my website in webview. Kindly share with me tutorial or any other solution which i can implement easily.

Kind Regards,

2

That is what Capacitor is for built by the Ionic team. It allows you to run your web app as native apps on iOS and Android. Ionic created Capacitor to replace Cordova.

3

I have added Codova for InBrowserApp. But i don’t understand which code should open direct webview in app ? can you share with me any complete example of webview app ? i want to open direct website link as webview.

4

Not really sure what you are trying to do but here is some code using the Cordova InAppBrowser with Capacitor.

import {
    InAppBrowser,
    InAppBrowserOptions,
} from '@awesome-cordova-plugins/in-app-browser'

const showWebpage = (): void => {
    const options: InAppBrowserOptions = {
        location: 'yes',
        closebuttoncaption: 'Close',
        hidenavigationbuttons: 'yes',
        hideurlbar: 'yes',
    }

    browser = InAppBrowser.create('https://test.com', '_blank', options)

    browser.on('loaderror').subscribe(() => {
        // Handle error
    })

    browser.on('exit').subscribe(() => {
        // Handle exit
    })

    browser.show()
}

showWebpage()
5

I have place same above code. But this showing White Blank screen. Link is not opening.

import {InAppBrowser, InAppBrowserOptions} from '@awesome-cordova-plugins/in-app-browser/ngx';

export class HomePage {
constructor(private iab: InAppBrowser) { }
public openWithInAppBrowser(): void {
	const options: InAppBrowserOptions = {
		location: 'no',
		closebuttoncaption: 'Close',
		hidenavigationbuttons: 'yes',
		hideurlbar: 'yes',
	}

	const browser = this.iab.create('https://www.google.com/', '_self', options);
	browser.on('loadstart').subscribe(event => {});
	browser.on('loaderror').subscribe(() => {});

	browser.on('exit').subscribe(() => {});

	browser.show();
}
}
6

Have you also installed GitHub - apache/cordova-plugin-inappbrowser: Apache Cordova Plugin inappbrowser?

7

Yes, I have already insalled.

8

You didn’t call the openWithInAppBrowser() function in construct so how it will open your site

9

openWithInAppBrowser

Can you correct this ? what and where i will write this function ?

Kind Regards

10

export class HomePage {
constructor(private iab: InAppBrowser) {
this.openWithInAppBrowser();
}
public openWithInAppBrowser(): void {
const options: InAppBrowserOptions = {
location: ‘no’,
closebuttoncaption: ‘Close’,
hidenavigationbuttons: ‘yes’,
hideurlbar: ‘yes’,
}

const browser = this.iab.create('https://www.google.com/', '_self', options);
browser.on('loadstart').subscribe(event => {});
browser.on('loaderror').subscribe(() => {});

browser.on('exit').subscribe(() => {});

browser.show();

}
}

11

It is working or not…?