Search code examples
ionic-frameworkwebviewcordova-pluginsionic-pluginsionic-webview

How to create a simple webview using ionic for my website


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.


Solution

  • 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