0

I've built a hybrid Phonegap app. I'm a Android user, so I've tested it on KitKat, and it worked. I've sent it to my client, who's an iPhone user, and he sent me this screenshot:

enter image description here

Config.xml

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.swapco.swapco" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0" xmlns:android="http://schemas.android.com/apk/res/android">
    <name>SwapCo</name>
    <description>
        SwapCo
    </description>
    <author email="support@phonegap.com" href="http://phonegap.com">
        SwapCo
    </author>
    <content src="index.html" />
    <preference name="permissions" value="none" />
    <preference name="orientation" value="default" />
    <preference name="target-device" value="universal" />
    <preference name="fullscreen" value="true" />
    <preference name="webviewbounce" value="true" />
    <preference name="prerendered-icon" value="true" />
    <preference name="stay-in-webview" value="false" />
    <preference name="ios-statusbarstyle" value="black-opaque" />
    <preference name="detect-data-types" value="true" />
    <preference name="exit-on-suspend" value="false" />
    <preference name="show-splash-screen-spinner" value="true" />
    <preference name="auto-hide-splash-screen" value="true" />
    <preference name="disable-cursor" value="false" />
    <preference name="android-minSdkVersion" value="10" />
    <preference name="android-installLocation" value="auto" />
    <gap:plugin name="org.apache.cordova.battery-status" />
    <gap:plugin name="org.apache.cordova.camera" />
    <gap:plugin name="org.apache.cordova.media-capture" />
    <gap:plugin name="org.apache.cordova.console" />
    <gap:plugin name="org.apache.cordova.contacts" />
    <gap:plugin name="org.apache.cordova.device" />
    <gap:plugin name="org.apache.cordova.device-motion" />
    <gap:plugin name="org.apache.cordova.device-orientation" />
    <gap:plugin name="org.apache.cordova.dialogs" />
    <gap:plugin name="org.apache.cordova.file" />
    <gap:plugin name="org.apache.cordova.file-transfer" />
    <gap:plugin name="org.apache.cordova.geolocation" />
    <gap:plugin name="org.apache.cordova.globalization" />
    <gap:plugin name="org.apache.cordova.inappbrowser" />
    <gap:plugin name="org.apache.cordova.media" />
    <gap:plugin name="org.apache.cordova.network-information" />
    <gap:plugin name="org.apache.cordova.splashscreen" />
    <gap:plugin name="org.apache.cordova.vibration" />
    <icon src="icon.png" />
    <icon gap:platform="android" gap:qualifier="ldpi" src="www/res/icon/android/icon.png" />
    <icon gap:platform="android" gap:qualifier="mdpi" src="www/res/icon/android/icon.png" />
    <icon gap:platform="android" gap:qualifier="hdpi" src="www/res/icon/android/icon.png" />
    <icon gap:platform="android" gap:qualifier="xhdpi" src="www/res/icon/android/icon.png" />
    <icon gap:platform="blackberry" src="www/res/icon/blackberry/icon-80.png" />
    <icon gap:platform="blackberry" gap:state="hover" src="www/res/icon/blackberry/icon-80.png" />
    <icon gap:platform="ios" height="57" src="www/res/icon/ios/icon.png" width="57" />
    <icon gap:platform="ios" height="72" src="www/res/icon/ios/icon.png" width="72" />
    <icon gap:platform="ios" height="114" src="www/res/icon/ios/icon.png" width="114" />
    <icon gap:platform="ios" height="144" src="www/res/icon/ios/icon.png" width="144" />
    <icon gap:platform="webos" src="www/res/icon/webos/icon-64.png" />
    <icon gap:platform="winphone" src="www/res/icon/windows-phone/icon-48.png" />
    <icon gap:platform="winphone" gap:role="background" src="www/res/icon/windows-phone/icon-173-tile.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-ldpi" src="www/res/screen/android/screen-ldpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-mdpi" src="www/res/screen/android/screen-mdpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-hdpi" src="www/res/screen/android/screen-hdpi-portrait.png" />
    <gap:splash gap:platform="android" gap:qualifier="port-xhdpi" src="www/res/screen/android/screen-xhdpi-portrait.png" />
    <gap:splash gap:platform="blackberry" src="www/res/screen/blackberry/screen-225.png" />
    <gap:splash gap:platform="ios" height="480" src="www/res/screen/ios/screen-iphone-portrait.png" width="320" />
    <gap:splash gap:platform="ios" height="960" src="www/res/screen/ios/screen-iphone-portrait-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1136" src="www/res/screen/ios/screen-iphone-portrait-568h-2x.png" width="640" />
    <gap:splash gap:platform="ios" height="1024" src="www/res/screen/ios/screen-ipad-portrait.png" width="768" />
    <gap:splash gap:platform="ios" height="768" src="www/res/screen/ios/screen-ipad-landscape.png" width="1024" />
    <gap:splash gap:platform="winphone" src="www/res/screen/windows-phone/screen-portrait.jpg" />
    <access origin="*" />
    <plugin name="cordova-plugin-whitelist" version="1" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
    <allow-intent href="tel:*" />
    <allow-intent href="sms:*" />
    <allow-intent href="mailto:*" />
    <allow-intent href="geo:*" />
    <platform name="android">
        <allow-intent href="market:*" />
    </platform>
    <platform name="ios">
        <allow-intent href="itms:*" />
        <allow-intent href="itms-apps:*" />
    </platform>
    <engine name="android" spec="^4.0.0" />
    <engine name="ios" spec="^3.8.0" />
     <feature name="Camera">
         <param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
    </feature>

    <gap:config-file platform="android" parent="/manifest">
         <application android:debuggable="true" />
    </gap:config-file>
