The Push Notifications API provides access to native push notifications. This plugin is a fork of the Official Capacitor Push Notifications plugin, with the addition of extra configuration options for Android foreground notifications.

npm install @haylltd/capacitor-push-notifications
npx cap sync

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

After enabling the Push Notifications capability, add the following to your app's 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)
}

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.

This plugin will use the following project variables (defined in your app's variables.gradle file):

• $firebaseMessagingVersion version of com.google.firebase:firebase-messaging (default: 23.0.5)

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.

You can configure the way the push notifications are displayed when the app is in foreground.

In capacitor.config.json:

{
  "plugins": {
    "PushNotifications": {
      "presentationOptions": ["badge", "sound", "alert"],
      "androidForegroundChannelId": "default",
      "androidForegroundChannelName": "MyNotificationChannel",
      "androidForegroundChannelDescription": "Notifications for my app",
      "androidForegroundChannelSound": "my_notification_sound"
    }
  }
}

In capacitor.config.ts:

/// <reference types="@haylltd/capacitor-push-notifications" />

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  plugins: {
    PushNotifications: {
      presentationOptions: ["badge", "sound", "alert"],
      androidForegroundChannelId: "default",
      androidForegroundChannelName: "MyNotificationChannel",
      androidForegroundChannelDescription: "Notifications for my app",
      androidForegroundChannelSound: "my_notification_sound",
    },
  },
};

export default config;

This plugin does not support iOS Silent Push (Remote Notifications). We recommend using native code solutions for handling these types of notifications, see Pushing Background Updates to Your App.

This plugin does support data-only notifications, but will NOT call pushNotificationReceived if the app has been killed. To handle this scenario, you will need to create a service that extends FirebaseMessagingService, see Handling FCM Messages.

On Android, there are various system and app states that can affect the delivery of push notifications:

• If the device has entered Doze mode, your application may have restricted capabilities. To increase the chance of your notification being received, consider using FCM high priority messages.
• There are differences in behavior between development and production. Try testing your app outside of being launched by Android Studio. Read more here.

import { PushNotifications } from '@capacitor/push-notifications';

const addListeners = async () => {
  await PushNotifications.addListener('registration', token => {
    console.info('Registration token: ', token.value);
  });

  await PushNotifications.addListener('registrationError', err => {
    console.error('Registration error: ', err.error);
  });

  await PushNotifications.addListener(
    'pushNotificationReceived',
    notification => {
      console.log('Push notification received: ', notification);
    },
  );

  await PushNotifications.addListener(
    'pushNotificationActionPerformed',
    notification => {
      console.log(
        'Push notification action performed',
        notification.actionId,
        notification.inputValue,
      );
    },
  );
};

const registerNotifications = async () => {
  let permStatus = await PushNotifications.checkPermissions();

  if (permStatus.receive === 'prompt') {
    permStatus = await PushNotifications.requestPermissions();
  }

  if (permStatus.receive !== 'granted') {
    throw new Error('User denied permissions!');
  }

  await PushNotifications.register();
};

const getDeliveredNotifications = async () => {
  const notificationList = await PushNotifications.getDeliveredNotifications();
  console.log('delivered notifications', notificationList);
};

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

register() => any

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 not prompt the user for notification permissions, use requestPermissions() first.

Returns: any

Since: 1.0.0

getDeliveredNotifications() => any

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

Returns: any

Since: 1.0.0

removeDeliveredNotifications(delivered: DeliveredNotifications) => any

Remove the specified notifications from the notifications screen.

Returns: any

Since: 1.0.0

removeAllDeliveredNotifications() => any

Remove all the notifications from the notifications screen.

Returns: any

Since: 1.0.0

createChannel(channel: Channel) => any

Create a notification channel.

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

Returns: any

Since: 1.0.0

deleteChannel(args: { id: string; }) => any

Delete a notification channel.

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

Returns: any

Since: 1.0.0

listChannels() => any

List the available notification channels.

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

Returns: any

Since: 1.0.0

checkPermissions() => any

Check permission to receive push notifications.

On Android the status is always granted because you can always receive push notifications. If you need to check if the user allows to display notifications, use local-notifications plugin.

Returns: any

Since: 1.0.0

requestPermissions() => any

Request permission to receive push notifications.

On Android it doesn't prompt for permission because you can always receive push notifications.

On iOS, the first time you use the function, it will prompt the user for push notification permission and return granted or denied based on the user selection. On following calls it will get the current status of the permission without prompting again.

Returns: any

Since: 1.0.0

addListener(eventName: 'registration', listenerFunc: (token: Token) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Called when the push notification registration finishes without problems.

Provides the push notification token.

Returns: any

Since: 1.0.0

addListener(eventName: 'registrationError', listenerFunc: (error: RegistrationError) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Called when the push notification registration finished with problems.

Provides an error with the registration problem.

Returns: any

Since: 1.0.0

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

Called when the device receives a push notification.

Returns: any

Since: 1.0.0

addListener(eventName: 'pushNotificationActionPerformed', listenerFunc: (notification: ActionPerformed) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Called when an action is performed on a push notification.

Returns: any

Since: 1.0.0

removeAllListeners() => any

Remove all native listeners for this plugin.

Returns: any

Since: 1.0.0

The importance level. For more details, see the Android Developer Docs

1 | 2 | 3 | 4 | 5

The notification visibility. For more details, see the Android Developer Docs

-1 | 0 | 1

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