How to Integrate HUAWEI Push Plugin to Cordova

Introduction

Hello everyone, I will show how to integrate Huawei Push Plugin to a Cordova project in this article.

Prerequisites

You should install npm, Node.js and Cordova CLI on your PC.

Pre-Installation

Configuring App Information in AppGallery Connect

Before you get started, you must register as a HUAWEI developer and complete identity verification on HUAWEI Developers.

Firstly, let’s create an AppGallery Connect Project.

1. Sign in to AppGallery Connect and select My projects.
2. Click Add project.

3. Enter a project name and click OK.

After the project is created, the Project settings page is displayed. Before you use the development capabilities provided by AppGallery Connect, you need to add an app to your project first.

1. In section Project settings > General information, click Add app.
2. On the Add app page, enter app information.

Enter App Information

3. On the Project settings page, enter SHA-256 certificate fingerprint and then download the configuration file agconnect-services.json for the Android platform.

A signing certificate fingerprint is used to verify the authenticity of an app when it attempts to access an HMS Core (APK) through the HMS SDK. Before using the HMS Core (APK), you must locally generate a signing certificate fingerprint and configure it in the AppGallery Connect. You can refer to 3rd and 4th steps of Generating a Signing Certificate Codelab tutorial for the certificate generation. Perform the following steps after you have generated the certificate.

Enabling Service

To use HUAWEI Push Service on your app, you first need to enable the service.

Sign in to AppGallery Connect and click My projects.

Find your project from the project list and click the app for which you need to set Push Kit parameters on the project card.

Go to Project settings > Manage APIs and enable Push Kit.

Go to Grow > Push Kit and click Enable now. In the dialog box that is displayed, click OK.

Pre-installation steps end here. Basically, we created an AppGallery Connect project and enabled the Push Service. We also saved the SHA-256 certificate fingerprint to the project.

Installation

Firstly, open a command line and create a new Cordova project.

cordova create HMSPushDemo com.huawei.medium.pushdemo HMSPush

This command will create a new directory named HMSPushDemo and a new project named HMSPush inside it. You can change names as you wish.

The widget id property in config.xml file must be same with client > package_name value in agconnect-services.json file.

1. Go to the project directory and add the android platform to the project.

cd HMSPushDemo
cordova platform add android

2. Now, you need to add Huawei Push Plugin to the project. Run the following command in the root directory of your project to install it through npm.

cordova plugin add @hmscore/cordova-plugin-hms-push

3. Copy agconnect-services.json file to <project_root>/platforms/android/app directory. In our case, project_root is HMSPushDemo folder.

4. Add keystore(.jks) to your project’s root directory.

You can refer to 3rd and 4th steps of Generating a Signing Certificate Codelab tutorial page for generating keystore file.

5. Create a file named as build.json in the project’s root directory and fill the file according to your keystore information as in the example below.

{
    "android": {
        "debug": {
            "keystore": "<keystore_file>.jks",
            "storePassword": "<keystore_password>",
            "alias": "<key_alias>",
            "password": "<key_password>"
        },
        "release": {
            "keystore": "<keystore_file>.jks",
            "storePassword": "<keystore_password>",
            "alias": "<key_alias>",
            "password": "<key_password>"
        }
    }
}

6. Huawei Push Plugin requires minimum SDK version 19. If your minimum SDK version is lower than 19, set it as 19 in the config.xml file. Otherwise, you can skip this step.

...
<platform name="android">
    ...
    <preference name="android-minSdkVersion" value="19" />
</platform>

7. Finally, build the project.

cordova build android

We successfully configured our project. We can use all functionalities of the Huawei Cordova Push Plugin in our project.

Send Notification to Subscribers from AppGallery Connect

First of all, we need to call the getToken method to obtain a token for the user. Then we need to subscribe user a topic with subscribe method. There is an example of usage below.

When we subscribed to the user a topic, sign in to AppGallery Connect again and open your project. Then go to Grow > Push Kit and click to Add Notification button.

Now we must fill in the content of the notification.

In the Push Scope part, we are selecting Push Scope > Subscriber and we are choosing the condition which we subscribed to before.

When all is done, we are clicking the submit button.

We are clicking the OK button and sending a notification to everyone who subscribes to the “weather” topic.

As you can see we were able to send the notification on our phone.

Conclusion

In this article, I integrated HMS Push Plugin to a Cordova project and showed the basic functionalities of the Push Kit. I tried to explain the notification sending steps.

Thank you for reading, I hope it was helpful.

References

@hmscore/cordova-plugin-hms-push

Document