Deviceready has not fired after 5 seconds with crosswalk

zaher · March 22, 2015, 6:20pm

Hey,
Am not sure what is the issue here, but no a days the log just showing this message and cause many of the plugins not to work.

1- My Ionic Info :

OS: Mac OS X Yosemite
Node Version: v0.12.0
Cordova CLI: 4.3.0
Ionic CLI Version: 1.3.16
Xcode version: Xcode 6.1.1 Build version 6A2008a
ios-sim version: 3.0.0

2- Plugin Used :

com.ionic.keyboard 1.0.3 “Keyboard”
com.phonegap.plugins.PushPlugin 2.4.0 “PushPlugin”
nl.x-services.plugins.socialsharing 4.3.15 “SocialSharing”
org.apache.cordova.device 0.3.0 “Device”
org.apache.cordova.dialogs 0.3.0 “Notification”
org.apache.cordova.globalization 0.3.4 “Globalization”
org.apache.cordova.inappbrowser 0.6.0 “InAppBrowser”
org.apache.cordova.network-information 0.2.15 “Network Information”
org.apache.cordova.splashscreen 1.0.0 “Splashscreen”
org.apache.cordova.vibration 0.3.13 “Vibration”
org.crosswalk.engine 0.0.1-dev “Crosswalk Engine”
org.pushandplay.cordova.apprate 1.1.7 “AppRate”

3- CrossWalk Version :

“browsers”: [
{
“platform”: “android”,
“browser”: “crosswalk”,
“version”: “11.40.277.7”
}
]

4- More Details :
My app used to work normally, but suddenly I got this message and most of the plugins stopped to work, so I tried to delete Crosswalk and reinstall it, and I got the same results nothing change, then I tried to create an empty project with only crosswalk installed and test it to see what is the issue, but everything worked, and the way for me to test it is to do a small alert inside the ionicPlatform.ready function like this:

.run(function($ionicPlatform, $cordovaNetwork, $ionicHistory) {    

  $ionicPlatform.ready(function()
  {
    alert('am ready');
    if(window.cordova && window.cordova.plugins.Keyboard)
    {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }

    if(window.StatusBar)
    {
      StatusBar.styleDefault();
      StatusBar.hide();
    }

  });
})

now, when I got this I thought to myself it might be something in my code or something in the app module or so, but the results was not as I though it will the only things I did was the following :
1- didnt change any of my app module load and kept it like this

angular.module(‘app’, [‘ionic’,‘ngStorage’,‘ngCordova’,‘ngSanitize’, ‘ImgCache’])

2- I only changed the .run to be like the latter .
3- and commented all the .config section.

@mhartington am not sure if this is helpful enough but this is what I have been struggling for the past four days .

mhartington · March 22, 2015, 8:11pm

Hmm, it may be a combination of plugins, crosswalk, and cordova-android 4 all together.

Let’s try removing all the plugins together and see if that has any effect. If everything works fine from there, add the default cordova plugins back (org.apache.cordova.*) and check the results.

zaher · March 22, 2015, 8:15pm

I did tried that, I even installed all the plugins in the empty/new project and everything works fine.
plus when I only removed the config/modified some of the .run code everything back to work again and I got the alert .

mhartington · March 23, 2015, 6:50pm

Could you please post the entire .run and .config code blocks?

zaher · March 23, 2015, 7:10pm

Ok, and even better if you have bitbuket account I can give you access to the repo

    .run(function($ionicPlatform, $cordovaNetwork, $cordovaDialogs, $ionicHistory, $cordovaGoogleAnalytics, $cordovaAppRate, ImgCache) {
  
  $ionicPlatform.registerBackButtonAction(function (event) {
    if($ionicHistory.currentStateName() == "latest-photos"){
      window.close();
      ionic.Platform.exitApp();
    }else {
      // navigator.app.backHistory();
      $ionicHistory.goBack();
    }
  }, 100);

  $ionicPlatform.ready(function() {
    alert('am ready');
     ImgCache.$init();
    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
      StatusBar.hide();
    }

    if( ionic.Platform.isAndroid() ){
      $cordovaGoogleAnalytics.startTrackerWithId("xxx");


      $cordovaAppRate.promptForRating(false); 

      // AppRate.preferences.storeAppURL.android = appRate.storeURL;
      // AppRate.preferences.customLocale = customLocale;
      // AppRate.preferences.displayAppName = appRate.displayAppName;
      // AppRate.preferences.usesUntilPrompt = appRate.usesUntilPrompt;
      // AppRate.preferences.promptAgainForEachNewVersion = appRate.promptAgainForEachNewVersion;
      // AppRate.promptForRating();      

      if($cordovaNetwork.isOffline()){
          $cordovaDialogs.alert('No Internet Connection', 'ERROR', 'Close')
          .then(function() {
            ionic.Platform.exitApp();
            $scope.$broadcast('scroll.infiniteScrollComplete');  
          });
      };

    };

  });
})

and the config is

