Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cordova deviceready not firing in iOS until interacting with iOS

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>
like image 285
olivarra1 Avatar asked Jun 18 '15 14:06

olivarra1


1 Answers

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!

like image 127
olivarra1 Avatar answered Nov 20 '22 04:11

olivarra1