Push Notifications for Ionic 4/5 App

Getting started with Push Notifications for Ionic 4/5 projects

This quickstart tutorial will show you how to send a Push Notification with an Ionic 4/5 app.

Apache Cordova (PhoneGap)

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

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


Testing Push Notifications

To test sending and receiving Push Notification messages the app has to be installed on the device.

Before You Start

If this is your first time working with Push Notifications, we recommend you create a new app so that it will not impact anything else you are working on.

Enabling Push Notifications

Please follow the steps on the Configuration page to learn how to enable and configure Push Notifications.


Important notice

In Push Notifications > Settings, keep the Show alert checkbox checked. Otherwise, the issue with push notifications permissions on iOS devices can be observed.

Creating New App

  1. From the Apps page, click the Create new app button.
  2. Select Ionic 4/5 > Ionic 4/5 Blank for the application type, enter PushNotificationsApp for the app name, and click Create.
  3. Once the App Builder loads, from the left menu, go to the Project > App Settings > Cordova plugins. Under the Core Cordova Plugins tab, select PushPlugin click the SAVE button at the top:

Creating App UI

Whether you use an existing or a new app, you need to create a very simple UI to handle Push Notifications.

  1. Unfold the Pages folder, navigate to Pages > Screen1 and select the DESIGN tab.
  2. Now, select the ToolbarTitle1 component and change it's Text property to Push Notifications App. You can also add the needed components to the page. For example, drag & drop a Text component into the app. Here is an example:

Designing App for Push

  1. Switch to the app page and expand its EVENTS panel.
  2. Add the Push registration success event for the Page component . Then, add the Present alert action. For the alert, set the Device has been registered message and save:
  1. Now, for the same Page component, add the Push registration fail event with the Present alert action. For the alert, set this message: Device registration failed.
  2. Finally, add one more event for this page, Push notification and, for its action, select Run TypeScript, enter the code below and save:

Here is how the EVENTS panel with all the events added should look like:



If different event handlers are added to different pages, the most recent event will be prioritized in handling (processing) a notification. This can be used to activate/deactivate alerts when opening a particular page.

How Service Works

After starting the application, you should receive a notification that the device has been registered.
Both iOS and Android handle notifications in the following way:

  • When the app is in the background (not active), a standard notification will be shown to the user.
  • When the app is in the foreground (active), a standard notification will not be shown as the app is currently active. The notification will still arrive, but you simply need to add an event handler (described in Step 4) to handle (process) this notification.

This is just a sample behavior and you might want to invoke another action to process the notification in your project.


Want to know more?

Also, you can check this tutorial to learn how you can keep application logic working when in the background mode.

Installing App on Device

Note that you need to test it on a device as the plug-in won’t work inside the browser.
So, to be able to receive Push Notification messages, build a binary for the app and install it on the device. This App Export section covers how to build a binary.


Make sure you follow all the steps described in the Configuration document. Otherwise, no push notifications will be sent.

Now, when you have successfully registered your device, you can arrange for sending your first Push Notification.

Sending Push Notification Message

  1. Go to Apps > PushNotificationsApp > Push Notifications > Send Push Notification.
  2. For Send Push Notification, keep the All Devices option selected.
  3. For Select device types. select the device type to which you want to send the message. You can select both if you have installed the app on iOS and Android.
  4. For Badge, enter: 1.
  5. For Title, enter: First Push Message.
  6. For Message, enter: First message with the Appery.io platform!:
**Send Push Notification** tab**Send Push Notification** tab

Send Push Notification tab

  1. Now, scroll to the bottom of the page, check that the needed devices have been registered, and click the Send button to send the message.



To learn more about sending pushes, check this document.

Within a few seconds, your device should receive a Push Notification message you have just sent:

Push Notification message on an Android devicePush Notification message on an Android device

Push Notification message on an Android device

Push Notification message on an iOS devicePush Notification message on an iOS device

Push Notification message on an iOS device