If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

API Changes

March 20, 2016

If the push notifications feature is used in your app and you decide to switch libraries version from 1.0 to 1.1, you would need to reimport the Appery.io Push Plug-in.

February 2, 2016

Because of changes in PushRegisterDeviceImpl JavaScript file, its content should be replaced by the new content (see the attached file).

November 15, 2015

Push notifications services may not work properly for pushes that are read with event.notification.aps.alert. To solve this problem, in the code, locate this:

and replace it with the next string:

Introduction

This tutorial shows how to create and use Push notification service in an AngularJS app.

Apache Cordova (PhoneGap)

Apache Cordova (PhoneGap) is automatically included when you create a new project in Appery.io. The push notification component used in Appery.io is the Notification component from Apache Cordova.

To learn more about the component, and any other settings or options, please see the notification documentation page.

Services description

See also Push notifications overview and Push notifications REST API.

The Appery.io Push plug-in contains the following services:

PushRegisterDevice service

PushRegisterDevice is a generic service with custom implementation. Its “request” contains the parameters whose names correspond with the names of additional columns in the Devices collection.

This generic service “response” has a structure of the REST response to the Appery.io database.

JavaScript PushRegisterDeviceImpl registers a device with the Apple/Google push services and adds it to the Appery.io database.

PushUpdateDevice service

PushUpdateDevice is a generic service with custom implementation whose “request” contains additional columns in the Devices collection.

Its “response” has a structure of response of the rest to Appery.io database.

JavaScript PushRegisterDeviceImpl sends REST request to Appery.io database to update the device information.

UnregisterDevice service

PushUnregisterDevice JavaScript sends REST request to Appery.io database to delete the device from the database.

To invoke PushUnregisterDevice, use:

PushSend service

PushSend is a REST service. It sends instant push notification to registered devices.

It’s important to add the Push API key to the X-Appery-Push-API-Key header under the Request tab.

Also, to send push notifications, a user has to compose the “message”.

PushSchedule service

PushSchedule is another REST service. It adds a scheduled push notification to the Appery Push scheduler.

It’s important to add Push API key to X-Appery-Push-API-Key header, see above.

Also, to send push notifications, a user has to set the message, scheduledTime and timeZone data.

Events

The following events available in Appery.io Push plug-in:

  • push-notification – fires when the device receives a notification.
  • pushinit – fires when the app initializes connection with server.

You can handle these event as following:

Before you begin

Tutorial level: intermediate.

Prerequisites: an Appery.io account.

Creating from the backup

You can build this app app by following our step-by-step tutorial below or create it from the backup.

To create an app from the backup:

  1. Click Create new app.
  2. Type an app name.
  3. Click From backup and select the project backup file.
  4. Click Create.

Creating the app

Design

  1. Open your Appery.io Ionic/AngularJS project or create a new one. You will get two default pages: index and Screen1.
  2. Go to Screen1 and place the Button component (to enable sending pushes from device) with Text = Send Push, ng-click = sendPush():
  3. When a new app is created, all the core Cordova plugins are checked. You may decide to enable only some of them and disable the rest (in this project, for example, you’ll need only two: Device and PushPlugin) in order to decrease the app size. Only enabled (checked) plug-ins will be included into the binary application and be used for any target device type in events, services, etc.: Project > App settings > Cordova plug-ins.

Importing the plugin

  1. First, in the app, go to SCOPE of Screen 1 and add three variables: devID, timeZone, and mess:
  2. Then, the Apperyio Push plug-in should be imported: CREATE NEW > From Plug-in.
  3. In the new window, check the Apperyio Push checkbox and click Import selected plugins.
  4. In the Project tree, a list of newly imported services and JavaScripts will appear.

After native services have been added to the app, they can be called. Invoking a native service is very similar to invoking a REST service.

Invoking PushRegister service

The most important service in the ApperyioPush plugin is PushRegisterDevice service. By invoking it, device will be registered (added) to the database.

  1. To call the service, in the project, open Screen 1, go to the SCOPE tab, add a new function – regPush(), and click Add, opening the function editor.
  2. In the editor, click the arrow to filter snippets, select Invoke service, and click Insert snippet and, for service_name, select PushRegisterDevice:

    You can click Backspace and then CTRL+SPACE to autocomplete the service name.

  3. Click Mapping for success event and create the following mapping:
  4. To show the result, add the following to the code:
  5. Then, add the following snippet from the event handler to the end of the code:
  6. The resulting regPush() function should look like:

Invoking PushSend service

  1. To call the PushSend service, in the SCOPE view of the Screen1 page, add another new function – sendPush() and, by clicking Add, open the function editor.
  2. In the editor, click the arrow to filter snippets, select Invoke service, and click Insert snippet, then click Backspace and then – CTRL+SPACE to get the drop-down with all the available services.
  3. Select the PushSend sevice from the list.
  4. Click Mapping for request, create the following, then click Save & Replace:
  5. Next, paste the next code to the beginning of the code:
  6. Now, add the following to the end of the code:
  7. Your sendPush() function should look like:

8. Now, under the Services folder in the project, open the PushSend service, and pass the app X-Appery-Push-API-Key under Request > Headers:
PushAPIKey

Similarly,  the app X-Appery-Push-API-Key must be passed under Request > Headers for PushSchedule service.

To locate the app X-Appery-Push-API-Key, go to: Push  Notifications > Settings.

Configuring init function

Now, open the code editor of the init() function of Screen1 and pass the following code:

It allows scheduling pushes and monitoring the changes of some predefined variables and responding with predefined actions.

Your app is ready, but, before you can start testing it, go to Push > Push Notifications > Settings and make sure you’ve enabled and configured your push settings, linked the app with the database, and passed the device credentials.

You can follow the links to learn in detail how to:

  1. Enable and configure Push Notifications.
  2. Configure your device.
  3. Link the database.
  4. Pass the X-Appery-Push-API-Key.

When testing the app, you’ll get:

Testing options

Android

Build the Android binary and install it your device. When the build is completed, you’ll see a QR code. Scanning the QR code will download the app to your phone. You can also email the app to your device.

iOS

Build the app and install it on your device.