94

Cordova Plugins

A Plugin can be defined as a package of add-on code that is used to enable a Cordova web view to communicate with the native platform. It can offer a JavaScript interface to the native components. Furthermore, it is a reusable component that is in charge of defining connectivity among the native device and platform functionality of an app like a Camera, GPS, etc. All of the main features of the Cordova API are implemented through plugins. Several plugins are available that enable the features of Cordova like bar code scanners, GPS, etc.

For each of the supported platforms, plugins consist of a single JavaScript interface along with a native code library. This JavaScript interface can hide various native code implementations. We can also create our own plugins and can share their work with multiple nodes.

In the world of Cordova development, we can define plugins as one of the most powerful tools in the Apache framework. Moreover, it is responsible for implementing all the main Cordova API features. All the available plugins can be searched from the Cordova Plugin Search Page that enables features like bar code scanner, NFC communication, etc.

What does Cordova plugin consist?

A Cordova plugin provides a JavaScript interface to the native components. These plugins consist of various elements that are as follows:

• Common JavaScript Interface
• A manifest file, i.e., xml
• A native code

Basic Structure of Cordova Plugin

A basic structure of the Cordova plugin defines a hierarchy of the consisting directories from top to bottom level.

– Plugin top-level folder

— plugin.xml

— src/

— android/

<Java source code>

— ios/

<Objective-C source code>

— www/

<JavaScript interface>

-package.json— It is the same as a node package that stores metadata of an app like a packagename, version number, description, etc.

-README.md — A documentation of the npmjs website.

-libs

— android/

— <consisting of Android libraries>

— ios/

— <consisting iOS libraries>

-hooks

– This directory specifies the scripts that can be executed at various plugin/app life cycle events.

How do Cordova Plugins work?

A Cordova consists of a bridge present between JavaScript and native code. This bridge is responsible for enabling the users to write a native code via a common JavaScript interface.

Cordova bridge is also used for mapping all the specific methods exposed by the plugin JavaScript interface into the plugin’s native code. You can pass any parameter of a method between JavaScript and native methods.

Here, we have defined some functions that are used along with the passed arguments:

• function(winParam) {}: It is a success callback function that can be executed along with any passed arguments.
• function(error) {}: It is an error callback function that executes when an operation is not completed successfully.
• “action”: It refers to an action name that is being called on the native side.
• [/* arguments */]: It consists of an array of arguments that are being passed into the native code.
• “service”: It mainly defines a service name that is to be called on the native side.

Cordova plugin command

Syntax

Sub-command	Option	Explanation
add<plugin-spec>		It is used for adding the specified plugins.
	–searchpath<directory>	This directory searches the plugins by ID and each of its subdirectories before hitting the registry. There are multiple search paths that can be specified by this option. It represents ‘:‘ as a separator for *nix based systems and ‘;‘ for Windows.
	–noregistry	This option does not search the registry for the plugins.
	–link	It defines the symbolic link. It is beneficial for plugin development, and the range of the selected file linked varies by platform.
	–nosave	It does not save <plugin-spec> as a member of plugin element into config.xml or package.json.
	–force	This option is introduced in version 6.1. It forces you to copy the source files from the plugin. It also copies those files that already exist in the target directory.
remove	–nosave	It does not remove specified plugins from package.json or config.xml
list		It displays the list of all currently installed plugins.
save		It saves <plugin-spec> of all the currently added plugins to the project.

Plugin-spec

We can specify various plugins of cordova by following a general syntax that is listed below:

Syntax

