I recently developed a Hybrid app using HTML5, CSS3, JavaScript, and jQuery. The app functions perfectly until I deploy it to an Android device using PhoneGap. Despite the server content loading properly, none of the functions work, almost as if my .js files are being disregarded completely. Actions taken so far:
Confirmed that <access origin="*" /> is present in the config.xml file,
Confirmed that
<uses-permission android:name="android.permission.INTERNET" />Verified all <script> tags are enclosed within the <body> tags in each HTML file,
Ensured that index.html still contains the original PhoneGap index.js file with the initialization code for the app and that all <script> tags come after it,
Double-checked that index.html includes all the necessary <script> tags for the project.
Below you will find the index.html file post-PhoneGap integration for your examination:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' gap:; style-src 'self' 'unsafe-inline'; media-src *" />
<link rel="stylesheet" href="css/customFitStyling.css" type="text/css">
<link rel="stylesheet" href="css/w3c_v4.css" type="text/css">
<title>CustomFit</title>
</head>
<body>
<!--CONTENT-->
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/customFitFunctions.js"></script>
<script type="text/javascript" src="js/setFalseBool.js"></script>
</body>
</html>