</widget>

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>XXX</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

    <link rel="stylesheet" href="css/style.css">


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="container">
    <div class="row">
        <div class=" col-xs-4 col-xs-push-4 col-sm-4 col-sm-push-4 col-md-2 col-md-push-5">
            <img src="images/logo.png" class="img-responsive center-block logo">
        </div>
    </div>
    <div class="row">
        <div class=" col-xs-12 col-sm-8 col-sm-push-2 col-md-4 col-md-push-4">
            <br />
            <h2 class="text-center white">Welcome!</h2>
            <p class="text-center white">Selling made simple.</p>
            <div class="input-area" style="margin-top:60px">
                <input id="username" type="text">
                <span class="icon"><i class="fa fa-user"></i> </span>
            </div>
            <div class="input-area">
                <input id="password" type="password">
                <span class="icon"><i class="fa fa-key"></i> </span>
            </div>
        </div>

<div class="bottom-buttons">
    <button type="button" onclick="authenticate()"  class="btn signin pull-left">SIGN IN</button>
    <a href="signup.html"><button type="button"  class="btn signup pull-right">SIGN UP</button></a>
</div>
    </div>
</div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->

<!-- Latest compiled and minified JavaScript -->
<script src="js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
</body>
</html>

I've a Apple newbie, any comments are very welcome. By the way, I was using development certificates for the iOS build, and I've linked his iPhone to them.

The Onin
  • 5,068
  • 2
  • 38
  • 55
  • When are you getting this error? Are you accessing a external URL can you please share the flow you ran into this error, please, the code that you posted has a login and sign up elements and the screen shot show a back button. I will help you resolve this sooner. If you can explain the problem. – Sunil Kumar May 06 '16 at 09:26

4 Answers4

0

Edit

Here are a few things that I've noticed:

  • Missing <script type="text/javascript" src="cordova.js"></script> in index.html
  • The version in <plugin name="cordova-plugin-whitelist" version="1" /> should be set to 1.0.0.
  • Also, I'm not sure how it's working on Android without this meta tag <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">. Find more info on Content-Security-Policy.

Without any code I cannot suggest anything but I found this question on Stack Overflow that seems like it might help you.

Seems like a URL issue.

Community
  • 1
  • 1
utamanna
  • 189
  • 2
  • 10
  • Hey. My client says he can't even install it? Does that make sense? – The Onin May 06 '16 at 04:01
  • The guy in the question you're linking is using MVC / routers. We're not, it's just a plain web page with AJAX built as hybrid app. It works on Android, it doesn't work on iOS. – The Onin May 06 '16 at 05:10
  • If he can't install it then that means either his device isn't provisioned (or that he's using a different iOS device that's not in the provisioned list), or you've build the app with the distribution cert, or that the cert/provisioning profile has expires. – utamanna May 06 '16 at 13:34
0

For iOS make sure you are following ATS app transport policy for iOS 9+

If you want to access external URLs you can set your property to arbitraryloads true.

Example PhoneGap: modify config.xml to add properties to Info.plist ion iOS

Community
  • 1
  • 1
Sunil Kumar
  • 1,718
  • 16
  • 33
0

Does it work in the iOS simulator?

incorelabs
  • 566
  • 5
  • 13
  • Could you please link one I could use? – The Onin May 17 '16 at 10:35
  • Aren't you developing it on the a Mac? IF yes. You need to download XCode. Get XCode. – incorelabs May 17 '16 at 11:08
  • I'm not, I'm on a PC. – The Onin May 17 '16 at 12:03
  • Well I could help you with it, if you would like to. The basic thing is you need to test on an iOS device or Simulator to debug the app. And to know whats going wrong. I haven't checked the source code you posted. I was under the assumption that you were on a Mac. A suggestion, I've tried using Phonegap Build and it really didn't lead me anywhere. Switching to either cordova or phonegap running on an actual machine is way better. :-) – incorelabs May 17 '16 at 13:07
0

The problem was in the certificates.

To fix it, I issued distribution (as opposed to development) certificate, two provisions (Ad Hoc for local testing and AppStore), and after that, it worked.

The Onin
  • 5,068
  • 2
  • 38
  • 55