@capacitor/push-notifications

@capacitor/push-notifications

The Push Notifications API provides access to native push notifications.

Install

npm install @capacitor/push-notifications
npx cap sync

iOS

On iOS you must enable the Push Notifications capability. See Setting Capabilities for instructions on how to enable the capability.

The Push Notification API uses Firebase Cloud Messaging SDK for handling notifications. See Set up a Firebase Cloud Messaging client app on iOS and follow the instructions for creating a Firebase project and registering your application. Do not add the Firebase SDK to your app - the Push Notifications provides that for you. All that is required is your Firebase project GoogleService-Info.plist file added to your Xcode project.

After setting up your Firebase project, add the following to your application AppDelegate.swift

func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
  NotificationCenter.default.post(name: .capacitorDidRegisterForRemoteNotifications, object: deviceToken)
}

func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) {
  NotificationCenter.default.post(name: .capacitorDidFailToRegisterForRemoteNotifications, object: error)
}

Android

The Push Notification API uses Firebase Cloud Messaging SDK for handling notifications. See Set up a Firebase Cloud Messaging client app on Android and follow the instructions for creating a Firebase project and registering your application. There is no need to add the Firebase SDK to your app or edit your app manifest - the Push Notifications provides that for you. All that is required is your Firebase project's google-services.json file added to the module (app-level) directory of your app.

---

Push Notifications icon

On Android, the Push Notifications icon with the appropriate name should be added to the AndroidManifest.xml file:

<meta-data android:name="com.google.firebase.messaging.default_notification_icon" android:resource="@mipmap/push_icon_name" />

If no icon is specified Android will use the application icon, but push icon should be white pixels on a transparent backdrop. As the application icon is not usually like that, it will show a white square or circle. So it's recommended to provide the separate icon for Push Notifications.

Android Studio has an icon generator you can use to create your Push Notifications icon.

Push notifications appearance in foreground

On iOS you can configure the way the push notifications are displayed when the app is in foreground by providing the presentationOptions in your capacitor.config.json as an Array of Strings you can combine.

Possible values are:

• badge: badge count on the app icon is updated (default value)
• sound: the device will ring/vibrate when the push notification is received
• alert: the push notification is displayed in a native dialog

An empty Array can be provided if none of the previous options are desired. pushNotificationReceived event will still be fired with the push notification information.

"plugins": {
  "PushNotifications": {
    "presentationOptions": ["badge", "sound", "alert"]
  }
}

---

API

• register()
• getDeliveredNotifications()
• removeDeliveredNotifications(...)
• removeAllDeliveredNotifications()
• createChannel(...)
• deleteChannel(...)
• listChannels()
• checkPermissions()
• requestPermissions()
• addListener('registration', ...)
• addListener('registrationError', ...)
• addListener('pushNotificationReceived', ...)
• addListener('pushNotificationActionPerformed', ...)
• removeAllListeners()
• Interfaces
• Type Aliases

register()

register() => Promise<void>

Register the app to receive push notifications.

This method will trigger the 'registration' event with the push token or 'registrationError' if there was a problem. It does prompt the user for notification permissions, use requestPermissions() first.

Since: 1.0.0

---

getDeliveredNotifications()

getDeliveredNotifications() => Promise<PushNotificationDeliveredList>

Get a list of notifications that are visible on the notifications screen.

Returns: Promise<PushNotificationDeliveredList>

Since: 1.0.0

---

removeDeliveredNotifications(...)

removeDeliveredNotifications(delivered: PushNotificationDeliveredList) => Promise<void>

Remove the specified notifications from the notifications screen.

Param	Type
delivered	PushNotificationDeliveredList

Since: 1.0.0

---

removeAllDeliveredNotifications()

removeAllDeliveredNotifications() => Promise<void>

Remove all the notifications from the notifications screen.

Since: 1.0.0

---

createChannel(...)

createChannel(channel: Channel) => Promise<void>

Create a notification channel.

Only available on Android O or newer (SDK 26+).

Param	Type
channel	Channel

Since: 1.0.0

---

deleteChannel(...)

deleteChannel(channel: Channel) => Promise<void>

Delete a notification channel.

Only available on Android O or newer (SDK 26+).

Param	Type
channel	Channel

Since: 1.0.0

---

listChannels()

listChannels() => Promise<ListChannelsResult>

List the available notification channels.

Only available on Android O or newer (SDK 26+).

Returns: Promise<ListChannelsResult>

Since: 1.0.0

---

checkPermissions()

