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.
Related
I'm working on my first Cordova app to use AngularJS and I'm a bit lost as to how to coalesce the starting JS for a Cordova project.
I presently have the default index.js file that is included with Cordova that I've modified to include some events based on when the device goes on or offline. It creates an object (app) and adds functions for initialize, bindEvents, and onDeviceready.
Where should I define the AngularJS application? After the app.initialize() function call at the bottom of the document? Or can I ditch the original Cordova structure for the JS file entirely and do something else for the onDeviceReady?
Thank you!
Basically you can define angular anywhere, I recommend a separate file.
The thing you have to worry about is angular being loaded first before cordova.
Below is an example how to overcome this using a service.
.service('cordovaReady', function($q){
var cordovaDefer = $q.defer();
//Note: if you want browser support you'll need to detect
//what platform you're running because deviceready event won't be called
//unless cordova is running.
document.addEventListener("deviceready", cordovaDefer.resolve, false);
return function(){
return cordovaDefer.promise;
};
});
And using it every time you use a cordova plugin in your app like so:
//$cordovaFacebook is just an example
.controller('someCtrl', function(cordovaReady, $cordovaFacebook){
cordovaReady()
.then(function(){
//Plugins available here
$cordovaFacebook.api('/me').then(...);
});
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.
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.
I am trying to work with Meteor. Now I have the entire setup running in my localmachine with apache2 and the meteor.js also works when browsing the same URL from Android Emulator's Browser . Now the main problem is that I need the functionality in my android app from a local URL and here the page is not able to load the remote js. I am loading the following html using WebViews loadURL method after setting the javascript as enabled .The js embedded in the html will be something like this
<script type="text/javascript" src="http://meteor.mywebserver.com/meteor.js"></script>
<script type="text/javascript">
window.onload = function()
{
Meteor.host = "meteor.mywebserver.com";
alert(textStatus);
// Call the test() function when data arrives
Meteor.registerEventCallback("process", commentsUpdate);
// Join the demo channel and get last five events, then stream
Meteor.joinChannel("demo", 0);
Meteor.mode = 'longpoll';
// Start streaming!
Meteor.connect();
// Handle incoming events
function commentsUpdate(data)
{
alert(data);
};});
After searching around a lot I tried this stackoverflow answer
To no avail . Can anybody help me find a work around here , I cant use a local meteor.js as it wont work.
Thanks
This has since been addressed in Meteor by way of integrated Cordova, which you can read about here. Basically, you tell Meteor that you want to add the Android platform to your app, and it builds the Android project files for you. Your app will look as if it's running native, but it's really just running in a light app surrounding a "web view". In iOS this is done using WebKit, but I think in Android it depends on the version of the OS.
You will still need to deploy your app to the Play store, which requires signing the app and all.