How to get started using Phonegap Build with a Durandal SPA App?

Question

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.

Ben Ben · Accepted Answer · 2014-01-30T10:33:37

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');
        });
    }
}

How to get started using Phonegap Build with a Durandal SPA App?

3 Answers