Webview on Ionic application

Matrix12 picture Matrix12 · Apr 10, 2016 · Viewed 7.2k times · Source

I created a mobile app using Ionic framework. I want to create a webview on ionic. For that, I used cordova-plugin-inappbrowser plugin. Now, this plugin works, but plugin is not stable. I want to create webview with chrome browser and not with default browser. For that, I used browser crosswalk and removed cordova-plugin-inappbrowser plugin. But now, webview is not working. Now, when I use both browser crosswalk and cordova-plugin-inappbrowser plugins, webview gets a bad look. Any ideas on how to create webview with chrome browser?

Answer

Jur Clerkx picture Jur Clerkx · Apr 11, 2016

If I understand correctly, you are asking not how to create a webview in the Ionic application, but how to open a external url in the default webbrowser of the phone?

You can do this by using the cordova-plugin-whitelist plugin. When this is installed, you can set several things, but I'll list the default I use below. This causes all external items to open outside the app (all this is from the config.xml file):

<access origin="*"/>
<allow-intent href="http://*/*" launch-external="yes"/>
<allow-intent href="https://*/*" launch-external="yes"/>
<allow-intent href="tel:*" launch-external="yes"/>
<allow-intent href="sms:*" launch-external="yes"/>
<allow-intent href="mailto:*" launch-external="yes"/>
<allow-intent href="geo:*" launch-external="yes"/>

acces origin="*" tells the app that it's allowed to acces all external resources, as * is the wildcard. After that using allow-intent with the launch-external attribute set to yes tells the app that all the links specified with the href attribute should be opened externally.

The code above makes sure that alles external websites, phonenumbers, textmessages, e-mail and even geo locations are opened in native apps. You need to make sure that all the links you use in the app use the format provided above.