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.

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

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 :-)