checkPermissions() => Promise<PermissionStatus>

Check permission to receive push notifications.

Returns: Promise<PermissionStatus>

Since: 1.0.0

---

requestPermissions()

requestPermissions() => Promise<PermissionStatus>

Request permission to receive push notifications.

Returns: Promise<PermissionStatus>

Since: 1.0.0

---

addListener('registration', ...)

addListener(eventName: 'registration', listenerFunc: (token: PushNotificationToken) => void) => PluginListenerHandle

Called when the push notification registration finishes without problems.

Provides the push notification token.

Param	Type
eventName	'registration'
listenerFunc	(token: PushNotificationToken) => void

Returns: PluginListenerHandle

Since: 1.0.0

---

addListener('registrationError', ...)

addListener(eventName: 'registrationError', listenerFunc: (error: any) => void) => PluginListenerHandle

Called when the push notification registration finished with problems.

Provides an error with the registration problem.

Param	Type
eventName	'registrationError'
listenerFunc	(error: any) => void

Returns: PluginListenerHandle

Since: 1.0.0

---

addListener('pushNotificationReceived', ...)

addListener(eventName: 'pushNotificationReceived', listenerFunc: (notification: PushNotificationSchema) => void) => PluginListenerHandle

Called when the device receives a push notification.

Param	Type
eventName	'pushNotificationReceived'
listenerFunc	(notification: PushNotificationSchema) => void

Returns: PluginListenerHandle

Since: 1.0.0

---

addListener('pushNotificationActionPerformed', ...)

addListener(eventName: 'pushNotificationActionPerformed', listenerFunc: (notification: PushNotificationActionPerformed) => void) => PluginListenerHandle

Called when an action is performed on a push notification.

Param	Type
eventName	'pushNotificationActionPerformed'
listenerFunc	(notification: PushNotificationActionPerformed) => void

Returns: PluginListenerHandle

Since: 1.0.0

---

removeAllListeners()

removeAllListeners() => void

Remove all native listeners for this plugin.

Since: 1.0.0

---

Interfaces

PushNotificationDeliveredList

Prop	Type	Since
notifications	PushNotificationSchema[]	1.0.0

PushNotificationSchema

Prop	Type	Description	Since
title	string	The notification title.	1.0.0
subtitle	string	The notification subtitle.	1.0.0
body	string	The main text payload for the notification.	1.0.0
id	string	The notification identifier.	1.0.0
badge	number	The number to display for the app icon badge.	1.0.0
notification	any		1.0.0
data	any		1.0.0
click_action	string		1.0.0
link	string		1.0.0
group	string	Set the group identifier for notification grouping Only available on Android. Works like threadIdentifier on iOS.	1.0.0
groupSummary	boolean	Designate this notification as the summary for an associated group. Only available on Android.	1.0.0

Channel

Prop	Type	Description	Since
id	string	The channel identifier.	1.0.0
name	string	The human-friendly name of this channel (presented to the user).	1.0.0
description	string	The description of this channel (presented to the user).	1.0.0
sound	string	The sound that should be played for notifications posted to this channel. Notification channels with an importance of at least 3 should have a sound. The file name of a sound file should be specified relative to the android app res/raw directory.	1.0.0
importance	1 | 2 | 5 | 4 | 3	The level of interruption for notifications posted to this channel.	1.0.0
visibility	0 | 1 | -1	The visibility of notifications posted to this channel. This setting is for whether notifications posted to this channel appear on the lockscreen or not, and if so, whether they appear in a redacted form.	1.0.0
lights	boolean	Whether notifications posted to this channel should display notification lights, on devices that support it.	1.0.0
lightColor	string	The light color for notifications posted to this channel. Only supported if lights are enabled on this channel and the device supports it. Supported color formats are #RRGGBB and #RRGGBBAA.	1.0.0
vibration	boolean	Whether notifications posted to this channel should vibrate.	1.0.0

ListChannelsResult

Prop	Type	Since
channels	Channel[]	1.0.0

PermissionStatus

Prop	Type	Since
receive	PermissionState	1.0.0

PluginListenerHandle

Prop	Type
remove	() => void

PushNotificationToken

Prop	Type	Since
value	string	1.0.0

PushNotificationActionPerformed

Prop	Type	Since
actionId	string	1.0.0
inputValue	string	1.0.0
notification	PushNotificationSchema	1.0.0

Type Aliases

PermissionState

'prompt' | 'prompt-with-rationale' | 'granted' | 'denied'