3

I am attempting to take my AngularJS mobile site and wrap it as a PhoneGap/Cordova Hybrid App using the PhoneGapBuild website. I'm able to successfully upload, build, and install for IOS & Android, however, when running the app on either device I only get a blank white screen.

Additional info:

  • This is my first attempt at creating a mobile app.
  • I am using build.phonegap.com to build the html assets of my mobile website as a hybrid app for android and ios utilizing the config.xml file (above).
  • targets are Android sdk version 7 and iOS as default.
  • I'm testing the app on an Android Charge and iPhone 5c

I have used the debugger "weinre" to console.log if "window.cordova" exists and it does not. However, things like "window.angular" and "window._" do exists because I'm loading them from an outside CDN. It looks as though none of my locally referenced assets are loading (confirmed with console.logs in them). I have tried references "/cordova.js", "www/cordova.js", "/www/cordova.js" all to no avail.

Is there a permission or XML configuration I'm missing or something else completely?

To be clear, I am referencing cordova in my index.html file:

<script src="cordova.js"></script>

Here is my config file:

<?xml version="1.0" encoding="utf-8"?>

<widget id="com.tristatetennis.app" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0" xmlns:gap="http://phonegap.com/ns/1.0">
    <name>TriStateTennis</name>
    <description>Tennis</description>
    <content src="index.html" />
    <icon src="icon.png" />
    <access origin="*" />
    <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="14" />
    <preference name="android-installLocation" value="auto" />
    <plugin name="cordova-plugin-battery-status" />
    <plugin name="cordova-plugin-camera" />
    <plugin name="cordova-plugin-media-capture" />
    <plugin name="cordova-plugin-console" />
    <plugin name="cordova-plugin-contacts" />
    <plugin name="cordova-plugin-device" />
    <plugin name="cordova-plugin-device-motion" />
    <plugin name="cordova-plugin-device-orientation" />
    <plugin name="cordova-plugin-dialogs" />
    <plugin name="cordova-plugin-file" />
    <plugin name="cordova-plugin-file-transfer" />
    <plugin name="cordova-plugin-geolocation" />
    <plugin name="cordova-plugin-globalization" />
    <plugin name="cordova-plugin-inappbrowser" />
    <plugin name="cordova-plugin-media" />
    <plugin name="cordova-plugin-network-information" />
    <plugin name="cordova-plugin-splashscreen" />
    <plugin name="cordova-plugin-vibration" />
    <!-- <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>
</widget>

Thanks

coderich
  • 83
  • 5
  • Please *answer the following questions in your* **post**. Is this your first App? What is your target platform and their target versions? Are you using [CLI, SDK or Build](https://github.com/jessemonroy650/top-phonegap-mistakes/blob/master/new-to-Phonegap.md#001) ? When you have *added that information to your post*, please respond in the *comments* - so I know you have update your **post**. –  Dec 30 '15 at 22:59
  • @JesseMonroy650 thank you for the questions; I have updated my post – coderich Dec 31 '15 at 01:31
  • Okay. I have added you information where it is most useful. -- You have multiple mis-conceptions and mistakes. The largest is you cannot make a website wrapper. You app will be reject by Google and Apple. You will need to do a complete rewrite. Are you ready? or do you have some questions before I answer this? –  Dec 31 '15 at 02:24
  • I'm both ready and I have some questions. I'm not concerned about rejection at this point since I'm going through the process to get familiar with what has to be done - I'm willing to make enhancements and dig into the Cordova APIs so that it's simply not my website wrapped as an app. With that said, yes I am under the assumption that I can take my web assets, which have been code as a single page app, and wrap it as a webview hybrid app. I would love to hear your comments. – coderich Dec 31 '15 at 02:45
  • excellent. Sounds like you will do rather well. give me about 20 minutes. it's 8:34 - in El Paso, Texas. –  Dec 31 '15 at 03:34

2 Answers2

0

The good news is that your config.xml looks pretty good, better than most.

  1. Just to be sure, we are talking about PGB (PhoneGap Build), a cloud-based build service by Phonegap/Adobe.

  2. Most your problems stem from stumbling into
    #5 When designing the app, thinks phonegap works like a website or webbrowser. of Top Mistakes by Developers new to Cordova/Phonegap

    Make sure you read all the bold sentences, because you are likely to have to read this again and again.

    On the part I spoke about earlier, your App cannot be a wrapper for you website, here is what you need to know:

    Quote Apple iTunes Guidelines - 2.12

    Apps that are not very useful, unique, are simply web sites bundled as Apps, or do not provide any lasting entertainment value may be rejected

  3. For Phonegap Build it's main assets (index.html, config.xml) must be in the root directory. This means both files *MUST* be in the same directory. This also means subdirectories can include other web-related assests, like javascript, css, and more webpages.

    This mistakes comes from stumbling into #1 of Top Mistakes by Developers new to Cordova/Phonegap. If you were using Cordova/Phonegap CLI, then config.xml sits one directory below index.html, and index.html sits in www/.

  4. When not using phonegap-version in the config.xml, you will get the latest version, which is currently cli-5.2.0. This has many implications.

    You cannot ask for an android-minSdkVersion less than what the compiler will support. The documentation says 7 is okay, but this is a mistake. The lowest Android API supported is 14 (Ice Cream Sandwich).

    This requirement is extremely difficult to realize because you have to read the *Cordova* documentation. Android Platform Guide -> Requirements and Support. If you want to support 7, then you will need to use Phonegap CLI.

  5. If you are using Android 6.0, this is not support by PGB, YET. IF you are using iOS9, Cordova has just recently been released 08 Dec 2015 (with hot fixes 18 Dec 2015 ), this is not support by PGB, YET. This is because PGB, still uses the Cordova compilers to do it's job.

  6. You can use cordova.js or phonegap.js. It does not matter, both are supported. For detail see: Documentaion -> Introduction -> Getting Started with Build -> Sections -> Making Sure You can Still Access the PhoneGap API

  7. Make sure you use version with all the plugins.

    Documentaion -> Configuring -> Plugins -> Including a plugin in your project

    If you omit the spec (version) tag, your app will always be built with the latest version of the plugin. It will be updated automatically the next time you update your app code after a plugin is updated, which may cause unexpected behaviour.

Also, here are some helper links and FAQs to help:

0

Turns out my problem was related to AngularJS integration with PhoneGap/Cordova. First and foremost the specific problem at hand was due to the base tag in my HTML markup. Angular requires the base tag when html5 mode is set to true. However, html5 mode will not work with PhoneGap/Cordova as stated here. To resolve this issue you must do the following:

  1. Remove the base tag from your HTML markup completely
  2. Make sure all URL references are relative (ie. no leading "/")
  3. Set $locationProvider.html5Mode(false);
  4. $sceDelegateProvider.resourceUrlWhitelist(['**']); (docs)
  5. $compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel):/); (reference)

Hope this helps someone

Community
  • 1
  • 1
coderich
  • 83
  • 5