Cordova PluginsA 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:
Basic Structure of Cordova PluginA 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:
Cordova plugin commandSyntax
Plugin-specWe 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]
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.
Conflicting pluginsSeveral conflicts may occur when using plugins for an app that are as follows:
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 PluginsTo install the Cordova plugins for our application, we must have to follow some manual steps that are as follows:
npm install -g cordova
cordova create cordova-app
cordova plugin search camera cordova plugin add com.cordova.plugin.camera
Building PluginsThe 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.
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 PluginsIf 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 APIsThere are different sets of Cordova Plugins available for your application. Some of them are as follows:
Plugin Caution and CompatibilityThe 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. Next TopicCordova Plugin Camera |