Create HMS Push Kit Cordova Plugin from scratch feat. Plugman

Applications built specifically for mobile have been with us for more than 10 Years. Within that period the mobile development market has changed a lot. The way developers are approaching towards creating apps are not limited, in fact they have created their own ways for shortening development time. And that’s how cross-platform development was born.

Cross-platform, such as Cordova, Ionic, React Native, Flutter etc., are gaining a lot of attention especially for web developers who has knowledge about HTML,CSS, JavaScript etc. These platforms are also offering better opportunities to build native like experiences for developers.

Today we are going to learn, how to create Apache Cordova Plugin from scratch using HMS Core Capabilities.

Prerequisite

1. We must have latest version of Node installed on our machine.
2. We must have latest version of Visual Studio Code installed on our machine.
3. Once we installed Node, we can run the following command using command prompt (cmd) from anywhere in our environment to install Plugman globally, so that it is available from any directory:

$ npm install -g plugman

-g here indicates that Plugman installation is globally supported.

Why Plugman?

Plugman is a useful command line tool for installing and uninstalling or managing Cordova plugins. It supports multiple platform such as Android, iOS etc.

Let’s Plug it

First we create a separate folder in our system, where we want to create plugin. After we find a separate space, we copy the location and open command prompt to go to the specific location using cd command:

$ cd your/specific/location

Creating Plugin

We create plugin using below command.

$ plugman create --name HMSPushPlugin --plugin_id com.huawei.hmspushplugin --plugin_version 1.0.0

In the above command we are providing

1. Name of the plugin
2. Plugin id
3. Plugin version.

After creation of plugin, we use cd command to go to plugin location.

$ cd HMSPushPlugin

Adding Platform

We will add Android platform using below command.

$ plugman platform add --platform_name android

Create package.json

We will create package.json file using below command.

$ plugman createpackagejson

Answer the questions presented, and you will end up with a package.json that looks like this:

Folder Structure

After going through all the above command, the structure of the plugin creation will look like this:

Plugin.xml is one of the most important files here. It’s what Cordova parses to figure out what platforms your plugin supports, preferences it has that the user can configure, source files we’ll include in our final app build, and more.

Now if you peak into src folder, you may end up seeing native codes of Android or iOS or both.

Finally, www is where the JavaScript code for our plugin lives. This is what gets called first and then kicks off Cordova to call our native code.

Role Play of Visual Studio Code

Now we open VS code and open the folder of the plugin and start modifying the plugin.xml file it is where everything happens and it’s where we should start first.

Modify the plugin.xml as shown below:

If we want to change the id or name then we need to give our plugin a unique name and id. As far as naming conventions go, the id is usually of the form this-is-a-plugin, like for example huawei-cordova-pushkit-plugin.

The js-module specifies the JS code that will run, and <clobbers> sets what variable the plugin will be exported under. So, in this case, our script file is www/ HMSPushPlugin.js, and when our app runs, we’ll be able to access the plugin at cordova.plugins.HMSPushPlugin.

We specify the platforms we are going to support, along with references to the corresponding native code for each. Here we added Android as platform. Inside of <config-file> we specify our Android package name and also the symbol Cordova will use to identify our plugin, in this case it’s HMSPushPlugin. Finally, we have a reference to our main Java code inside of <source-file> which is where our native code lives.

Adding HMS Push Kit

As we have mentioned two <source-file> in plugin.xml file. So, we need to create add two java file in our android directory.

HMSPushPlugin.java

First we need to extend CordovaPlugin which is required for all customize plugin and rewrite the execute method.

The execute parameter contains:

1. String action: A class can provide multiple functions, and action specifies the function to be called.
2. CordovaArgs args: The web side passes JSON data to the Android native side. The data array in JSON format is encapsulated as CordovaArgs.
3. CallbackContext callbackContext: The Android native side calls back the processing result to the web side using success or error method.

MessageService.java

The MessageService class extends the HmsMessageService class to override the onNewToken method in the HmsMessageService class. The MessageService class is used to:

1. Return the token applied for using a Huawei device where the EMUI version is earlier than 10.0.
2. Receive an updated token from the HUAWEI Push Kit server.
3. Return a token that is successfully applied for upon retry.

To know more about HSM Push Kit Capabilities, go through my previous article.

JavaScript API

Basically we are building this plugin for other developer to use. So, in the JavaScript API, we will write those methods which we want to expose to the developer. In this case, our JavaScript code lives in www/HMSPushPlugin.js. Here’s what it looks like:

var exec = require('cordova/exec');
exports.getToken = function (arg0, success, error) {
exec(success, error, 'HMSPushPlugin', 'getToken', [arg0]);
};
exports.getMessageCallback = function (arg0, success, error) {
exec(success, error, "HMSPushPlugin", "getMessageCallback", [arg0]);
};

In this case, we have getToken and getMessageCallback as functions the developer can call. The code which is important here is the exec function that we’ve imported from cordova/exec. When called, this plugin tells Cordova’s plugin layer to find the plugin identified by PLUGIN_NAME and send the action passed in to a switch function.

That’s it

Finally we have created our plugin.

Where to go from here?

In the next series of this article, we will integrate this plugin in Ionic Project and will see how it works. We will learn a bit about Ionic and how we will use our plugin to generate push token also get notification using HMS developer console. Stay Tuned….