5

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.

Community
  • 1
  • 1

2 Answers2

6

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

RobrechtVM
  • 879
  • 5
  • 22
  • 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? –  Jun 21 '19 at 12:44
  • 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. – RobrechtVM Jun 21 '19 at 12:52
  • 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? –  Jun 21 '19 at 14:07
  • [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. – RobrechtVM Jun 21 '19 at 14:11
  • I tried `100vh` and `100vw` not working, I am using ionic 5.0.3, Do you have any suggestions? –  Jun 21 '19 at 14:26
  • Have a look at my edit, I have test this on my workspace and it works fine. – RobrechtVM Jun 21 '19 at 14:55
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 :-)

Rajat.r2
  • 137
  • 2
  • 13