<plugin-spec> : [@scope/]pluginID[@version]|directory|url[#commit-ish][:subdir]

Value	Description
scope	It defines the scope of a plugin like scoped npm package.
plugin	It shows the plugin id.
url	It generates the Url to a git repository that contains a plugin.xml file.
version	It defines Major.minor.patch version specifier by using the semver.
directory	It defines a directory path that contains a plugin.xml file.
commit-ish	It uses the Commit/tag/branch reference. If none is specified, then the “master” is being used.

Algorithm for resolving the plugins:

When we need to add any new plugin in our project, a command-line interface can resolve the plugins by following the below criteria.

• First, you have to pass the plugin-spec command in the command prompt.
• Then, plugin-spec is saved into the xml and package.json file of an app.
• After saving the file, we can publish the latest plugin version to npm that our current project supports. It applies to only those plugins that consist of their Cordova dependencies in json.
• Finally, the newest plugin version will be published to npm.

Conflicting plugins

Several conflicts may occur when using plugins for an app that are as follows:

• A conflict may arise when adding any new plugin that uses edit-config tags in their plugin.xml file. This tag is mainly used for adding or replacing the attributes of XML elements.
• If more than one plugins try to manipulate the same XML element, it reflects some issues with the application. When any conflict arises, it is being detected by implementing the conflict detection scheme. This scheme helps to prevent the plugins from being added, so one plugin does not attempt to overwrite another plugin’s edit-config

An error message may also occur if it finds any conflict in edit-config. This message restricts the plugins from being added to the platform. Before adding plugins into the platform, all the conflicts must be resolved. A possible option available to resolve the edit-config conflict is to make the changes to the affected plugin.xml so that the same XML element cannot be modified. We can also use an alternative method to use the –force flag to add the plugins forcibly. This method ignores conflict detection and overwrites all of the conflicts with another plugin, so it should be used with caution.

Installing Cordova Plugins

To install the Cordova plugins for our application, we must have to follow some manual steps that are as follows:

• First of all, make sure that we have the Cordova CLI installed in our system. If it is not installed, type the below command in a command prompt:

npm install -g cordova

• Create a new Cordova project in a separate directory.

cordova create cordova-app

• We can add the required platforms where our app runs. Before doing this, we must have to change our default directory to that position where we have installed our app. Type the below command:
  cd cordova-app
  Add the platforms:
  cordova platform add android
  cordova platform add ios
• Now, search the plugins that you require and install them by using the below commands:

cordova plugin search camera

     cordova plugin add com.cordova.plugin.camera

• Finally, build a Cordova app:
  cordova build android
  cordova build ios

Building Plugins

The developers use plugin add commands of CLI to add a new plugin to a project. We can pass the URL for a git repository as an argument to these commands. This argument contains the plugin code. For illustration, see the below command:

cordova plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-device.git

The above command implements the Cordova Device API by passing the URL of a git repository as an argument.

It should be noted that the plugin repository must feature a top-level plugin.xml manifest file. Several ways are available to configure the manifest file. You can check the available plugins in the official Plugin Specification page. The below code provides a basic example of the version of the Device plugin:

Let’s discuss the following code to understand it better. In the third line of code, we define an id attribute of plugin tag that mainly consists a same reverse domain format for determining the plugin package.

• In the above code, the js-module tag is used to determine the path to a common JavaScript interface.
• We have used a platform tag for specifying the corresponding set of native codes. Here, we have used the android
• config-file tag is also used to encapsulate a feature tag, which will be injected into the platform-specific xml file.
• Here, we have also used header-file and source-file tags that mainly define the path to the component files of the library.

Validate Plugins using Plugman:

We can define Plugman as a command-line tool that is used to install and uninstall the plugins. A plugman tool ensures that whether the plugins are properly installed for each platform or not.

npm install –g plugman

The above command is used to install a plugman on the system.

We also require a valid app source directory. Thenceforth run a specific command to ensure that iOS dependencies have been loaded properly.

plugman install –platform ios –project /path/to/my/project/www –plugin /path/to/my/plugin

Publishing Plugins

If you want to publish your plugin to any npmjs-based registry, first, you should have an installed plugman CLI on your system. In the above section, we have specified a command for installing the plugman CLI. You can refer to it if it is not installed on your system.

Then, create a package.json file for your plugin. This file is the same as a node package that stores the metadata of an app like the packagename, version number, description, etc.

$ plugman createpackagejson /path-of-the-plugin

If you don’t have an account of npm, you must need to create an account before publishing a plugin. Finally, publish your plugin by typing the below command:

$ npm publish /path-of-the-plugin

Plugin APIs

There are different sets of Cordova Plugins available for your application. Some of them are as follows:

• camera: This plugin is used to provide an interface to enable the device camera. It can also select the images from the device storage.
• contacts: It allows access to the device contacts.
• device: It provides an interface to retrieve the information about the hardware and software.
• file: It enables read/write access to the device files.
• file-opener2: It opens a particular file on your system with its default application.
• file-transfer: It is used to upload and download the files to/from the device.
• geolocation: It is used to access the GPS data and shows the current location of the device, such as latitude and longitude.
• statusbar: It provides an interface to change the behavior of the status bar when we run our application.
• push: It is used for receiving the native push notifications.
• barcodescanner: It is responsible for scanning a barcode using the device camera.
• customurlscheme: It allows our application to be launched by a URL like myapp://path?foo=bar.
• emm-app –config: This plugin mainly retrieves Enterprise Mobility Management(EMM).

Plugin Caution and Compatibility

The plugins used in Cordova change in the aspect of quality and implementation. Some plugins are more compatible with a WordPress theme name as Astro. If the plugins have to show their own UIViewController, UI presented plugins should work correctly.

Some of the plugins may not work correctly if these plugins manually integrate a UIViews into the view hierarchy. The reason behind this problem is the UIWebView that hosts the Cordova javascript is never visible. The plugins are required to change for using the presentViewController().

These plugins may also conflict and shows errors. So, we should use only Cordova plugins from app.js.

---