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.
Related
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.
I used to add the https://github.com/katzer/cordova-plugin-local-notifications plugin in order to get local notification on my apps, but since the version 3.5.0 the plugin is not loaded anymore by cordova...
The plugin seems correctly added, since I can see it in the : cordova plugin list result
In the JS code I got
if(window.plugin && window.plugin.notification){
window.plugin.notification.local.add({ message: 'a msg' });
}
but window. plugin is undefined.
Am I missing something or something changed with the version 3.5.0?
The plugin will be available once the "Device is Ready". Listen the device ready event and then call you alert function.
https://github.com/jonbarlo/cordova-plugin-local-notifications#using-the-plugin
document.addEventListener('deviceready', function () {
// window.plugin.notification.local is now available
}, false);
There is a surprise here.
Whenever you enable a plugin, you have to download the debugger again, and install on the virtual machine / device for it to recognize the plugin.
The docs didn't say it. I've just discovered it today.
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
/*
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.
Cordova 2.0.0
The following API call doesn't work on Chrome browser, as expected;
navigator.app.exitApp();
I'm getting
TypeError: Cannot call method 'exitApp' of undefined
My code is simply including the cordova-2.2.0.js file. No further actions taken regarding PhoneGap.
On the mobile device this API call does work.
So I'm guessing there's an additional step I should take in order to abstract this sort of API functions??? Maybe some sort of "require" call?
Edit #1:
I think it wasn't clear enough: I was hoping that Cordova would abstract this sort of API so that even if not really available (i.e not under a real device but under Chrome instead), these calls would do nothing (especially exitApp).
In addition - I can see navigator object in Chrome inspection, which is of type CordovaNavigator.
Well, you're trying to use cordova native calls on chrome, wich of course won't run, cordova native calls are made to access native mobile features, wich Chrome doesnt emulate.
Also i recommend you to use always the lastest stable version, cordova is already on version 2.8
You can get the chrome addon ripple emulator to test cordova apps on it, still it doenst support some cordova features : http://emulate.phonegap.com
This answer relies on the ripple emulator though you probably wanted a more general solution.
Two things. First, ripple is new and improved but it still has this error. You can see this article: http://www.raymondcamden.com/index.cfm/2013/11/5/Ripple-is-Reborn and follow links to get the new ripple from github: https://git-wip-us.apache.org/repos/asf?p=incubator-ripple.git;a=blob_plain;f=README.md;hb=HEAD
Second, you can fix ripple to prevent that particular error, which still exists even though ripple is much improved for working with cordova 3.0. Here's what I did after all the install process:
1) find the ripple.js file; for me it was at C:\Documents and Settings\myusername\Application Data\npm\node_modules\ripple-emulator\pkg\hosted\ripple.js
2) Find this line "ripple.define('platform/cordova/2.0.0/bridge/app', function (ripple, exports, module) {" which was at line #32611 in my download.
3) After the comments following that line, add the exitApp() function with the existing show() function. I used this code:
module.exports = {
show: function (success) {
return success && success();
},
exitApp: function(){
if(console && console.log) {
console.log("Tried to exit app from within ripple.");
}
}
};
I get the feed back in the console that the app tried to exit. You could do something else that is useful to you. I think the new ripple is worth the work of installing it. From there, you can fix it yourself or even contribute a useful solution.
UPDATE: exitApp and overrideBackbutton have both been added to ripple (in same place in the code as mentioned above). See this link: Add App.exitApp and App.overrideBackbutton methods support
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script src="js/jquery.mobile-1.4.2.js"></script>
<script src="js/cordova.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackClickEvent, false);
}
function onBackClickEvent() {
if (navigator.app) {
navigator.app.exitApp();
} else if (navigator.device) {
navigator.device.exitApp();
}
}
</script>