How to create a simple webview using ionic for my website

Question

I am trying to make a simple webview app for my website using ionic.
What I did is

npm install -g cordova

version->9.0.0

npm install -g ionic

version->5.0.3

ionic start myApp blank

cd myApp

ionic cordova plugin add cordova-plugin-ionic-webview

npm install @ionic-native/ionic-webview

Now where should I edit files. I want to place my site link only, no more extra features. I cant find a good guide to make a webview app. Do I need to use in-app-browser instead of webview? Do I miss any steps?

cordova-plugin-ionic-webview says to look for <preference name="Hostname" value="app" />, I cant find that code in config.xml in root directory of app. Where is that code located?

Also suggest which platform is best for cross platform webview app.

Infelicity

Answer 1

I suppose you just want to display an existing website? Webview is not meant to do that, you can simply use iframes for example

<ion-content>
    <iframe src="https://www.example.com"  style="width:100%;height:100%" scrolling="yes" ></iframe>
</ion-content>

or if you want to open it in an external browser like safari, use the inAppBrowser plugin

Find a working example here

Eph

Yes, I want to display existing website. Where to add that iframe code? Newbie to ionic. To clarify you said "webview is not for that", so the android webview also not for that? – Infelicity

I have added a stackblitz example. You should just put this iframe code in the html part of a page. Webview is not about displaying webpages, but to optimize Cordova apps for the different operating systems. – Eph

I think you need to change[src] to src in code. Can you tell me how to make it look full screen, height and width? – Infelicity

[src] is if you need a dynamic url. For full screen it depends on which version you are using, try to inspect the app in chrome and change the CSS until you have what you want. – Eph

I tried 100vh and 100vw not working, I am using ionic 5.0.3, Do you have any suggestions? – Infelicity

Have a look at my edit, I have test this on my workspace and it works fine. – Eph

Answer 2

Specific to your question

1. Install these plugin in your Ionic app doc

    $ ionic cordova plugin add cordova-plugin-inappbrowser
    $ npm install @ionic-native/in-app-browser 
   

2. Import in your app.module.ts file don't forget to enter in provider array

3. In your desired file home.ts, bind with button or call directly

    public openWebView(): void {
       this.iab.create("https://www.example.com", "_blank");
    }
   

Experience the beauty of view :-)

Ondrea

How to add custom header in inappbrowser? – Theola

@Theola have you figured out how to do that? – Kicksorter

@GeorgioSayegh Not yet couldn't figure out. – Theola