12

I had a really weird bug where deviceready event would not fire in an iOS device until the user interacted with the OS itself, this is, pressing the front button, show the notification center with drag down or go to device settings dragging up.

As soon as the user started dragging the iOS notification center, then deviceready fired.

Something as simple as this would just not work:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data:* gap:* tel:* 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'" />

  <title></title>

  <!-- cordova script (this will be a 404 during development) -->
  <script src="cordova.js"></script>
</head>

<body>
  <div id="log"></div>

  <script type="text/javascript">
    var log = document.getElementById("log");
    if(window.cordova){
        log.innerHTML = "with cordova";
        document.addEventListener("deviceready", function onDeviceReady(){
            log.innerHTML = "deviceready";
        }, false);
    }else{
        log.innerHTML = "with browser";
    }
  </script>
</body>
</html>
olivarra1
  • 3,269
  • 3
  • 23
  • 34

2 Answers2

29

The problem was really subtle. I spent about 4h debugging iOS why was cordova not firing until I saw i was just missing two //, right here:

  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data:* gap://* tel:* 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'" />

that small gapin Content-Security-Policy had to have two //in front for it to work. This solved my bug, I still don't understand why .-.

Hope this helps!

olivarra1
  • 3,269
  • 3
  • 23
  • 34
  • Wow! You saved my day.... Where did you found it! Can you get some more documentation about the same? – Malay Sarkar Nov 10 '16 at 11:12
  • 1
    @MalaySarkar No, I wasn't sure why. As to how I found that, with those 4h of debugging at the end I reduced my non-working app to what I have on the code above (question section) and tried to compare it to a new Cordova app, with some starter seed that had this Content-Security-Plolicy tag. As for additional documentation about this tag, here's a complete answer http://stackoverflow.com/questions/30280370/how-does-content-security-policy-work – olivarra1 Nov 10 '16 at 11:49
  • I was simply missing the complete `gap://*` part. All working now, thanks so much! – Barry Kooij Apr 21 '17 at 10:11
  • Still a solution that works as of August 2018 if anyone's wondering - saved my bacon, thanks a lot! – P110 Aug 18 '18 at 12:22
  • Only `gap:` did it for me. But i realized only `data-src *` even doesn't work. – smonkey Mar 15 '19 at 16:08
0

I had same issue on iOS. Finally any of these two workarounds worked for

  1. Add <meta http-equiv="Content-Security-Policy".......> to index.

  2. Downgrade platform to 4.0.0 (Cordova platform update iOS@4.0.0)

Performing the first option is preferable as downgrading to 4.0.0 is probably not preferable to you.

rayryeng
  • 102,964
  • 22
  • 184
  • 193
Shravan Hebbar
  • 199
  • 1
  • 7
  • The source of the issue is that you have to whitelist `gap://*` in your content security policy. Downgrading to 4.0.0 works because the whitelist is managed in another deprecated way. – olivarra1 Dec 27 '16 at 08:07
  • I am using Cordova 4.4.0 for iOS. I tried adding meta for content-security-policy and also removing it. It doesn't call during the load. Instead if I press home button, it fired. Same project, it works for other html. Only a particular html doesn't work. Please refer my question - [link] https://stackoverflow.com/questions/47076208/deviceready-not-firing-in-cordova-app-on-ios/ Any help much appreciated. – nOOb iOS Nov 06 '17 at 11:42