Ionic on iOS not launching phone apps

ionic-v1
1

I have an app where I am trying to access apps such as the Phone, SMS and Gallery from iOS. It works on Android but not on iPhone. (I have tested this on several devices, such as iPhone 6, iPhone 7, and a couple of Samsung Galaxies).

Whenever I click on the call button on iOS, nothing happens, unless I try to open:

  • iOS control center
  • iOS notification bar
  • Keyboard.

After I try to open one of these, then the phone app from iPhone is opened and the call is executed with the correct number. On android it runs instantly when I press call. Same thing happens with the open gallery and SMS buttons.

I have tried with this:

<ion-option-button 
	class="item-option item-option--green"
	ng-click="callNumber('{{member.phone_number}}')">
	<i class="ion-ios-telephone"></i>
</ion-option-button>

Being 'callNumber":

$scope.callNumber = function(number) {
    window.open('tel:' + number, '_system');
};

I have also tried with this:

<ion-option-button 
	class="item-option item-option--blue">
	<a ng-href='tel: {{member.phone_number}}'>
		<i class="ion-ios-telephone"></i>
	</a>
</ion-option-button>

…
Some of my config.xml looks like this:

  <access origin="tel:*" launch-external="yes"/>
  <access origin="sms:*" launch-external="yes"/>
  <access origin="mailto:*" launch-external="yes"/>
  <access origin="*" launch-external="yes"/>
  <allow-intent href="http://*/*"/>
  <allow-intent href="https://*/*"/>
  <allow-intent href="tel:*"/>
  <allow-intent href="sms:*"/>
  <allow-intent href="mailto:*"/>
  <plugin name="ionic-plugin-keyboard" spec="~2.2.1"/>
  <plugin name="cordova-plugin-device" spec="~1.1.3"/>
  <plugin name="cordova-plugin-camera" spec="~2.3.0"/>
  <plugin name="cordova-plugin-statusbar" spec="~2.2.0"/>
  <plugin name="cordova-plugin-whitelist" spec="~1.3.0"/>
  <plugin name="cordova-plugin-console" spec="~1.0.4"/>
  <plugin name="cordova-plugin-splashscreen" spec="~4.0.0"/>
  <plugin name="cordova-plugin-network-information" spec="~1.3.0"/>
  <plugin name="cordova-plugin-inappbrowser" spec="~1.5.0"/>

Apparently the app doesn’t allow the external apps to be called unless this is ‘forced’ by opening of the OS capabilities such as Control Center, Notifications Bar or Keyboard.

I have to deliver soon and this is one of my last shots on this, otherwise I will have to change the approach somehow.

3

Hi,
Sorry I havent got a solution for you… Im facing the same issue. Did you figure out a workaround?

4

I just found one. When I was debugging with iOS and Safari noticed that the console threw errors related to gap//:ready or something related. I think this was caused by permissions. So I found another post who solved it by adding these permissions to the meta tag on index.html.

This is how mine looks like after the fix:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' gap: *; script-src 'self' 'unsafe-inline' 'unsafe-eval' gap: wss: ws: *; style-src 'self' 'unsafe-inline' *; img-src 'self' data: *">

I added the “gap:” string just after default src on the content attribute.
This made it work.

5

awesome, cheers mate! I’ll give that a go

6

Did you try that solution? how did it go?

7

Hi @santalurr
Turns out my problem was that I wasnt installing ionic-native first - I didnt realise this had to be installed https://github.com/driftyco/ionic-native before installing the individual plugins. Havent tested on iOS yet, but SMS, CallNumber and inAppBrowser all work well on Android now.