Hybrid mobile app with cordova working in cordova sim but not when exported as android apk
Question
I am working on a hybrid mobile application which was easy to make.. fine.. but it dosent work on an actual android sim or device.
Below is my setup.
IDE: Jboss dev studio jdk: 1.8 tools in path: android, ant, git, node
i created a hybrid mobile app in jboss dev tools with hybrid mobile engine as cordova 4.1.1. Below is the project structure.
project structure and config.xml
Im also copy pasting the config below.
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.nexisone" version="0.0.1" xmlns="http://www.w3.org/ns/widgets"
xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>nexisone</name>
<description>
A sample Apache Cordova application that responds to the
deviceready
event.
</description>
<author href="http://www.eclipse.org/thym" email="thym-dev@eclipse.org">
Eclipse.org -
Thym
</author>
<content src="mobileapp.html" /><!-- "index.html" -->
<!-- Whitelist configuration. Refer to https://cordova.apache.org/docs/en/edge/guide_appdev_whitelist_index.md.html -->
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*.*" subdomains="true"/>
<!-- <access origin=".*" /> -->
<!-- <access origin="http://127.0.0.1:9090" /> -->
<access origin="http://192.168.71.125*" subdomains="true"/><!-- resource server ip -->
<access origin="http://*.jquery.com*" subdomains="true"/>
<access origin="http://ticketmonster-jdf.rhcloud.com"/>
<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" version="4.1.1" />
<feature name="Geolocation">
<param name="id" value="cordova-plugin-geolocation" />
</feature>
<feature name="Camera">
<param name="android-package" value="org.apache.cordova.camera.CameraLauncher" />
<param name="wp-package" value="Camera" />
<param name="id" value="cordova-plugin-camera" />
</feature>
<feature name="Device">
<param name="android-package" value="org.apache.cordova.device.Device" />
<param name="wp-package" value="Device" />
<param name="id" value="cordova-plugin-device" />
</feature>
<feature name="Notification">
<param name="android-package" value="org.apache.cordova.dialogs.Notification" />
<param name="wp-package" value="Notification" />
<param name="id" value="cordova-plugin-dialogs" />
</feature>
<feature name="StatusBar">
<param name="android-package" value="org.apache.cordova.statusbar.StatusBar" />
<param name="onload" value="true" />
<param name="wp-package" value="StatusBar" />
<param name="id" value="cordova-plugin-statusbar" />
</feature>
<feature name="Whitelist">
<param name="android-package" value="org.apache.cordova.whitelist.WhitelistPlugin" />
<param name="onload" value="true" />
<param name="id" value="cordova-plugin-whitelist" />
</feature>
</widget>
and here is the mobileapp.html
<!DOCTYPE html>
<html>
<head>
<title>jQuery Mobile Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Good default declaration:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of eval() and inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
* Enable eval(): add 'unsafe-eval' to default-src
-->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com; style-src 'self' 'unsafe-inline'; media-src *"> -->
<!-- Allow requests to foo.com -->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' jquery.com"> -->
<!-- Enable all requests, inline styles, and eval() -->
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' * 'unsafe-inline' 'unsafe-eval'; script-src 'self' * 'unsafe-inline' 'unsafe-eval'">
<!-- Allow XHRs via https only -->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' https:"> -->
<!-- Allow iframe to https://cordova.apache.org/ -->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self'; frame-src 'self' https://cordova.apache.org"> -->
<!-- Content-Security-Policy-Report-Only: policy -->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' *;media-src *;script-src *;style-src * "> -->
<!-- <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com http://code.jquery.com http://192.168.71.125:9090; style-src 'self' 'unsafe-inline' http://code.jquery.com; media-src *"> -->
<meta name="viewport"
content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="cordova.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script type="text/javascript"
src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
console.log("Device Ready To Go");
console.log("Asking for geo location");
navigator.geolocation.getCurrentPosition(onGeoSuccess, onGeoError);
} // onDeviceReady
$(document).on("pageinit", "#page1", function(event){
console.log("Ready To Go");
});
$.support.cors = true;
$.getJSON("http://192.168.71.125:9090", function(members) {
// console.log("returned are " + members);
var listOfMembers = $("#listOfItems");
listOfMembers.empty();
$.each(members, function(index, member) {
// console.log(member.name);
listOfMembers.append(
"<li><a href='#'>" + member.name + "</a>");
});
listOfMembers.listview("refresh");
});
function onGeoSuccess(position) {
var element = document.getElementById('geolocation');
element.innerHTML =
'Latitude: ' + position.coords.latitude + '<br />' +
'Longitude: ' + position.coords.longitude + '<br />' +
'Altitude: ' + position.coords.altitude + '<br />' +
'Accuracy: ' + position.coords.accuracy + '<br />' +
'Alt Accuracy: ' + position.coords.altitudeAccuracy + '<br />' +
'Heading: ' + position.coords.heading + '<br />' +
'Speed: ' + position.coords.speed + '<br />' +
'Timestamp: ' + position.timestamp + '<br />';
}
function onGeoError(error) {
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header">
<h1>jQuery Mobile</h1>
</div>
<div data-role="content">
<div id="geolocation">Finding geolocation...</div><p>
<ul id="listOfItems" data-role="listview" data-inset="true"
data-filter="true">
<li><a href="">One</a></li>
<li><a href="">Two</a></li>
<li><a href="">Three</a></li>
</ul>
</div>
<div data-role="footer">
<h4>www.jboss.org/developer</h4>
</div>
</div>
</body>
</html>
Now it works on cordova sim, but when i export it as apk and run it on android simulator or android phone, it does not load jquery.
When i look at the app in chrome remote debugger, i get the below console output.
Failed to load resource: the server responded with a status of 404 (Not Found)
http://code.jquery.com/jquery-1.11.2.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js Failed to load resource: the server responded with a status of 404 (Not Found)
mobileapp.html:50 Uncaught ReferenceError: $ is not defined
mobileapp.html:44 Device Ready To Go
mobileapp.html:45 Asking for geo location
http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css Failed to load resource: the server responded with a status of 404 (Not Found)
I have tried to load cordova.js before everything else on the page but im not sure if i did it right. Also, here is how my exported android project looks. Please tell me if it is some config in android- manifest or cordova .. its driving me beans.
<?xml version="1.0" encoding="utf-8" standalone="no"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android" android:hardwareAccelerated="true" android:versionCode="1" android:versionName="1.0" package="com.nexisone">
<supports-screens android:anyDensity="true" android:largeScreens="true" android:normalScreens="true" android:resizeable="true" android:smallScreens="true" android:xlargeScreens="true"/>
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<application android:hardwareAccelerated="true" android:icon="@drawable/icon" android:label="@string/app_name" android:supportsRtl="true">
<activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="nexisone" android:theme="@android:style/Theme.Black.NoTitleBar" android:windowSoftInputMode="adjustResize">
<intent-filter android:label="@string/launcher_name">
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>
<uses-sdk android:minSdkVersion="14" android:targetSdkVersion="22"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
</manifest>
Let me know if you need more details.
1 answers
solution1
0 2015-10-28 09:14:08
Answer to your Problem and how you could solve it on your own
- Failed to load resource: the server responded with a status of 404
- So check the URL in Browser, which is fine
- So only your App cant reach the url
- It cant be the Content-Security-Policy, the error then would be violation of Content-Security-Policy
- So your Whitelist is not properly configured
- Check https://github.com/apache/cordova-plugin-whitelist for the right syntax
Or in short form: Add in config.xml
<access origin="http://code.jquery.com"/>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to compile cordova project from visual studio (Hybrid App) to android / ios apk
write/read to file in cordova hybrid android app
Hybrid Cordova app : no sound in local on Android
visual studio 2013 cordova hybrid app plugin: Location of apk file
Mbaas for hybrid app (with cordova)
hybrid android cordova ionic
IONIC Cordova app is giving android exported error
Cordova app-release-unsigned.apk not working
How to upload pdf file in hybrid mobile app using cordova and angularjs?
NATIVE_APP context are showing on a hybrid Android app which is using Cordova , when trying to automate using Appium
Related Tags