deviceready not firing in Cordova app on iOS

Question

I have index.html where I have deviceready event listener added to script tag. But it is not triggered on loading the HTML. Instead, when clicking the home button it is triggered from onAppDidEnterBackground method in CDVViewController.

I wanted to call my custom plugin to get the values which I am trying to populate in the HTML loaded. I found few solutions asking to change the meta tag. I did try changing, but no use. It is not working in iOS9 also. I guess the meta tag issue is from iOS10. I am not sure what I am missing here.

Cordova v4.4.0

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: http://* 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
<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">
    <title>My HTML Document</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
  <script type="text/javascript" src='cordova.js'></script>
    <script type="text/javascript" src='CustomPlugin.js'></script>
        <script>
        document.addEventListener('deviceready', function () {
            window.plugins.CustomPlugin.myMethod(function (result) {
                document.getElementById('Name').value = result['Name'];
            }, function (error) {
                alert(error);
            });
        }, false);
    </script>
</head>
<body>
    <div class='article'>
            <div class='tableWrapper'>
                <table>
                <tr>
                    <td class='right'>CName:</td>
                    <td colspan='3'><input type='text' id='Name'/></td>
                </tr>
                </table>
            </div>

    </div>

</body>
</html>

Try using an alert to test whether the event is firing or not. — evolutionxbox, Nov 02 '17 at 13:33

score 3 · Answer 1 · answered Aug 28 '18 at 19:58

If you're having the same problem I was, then this is related to your content-security-policy meta tag. I used the one below from this answer, and problem solved.

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

score 0 · Answer 2 · answered Nov 02 '17 at 14:29

0

Try to put your addEventListener into a function onLoad and call it with onload event in your body tag :

    function onLoad() {
    document.addEventListener("deviceready", onDeviceReady, false);
    }

    function onDeviceReady(){
           //the code you want to execute
    }

and

<body onload="onLoad()">

Because if you do it your way, you're trying to do the deviceready event before the cordova library had been loaded.

answered Nov 02 '17 at 14:29

Lucas Tambarin

395
3
14

Tried that as well. onLoad function is not called, but deviceready event is not triggered. :( – nOOb iOS Nov 02 '17 at 15:16
What if you put your script javascripts cordova.js at the last position, because it is before your customplugin.js, and when the onload event fire, cordova.js might be loaded but not your customplugin.js – Lucas Tambarin Nov 03 '17 at 07:14
I tried adding Cordova.js after customplugin.js. It doesn't work. – nOOb iOS Nov 03 '17 at 09:44
try to execute that command in your project directory "cordova platform remove ios" "cordova platform add ios" – Lucas Tambarin Nov 03 '17 at 13:40
If something is wrong, it shouldn't call deviceready event at all right? It is fired when it loses focus, like pressing home button, long press to open Siri etc., – nOOb iOS Nov 03 '17 at 15:19
I am breaking my head since two days now. Tried all possible solutions available in the internet. :( – nOOb iOS Nov 03 '17 at 15:20
have you tried with a simple example ? like just call ondeviceready and alert('hello world !'), in a new project And is your method working correctly ? – Lucas Tambarin Nov 03 '17 at 15:24
Its both native and Cordova based application. Some part of it is native and some part Cordova. I have problem only with this html file. Its working fine in other areas. – nOOb iOS Nov 03 '17 at 16:26
Now device ready event is fired.. But plugins doesn’t work.. Tried changing meta tag.. But no luck.. Any thoughts? – nOOb iOS Nov 06 '17 at 20:26
Maybe it's because your js file isn't loaded when your deviceready is fired, i would suggest you to use jquery and put your addeventlistener inside the $(document).ready(function(){ } that's what I used to do when i was doing some cordova and i never had problem – Lucas Tambarin Nov 07 '17 at 12:22
I used some of the answer from this topic when I started :) https://stackoverflow.com/questions/12576062/jquery-document-ready-vs-phonegap-deviceready – Lucas Tambarin Nov 07 '17 at 12:24

score 0 · Answer 3 · answered Nov 03 '17 at 06:36

Load all your script on the bottom of html body

<html lang="en">
<head>...</head>
<body>
  <div>Your content here</div>
  ...
  <script type="text/javascript" src='CustomPlugin.js'></script>
  <script type="text/javascript" src='cordova.js'></script>
  <script type="text/javascript" src='main.js'></script>
</body>
</html>

and create main.js file then put your code in there..

window.onload = function(){
    document.addEventListener("deviceready", firstInitCordova, true);
};

function firstInitCordova(){
    if(!window.cordova){
        // If cordova is not defined then call this function again after 2 second
        setTimeout(firstInitCordova, 2000);
        return;
    }

    //console.log(window.plugins);
    window.plugins.CustomPlugin.myMethod(function (result) {
        document.getElementById('Name').value = result['Name'];
    }, function (error) {
        alert(error);
    });
}

// If you're unsure then set a timer
setTimeout(function(){
    firstInitCordova();
}, 3000);

I tried your way as well. firstInitCordova calls only after going background and coming foreground. — nOOb iOS, Nov 03 '17 at 09:45

deviceready not firing in Cordova app on iOS

3 Answers3

Linked