Installing and using Cordova plugin in Visual Studio

Question

I have a cross platform app built using OnsenUI, Monaca and Cordova and Im using Visual Studio as my IDE.

I have Monaca configured in Visual Studio using THIS guide and it is working 100%.

I need my app to run in the background even when the app is closed etc. and for this I have installed THIS plugin via Visual Studio to achieve the task.

Ti install the plugin, in Visual Studio I select the config.xml file of my project then choose -> Plugins -> Custom -> Git and enter the URL of the plugin as above. Visual Studio install the plugin and I get a success message. I check the folder structure of my project and in the plugins folder I see the installed plugin.

I have installed other plugins in a similar fashion before eg Camera and it has worked as intended.

I then try to use the plugins functions as per the usage guide HERE but I keep getting the error "Uncaught TypeError: Cannot read property 'backgroundMode' of undefined"

I have also tried to call the function as below as per some suggestions but I still get the same error.

window.cordova.plugins.backgroundMode.setDefaults({ text: 'Doing heavy tasks.' });

I try calling the function in a controller as below (abbreviated sample)

var mainNavigation = angular.module("mainNavigationController", []);
mainNavigation.controller("MainNavigationController", function ($scope, NetworkConnection) {
    var init = function () {
        document.addEventListener("deviceready", onDeviceReady, false);
    };

    init();

    function onDeviceReady() {
        cordova.plugins.backgroundMode.setDefaults({ text: 'Doing heavy tasks.' }); // Not working
        window.cordova.plugins.backgroundMode.setDefaults({ text: 'Doing heavy tasks.' }); // Not working either
    };
});

I have also tried adding the sample code to my projects loader.js file as below (abbreviated version), but again I get the same error.

// This is an auto-generated code by Monaca JS/CSS Components. Please do not edit by hand.
/*** <Start:monaca-cordova-loader> ***/
/*** <Start:monaca-cordova-loader LoadJs:"components/monaca-cordova-loader/cordova-loader.js"> ***/
(function(){
  function getDeviceObjectForPreview() {
    // Code omitted
  }

/*** <Start:monaca-core-utils> ***/
/*** <Start:monaca-core-utils LoadJs:"components/monaca-core-utils/monaca-core-utils.js"> ***/
/*** Monaca Core Utility Library. This library requires cordova.js ***/
window.monaca = window.monaca || {};
(function() {
    // Code omitted

    monaca.isDeviceReady = monaca.isDeviceReady || false;
    document.addEventListener('deviceready', function(){
        window.monaca.isDeviceReady = true;
        monaca.apiQueue.next();

        cordova.plugins.backgroundMode.setDefaults({ text: 'Doing heavy tasks.' }); // Not working
    }, false);
}

I have not imported any files in my index.html file eg

<script src="js/canvasDraw/signatureCapture.js"></script>

Why am I getting the undefined error? I have checked and cordova.js is loaded from loader.js as well.

Answer 1

Be sure that you use device emulator but not just browser-based emulator like Ripple-Nexus.

In browser plugins will not work correctly. This mode is good just for debugging your JS application and some common API.

In documentation of Ripple Simulator you can find:

Caution: Ripple doesn't provide a complete simulation of Cordova APIs or native device capabilities (plugins). It also doesn't simulate specific browser versions for a particular platform. You can achieve this by testing on actual devices or emulators.