1

I have a Hybrid app I built with HTML5, CSS3, JavaScript and some jQuery. I am also using FireBase to store data. Everything works good, until I PhoneGap my application to device (Android). It loads server content, so I know the internet is not a problem. The HTML and CSS work fine. But none of the functions work, like my .js files are being ignored. Steps taken so far:

Ensured <access origin="*" /> is included in the config.xml file,

Ensured <uses-permission android:name="android.permission.INTERNET" /> is included in the AndroidManifest.xml file,

Ensured all <script> tags are included in the <body> tags of each HTML file,

Ensured index.html retains the original PhoneGap index.js file with the app init code in it and that all my <script> tags are loaded after that,

Ensured index.html contains all the <script> tags for the project.

Below is the PhoneGapped index.html file for your inspection:

<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>
Brian
  • 287
  • 4
  • 16
  • Why is your CSP meta tag left open? – ghybs Nov 20 '17 at 16:59
  • Have you already tried to remove the ./ (point and lash) of your relative-script-urls as you have done with your css-tags? This [answer](https://stackoverflow.com/a/25043877/2401386) might help you as well. – Blauharley Nov 20 '17 at 17:22
  • @ghybs that was just a mistake in the copy and paste from my source code. – Brian Nov 20 '17 at 17:50
  • @Blauharley thanks, that was part of a possible solution I was trying, it seems to make no difference either way. – Brian Nov 20 '17 at 17:50

2 Answers2

0

Comment this.

<!--<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' gap:; style-src 'self' 'unsafe-inline'; media-src *" />-->
Chathura Edirisinghe
  • 367
  • 1
  • 14
0

I don't know if anyone is interested in this, but I finally figured out he problem. I have this piece of code at the top of my functions file:

// Set latest workout.
var title = JSON.parse(localStorage.workout);
$("#latest").text("Latest: " + title.title);

It works absolutely fine on browser and even on phone, it does what its supposed to. But every function coming after that breaks. If I console.log() the localStorage.workout variable, it logs an object containing three arrays, as I expected. If I replace the JSON.parse with this object, the code works the same and all the functions start working again. Does anyone know what's going on?

Brian
  • 287
  • 4
  • 16