Cordova Plugins

PreviousJS/JSS Components NextCustom Cordova Plugins

Last updated 2 years ago

Was this helpful?

Cordova Plugins

Usually, you need native code (Java for Android, Objective-C for iOS, etc) to access native device functions such as camera, file system, storage, etc. However, you can access these native functions using JavaScript with Cordova.

Cordova is a set of device APIs that allow a mobile app developer to access native device functions such as the camera or accelerometer from JavaScript. Therefore, Monaca uses Cordova to enable hybrid apps to access native device functions from JavaScript.

For more information about Cordova, please refer to .

Loading Cordova

You can’t use device APIs (Cordova plugins) before Cordova is fully loaded. The deviceready event fires once Cordova has fully loaded. Once the event fires, you can safely make calls to Cordova APIs. Applications typically attach an event listener with document.addEventListener once the HTML document’s DOM has loaded.

As an example, let’s start up the camera function by using Camera APIs. Please copy and paste the code below to your project in Monaca Cloud IDE. Then you can run it on .

This code was written for Cordova 7.1. We apologize in advance in case the code may behave differently on different devices.

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
  <script>
    document.addEventListener ("deviceready", onDeviceReady, false);

    //these functions runs when Cordova is ready
    function onDeviceReady () {
      alert ('Cordova is ready!');
    }

    function snapPicture () {
      navigator.camera.getPicture (successCallback, FailCallback, {destinationType: Camera.DestinationType.DATA_URL});

      //Success Callback
      function successCallback (imageData) {
        //Display image
        var image = document.getElementById ('picture');
        image.src = "data:image/jpeg;base64, " + imageData;
      }

      //Error CallBack
      function FailCallback (message) {
        alert ('Error!!!: ' + message);
      }
    }
  </script>
</head>
<body>
  <h1>Camera Sample</h1>
  <input type="button" onclick="snapPicture()" value="Snap" ><br><br>
  <img id="picture" src="" width="150" height="150">
</body>
</html>

Upgrading the Cordova version

The Cordova version in Monaca cannot be downgraded.

When upgrading a Cordova version, a backup of the project is automatically created before the conversion.

When creating a new project, the latest Cordova version available in Monaca will be automatically applied.

In order to upgrade the Cordova version of your project, please do as following:

From Monaca Cloud IDE, go to Configure → Cordova Plugin Settings.
Click the Upgrade link.

Built-in Cordova plugins in Monaca

Directly from Cordova Plugins page in Monaca Cloud IDE, you can easily enable Cordova plugins.

Importing Cordova plugins

To import a Cordova plugin into your project, please do as follows:

From the Monaca Cloud IDE, go to Configure → Cordova plugin Settings.

3. Once a plugin is enabled/imported, you might want to configure it. Mouseover a plugin you want to configure and click Configure to open the plugin’s settings dialog where you can change the plugin’s version and set the plugin’s parameters.

PreviousJS/JSS Components NextCustom Cordova Plugins

Last updated 2 years ago

Was this helpful?