Getting Started with Push Notifications

Getting Started with Push Notifications

Implementing push notifications through Telerik Platform and the Backend Services JavaScript SDK gives you certain benefits. These include more easily registering a device for push notifications with its vendor, using a unified API across devices, and the ease of sending push notification from the Telerik Platform portal.

In this article you will learn how to integrate push notifications in a hybrid mobile app built using Progress Telerik Platform AppBuilder.

This tutorial assumes that you are familiar with developing with AppBuilder and deploying your app to a connected device.

Content at a glance:

  1. Enable the Push Plugin
  2. Include the Backend Services JavaScript SDK in Your Project
  3. Initialize and Register the Device for Push Notifications
  4. Run the App on a Connected Device
  5. Send a Push Notification

Prerequisites

Begin this tutorial by creating a new Telerik Platform mobile app.

Enable the Push Plugin

The Push Plugin provides native push notifications functionality to mobile apps. It has different versions for hybrid (Apache Cordova) and NativeScript apps.

For Hybrid Apps

To install the Push Plugin for Hybrid (Apache Cordova) apps:

  1. Open the Project Navigator in the right pane of your AppBuilder client.
  2. Navigate to Properties > Plugins > Other Plugins.
  3. Ensure that the PushPlugin version 2.4.3 or higher is ON. If this plugin is not in the list, click the Install from Plugins Marketplace button and install the Telerik Push Notifications plugin.

For NativeScript Apps

To install the Push Plugin for NativeScript apps, follow the instruction in the GitHub project's Readme file.

Include the Backend Services JavaScript SDK in Your Project

The Backend Services JavaScript SDK handles the device initialization for push notifications and registration in your Telerik Platform app.

Include the following script resource in your index.html file just after the cordova.js reference.

<script src="https://bs-static.cdn.telerik.com/latest/everlive.all.min.js">

You can learn about the other ways to install and manage the SDK from Getting Started with the Backend Services JavaScript SDK.

Initialize and Register the Device for Push Notifications

Add the following code blocks in the js/index.js file of your hybrid project. When the code is executed, the device will obtain a push token and register with Telerik Platform.

  1. Declare the following callback function. It will be called when one of these events occurs:

    • The app is opened via a received push notification.
    • The notification is received while the app is running in the foreground.
function onPushNotificationReceived(e) {
    alert(JSON.stringify(e));
};
  1. In the code below, replace your-app-id with the actual App ID of your Telerik Platform app. The App ID is available on your app's Settings tab in the Telerik Platform portal.

  2. For Android, replace SENDER_ID_HERE with the actual Sender ID value that you obtained from Firebase Cloud Messaging.

  3. Add the code below to the onDeviceReady handler in js/index.js.

var everlive = new Everlive({
    appId: 'your-app-id',
    scheme: 'https'
});

var devicePushSettings = {
    iOS: {
        badge: 'true',
        sound: 'true',
        alert: 'true'
    },
    android: {
        senderID: 'SENDER_ID_HERE'
    },
    wp8: {
        channelName: 'EverlivePushChannel'
    },
    notificationCallbackIOS: onPushNotificationReceived,
    notificationCallbackAndroid: onPushNotificationReceived,
    notificationCallbackWP8: onPushNotificationReceived
};

everlive.push.register(devicePushSettings, function() {
    alert("Successful registration in Telerik Platform. You are ready to receive push notifications.");
}, function(err) {
    alert("Error: " + err.message);
});

Run the App on a Connected Device

Deploy and run the created app on a testing device.

The app will not run correctly in the simulator and in the AppBuilder companion app because they cannot be registered for push notifications.

Prior to running the app, make sure that the device has an active Internet connection. Run the app on your device. In case of success the device will be registered with Telerik Platform. After that you will be able to receive push notifications on it.

Registered iOS Device in Telerik Platform

Send a Push Notification

  1. Open your Telerik Platform app.
  2. Navigate to Notifications > Push Notifications > Push Browser.
  3. Click Send a push notification and fill in the details.
  4. Click Send Now.

Send a push notification to iOS

See Also


Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.