Am trying to build a Hellow World phone gap app using phonegap 3.1.
I did the following to generate my app
phonegap create WinREOCRM --id "com.winreocrm" --name "WinREOCRM"
phonegap local build android
phonegap local run android
Then i went to to my chrome open assets/www folder i can see the loading and finally device ready screen. Then i added some plugins network plugin, camera plugin, file upload plugin. Then i again visited assets/www folder using my chrome browser. Its only show the device is connecting screen, never get device connected screen. I got these messages in my console
device ready has not fired after 5 seconds phonegap.js:1095
Channel not fired: onCordovaConnectionReady
Here is my device ready function in index.js
initialize: function() {
this.bindEvents();
},
// Bind Event Listeners
//
// Bind any events that are required on startup. Common events are:
// 'load', 'deviceready', 'offline', and 'online'.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
// deviceready Event Handler
//
// The scope of 'this' is the event. In order to call the 'receivedEvent'
// function, we must explicity call 'app.receivedEvent(...);'
onDeviceReady: function() {
app.receivedEvent('deviceready');
},
I tried this so many times, i don't know how to solve this issue. I think the problem arise when i add plugin. Please help me to find the the solutions. Your help is much appreciated. Thanks in advance
You can try opening your cordova.js/phonegap.js maybe you just use other platform like mine
I mistakenly use ios platform on an android project.
// Platform: ios
// 2.9.1
/*
Related
I have a Cordova plugin that successfully launches one MobileFirst app from another, and in the launched application, receives data from the launching app successfully. (Very similar to this LaunchMyApp Custom-URL-Scheme PhoneGap plugin https://build.phonegap.com/plugins/844.)
However, if my launched application is already running, and go back to the launching app and launch the app a second time, I can't figure out which javascript event to listen to to receive this updated Intent and context.
If I manually call to my Landing Context function from inside the Launched application, I do actually see my updated Intent and Data that was passed from the secondary launch.
Any ideas which MobileFirst event, or method I can listen to to detect this application's updated launch Intent?
I found it, it's the phonegap "resume" event.
Code like this works to fire my cordova plugin to retrieve the "record launch context".
document.addEventListener("deviceready", lang.hitch(this, this.checkLandIntent), false);
document.addEventListener("resume", lang.hitch(this, this.checkLandIntent), false);
checkLandIntent: function() {
cordova.exec(null, null, "LaunchApp", 'land', []);
}
I have been having various issues with the device ready event, from the deviceready has not fired after 5 seconds error to not having the plugins work.
From what I understand from my research, the following is required (please correct me if i'm wrong):
angular must be loaded before the deviceready event or it wont pick it up
cordova.js must be loaded in less than 5 seconds
So my question is - how do I get cordova.js loaded as quick as possible while making it wait for angular to be ready for the deviceready event?
I use manual bootstrapping to get it work (perfectly)
function bootstrapAngular() {
var domElement = document.querySelector('html');
angular.bootstrap(domElement, ['appName']);
}
if (document.URL.indexOf('http://') === -1 && document.URL.indexOf('https://') === -1) {
// URL: Running in Cordova/PhoneGap
document.addEventListener("deviceready", bootstrapAngular, false);
the if because my app is accessible form browser (either "http://" or "https://") and cordova("file://").
Load cordova.js after loading angular, and error 'deviceready not fired after 5 seconds' you will face only on desktop browser, instead when you will try on actual device or emulator, the event will fire.
You can use Corvoda Mocks to simulate the device's state on Chrome for testing your app.
You need to load AngularJs before Cordova.
If you want, here's a working seed:
https://github.com/marioaleogolsat/cordova-angular-angularMaterial-seed
Just remember that some plugins can't be used in a emulation, so use cordova run --device to make sure that anything is working properly.
In a phonegap app, device is defined if running through PhoneGap Desktop. However, if it is built online through build.phonegap, then it is not defined.
In build.phonegap, under plugins, it shows that the core plugins defined in the config.xml file (e.g., ) are all there. But any line that tries to access device gets a "device is not defined" error, whereas this error doesn't happen when using PhoneGap Desktop.
For PhoneGap Desktop, I found that the secret is to add a script reference to cordova.js. But this doesn't work for build.phonegap, apparently. I tried also adding a similar reference to phonegap.js, but with no results.
PS: One other piece of information. To debug further, I tried wrapping the code using device in an "if" block checking if the device is ready. So, on PhoneGap Desktop, the deviceready event fired, but on build.phonegap, it's never ready.
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
app.readyNow = true;
app.receivedEvent('deviceready');
},
...
if(app.readyNow) {
//Code to use device object. Fires with PhoneGap Desktop, not in PhoneGap Build
}
I figured out the answer by comparing a Hello World application auto-generated by PhoneGap Desktop and one that was just slightly different but had the problem. So the answer is to put the script reference to cordova.js in the body, underneath the HTML, rather than in the head, and make sure that there is no reference to phonegap.js. (If there is a phonegap.js, it will complain about NPObject, whereas if cordova.js is in the head section, the device will never be ready.) This solved my problem.
Its working in my current 3.7.1 version, but when I upgraded to 4.x, the back button is not working, to reproduce (working with non http source) :
cordova create test
cd test, change the index.js :
onDeviceReady: function() {
app.receivedEvent('deviceready');
document.addEventListener("backbutton", function() {
alert('back');
});
},
cordova platform add android
cordova build android
but if the config.xml was changed for example :
and rebuild again,the back button is not alerting, what I try to resolve :
#index.html add
Try inspect device using chrome and there's no error, and device ready event is fired
Anybody can help ?
Thanks
#polymerAngular,
I've got some demo Apps, that are exclusively for testing Phonegap Events. You can test all in pairs or singularly. The Backbutton works with 3.5.0.
All Events: https://github.com/jessemonroy650/Phonegap-Events-test
Backbutton: https://github.com/jessemonroy650/Phonegap-PhysicalButton-test
2nd response for #polymerAngular
Apparently Phonegap Build does NOT support 4.x from Cordova. I have asked Phonegap Support for verification and clarification on this forum post at nitboi
Need verification and clarification on phone-gap-version
http://community.phonegap.com/nitobi/topics/need-verification-and-clarification-on-phone-gap-version?rfm=1
I will update after they respond.
TIA
Jesse
I've built a SPA using Durandal and it all works fine in a browser. What I'm trying to do now is wrap it up with Phonegap (ideally using Phonegap Build) and deploy it as an Android app.
The Durandal documentation on the subject (http://durandaljs.com/documentation/Native-Apps-With-PhoneGap-Cordova/) is pretty sparse. It's key points of optimizing the app to generate a main-built.js file were done as were gathering the js/css assets into one place.
However, it doesn't mention anything about Phonegap/Cordova having a device ready event rather than a document ready one. I've packaged the app according to instructions. It installs alright on my Android device but gets stuck on the splash screen. Other questions have asked about being stuck on the splash screen, but the solutions posted there don't help. I can't help but think something fundamental is missing here?!?
Do I need to have Phonegap specific code in index.html? In any javascript?
Note: I'm using Durandal 1.2 but the same questions apply for v2.0.
You can hook into the Phonegap device ready event in main.js, you can then be sure the device is ready before the shell or any view activate events are fired. This example checks the agent so it will still fire up in a browser. This is from my example Durandal 2 / Phonegap Build project.
https://github.com/BenSinnott/LandmarkTracker
define(['durandal/app', 'durandal/viewLocator', 'durandal/system'], boot);
function boot(app, viewLocator, system) {
var useragent = navigator.userAgent.toLowerCase();
if (useragent.match(/android/) || useragent.match(/iphone/) || useragent.match(/ipad/) || useragent.match('ios') || useragent.match('Windows Phone') || useragent.match('iemobile')) {
document.addEventListener('deviceready', onDeviceReady, false);
}
else {
onDeviceReady();
}
function onDeviceReady() {
app.title = 'Landmark Tracker';
app.configurePlugins({
router: true
});
app.start().then(function () {
viewLocator.useConvention();
app.setRoot('viewmodels/shell', 'entrance');
});
}
}
However, it doesn't mention anything about Phonegap/Cordova having a device ready event rather than a document ready one.
jQuery can listen for document ready via $(document).ready but HTML/javascript itself doesn't have a document ready event. The closest pure javascript equivalent is listening for the DOMContentLoaded event. Phonegap/Cordova offers the device ready event as documented here. Be sure to include <script type="text/javascript" charset="utf-8" src="cordova.js"></script> in your <head></head> tags.
It installs alright on my Android device but gets stuck on the splash screen.
Take a look at your config.xml. Do you have <preference name="splash-screen-duration" value="xxxx"/> where xxxx is set to some crazy high number?
You could always call navigator.splashscreen.hide() after device ready fires but you will need to build in the deviceready listiner. Easy to do using the documentation I provided above. If that doesnt fix it, then we will need to take a look at some of your code to dig into what is going on.
First of all try an unminified Version. Means copy all the folders into your assets folder. Then look at logcat. Most likely u had a js error. If that works try the minified version and check if that one throws errors via logcat
Edit: sry this applies of course only for manual build in android not for the online service. For IOS as far as i remember you get the errors thrown in the output window.