.config(function($stateProvider, $urlRouterProvider, $ionicConfigProvider, $cordovaAppRateProvider, ImgCacheProvider ) {

  // , $cordovaInAppBrowserProvider
  // var defaultOptions = {
  //   location: 'no',
  //   clearcache: 'yes',
  //   toolbar: 'no'
  // };
  
  //$cordovaInAppBrowserProvider.setDefaultOptions(options)
  ImgCacheProvider.setOptions({
        debug: true,
        usePersistentCache: true
  });
  ImgCacheProvider.manualInit = true;

  //disable all the cache
  $ionicConfigProvider.views.maxCache(0);
  $ionicConfigProvider.views.transition('none');
  $ionicConfigProvider.navBar.alignTitle('center');

  ionic.Platform.ready(function() {
    // document.addEventListener(function () {
    //   $cordovaInAppBrowserProvider.setDefaultOptions(defaultOptions)
    // }, false);

    if(ionic.Platform.isAndroid())
    {
      $cordovaAppRateProvider.setAppUrl('android',appRate.storeURL);
      $cordovaAppRateProvider.customLocale(customLocale);
      $cordovaAppRateProvider.displayAppName(appRate.displayAppName);
      $cordovaAppRateProvider.usesUntilPrompt(appRate.usesUntilPrompt);
      $cordovaAppRateProvider.promptAgainForEachNewVersion(appRate.promptAgainForEachNewVersion);
    }
  });

  // Learn more here: https://github.com/angular-ui/ui-router
  $stateProvider

    .state('latest-photos', {
      url: '/latest',
      templateUrl: 'templates/latest-photos.html',
      controller: 'latestCtrl'
    })
  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/latest');

});

mhartington · March 23, 2015, 7:35pm

I’m mikehartington on bitbucket

zaher · March 23, 2015, 8:20pm

done, I just added you to the repo, and I know my code is not that good but am still learning

thank you very much for your help.

zaher · April 3, 2015, 7:07am

am not sure how to close this topic, as sadly this issue is not solved and not sure if it will be ever …

maybe the new update for ionic when it reach v1.0 will solve it, mean while I will have to accept the fact that we dont know what is the issue .

thanks @mhartington for your help, really appreciated.

mattezell · April 7, 2015, 1:53pm

Seems a pretty wide spread issue for anyone currently attempting to use Ionic CLI + Crosswalk… I’ve seen that there’s a bug open on this ( https://github.com/driftyco/ionic-cli/issues/259 ) , but no activity in 4 days… I will keep researching and post back in the unlikely event that I actually figure something out

zaher · April 7, 2015, 3:41pm

@mattezell thanks …
I guess I had enough with hyper apps and I will switch to native whenever I got the time to do so.

thanks again, really appreciated

tobika · April 7, 2015, 4:04pm

just to be sure, this problem only occurs when you start ionic with livereload correct?

I have the same issue. For developing and testing I just remove crosswalk and for deployment on the stores I add it again and test without livereload that everything still works fine.

zaher · April 7, 2015, 4:26pm

@tobika am not sure if thats only happened with the livereload only or not

need to test though …

thanks

mattezell · April 7, 2015, 4:59pm

Yes, this is true in my case, @tobika - it only happens when using livereload with Crosswalk…

Unfortunately, I don’t feel “remove for livereload testing” is really a viable approach in my situation, as the Crosswalk engine (11.40, 12.41 and 13.41 tested) renders many things differently than the out of the box 4.4.4 version of webkit - and so if I develop against non-Crosswalk and get things where I want them, things are very broken or not as desired when I do the crosswalk build.

Still hunting a solution or workaround…

tobika · April 7, 2015, 6:09pm

I understand, unfortunately there is no real solution yet

to facilitate things, I often have little fallbacks in case there are no cordova plugins so that my app still works with reduced functionality
This allows me to test everything that doesn’t depend on plugins like UI/CSS on crosswalk with livereload
Of course if your main functionality needs cordova plugins this is not an option

kerpanic · April 29, 2015, 8:56am

Not having this issue, but I’m using crosswalk 12.41.296.5 which is installed by default (stable release) using

ionic browser add crosswalk

Maybe you wanna try updating your crosswalk version.

tobika · May 20, 2015, 12:40pm

I guess you are right. With all the latest updates and 12.41 crosswalk things are looking good

did · September 1, 2015, 3:13pm

hey guys, I noticed the same problem using livereload feature (without livereload everything is fine)

finally I solved it
-> the solution is to modify the config.xml:

<allow-intent href="*" />
<allow-navigation href="*" />

this is my configuration:

crosswalk: 14.43.343.17

plugins:
‘cordova-plugin-crosswalk-webview@1.2.0’,
‘https://github.com/chariotsolutions/phonegap-nfc.git#0.6.2’,
‘phonegap-plugin-barcodescanner@4.0.2’,
‘cordova-plugin-device@1.0.1’,
‘cordova-plugin-splashscreen@2.1.0’,
‘cordova-plugin-camera@1.2.0’,
‘cordova-plugin-file@3.0.0’,
‘cordova-plugin-file-transfer@1.2.1’,
‘cordova-plugin-network-information@1.0.1’,
‘cordova-plugin-inappbrowser@1.0.1’,
‘cordova-plugin-statusbar@1.0.1’,
‘https://github.com/triceam/LowLatencyAudio’

I used the default config.xml generated by the cordova cli (5.2.0), which has this content:

<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-intent href="market:*" />

after replacing this by:

<allow-intent href="*" />
<allow-navigation href="*" />

and in my index.html:

<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

solved my livereload problem immediately

wargun02 · May 15, 2016, 12:39pm

Strangely, I have to take away just the <allow-intent href="" /> and meta Content-Security-Policy tag for the error to go away when emulating on iOS. <allow-navigation href="" /> is retained.

But when it comes to android, having meta Content-Security-Policy for it to work is a must.

This is truly a very strange behaviour.