Setting up Push Notifications in Ionic Capacitor for iOS

Prerequisites

Before you begin, make sure you have the following prerequisites in place:

1. Ionic Capacitor Project: Create an Ionic Capacitor project or use an existing one as the foundation for your iOS app.
2. Apple Developer Account: You need an Apple Developer account to enable push notifications for iOS.
3. Xcode: Install Xcode, Apple's integrated development environment (IDE), on your macOS.

Steps To Set Up Push Notifications in Ionic Capacitor for iOS

Follow these steps to configure push notifications for your Ionic Capacitor iOS app:

1. Register Your App With Apple Developer

1. Log in to your Apple Developer account and navigate to the Apple Developer Console.
2. Under "Identifiers," click on the "+" button to create a new identifier.
3. Choose "App IDs" and click "Continue."
4. Fill out the necessary information, including the App ID Description and Bundle ID. Ensure that the Bundle ID matches the one used in your Ionic Capacitor project.
5. Under "Capabilities," enable "Push Notifications."
6. Complete the registration process, and Apple will generate an App ID for your app.

2. Create an Authentication Key

1. In the Apple Developer Console, navigate to "Keys" under "Certificates, Identifiers & Profiles."
2. Click the "+" button to create a new key.
3. Provide a name for the key, select "Apple Push Notifications service (APNs)" as the key type, and click "Continue."
4. Verify the information and confirm the creation of the key.
5. Download the key and save it in a secure location. You'll need it later for server-side configuration.

3. Install Required Plugins

In your Ionic Capacitor project, install the required plugins:

npm install @capacitor/push-notifications
npm install @capacitor/app

Note: For Mac systems, you need to use the bash to run the above command.

4. Configure Push Notifications

1. Open your Ionic Capacitor project in Xcode by running:

npx cap open ios

 Note: For Mac systems, you need to use the bash to run the above command.

2. In Xcode, navigate to your app's settings:
   • Click on your app's name under "Targets."
   • Go to the "Signing & Capabilities" tab.
3. Enable "Push Notifications" by switching it on.

5. Add Code for Push Notifications

In your Ionic project, add the following code to set up push notifications:

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

async function setupPushNotifications() {
  // Request notification permission
  const permission = await PushNotifications.requestPermissions();
  
  if (permission.receive === 'granted') {
    // Register with APNs (Apple Push Notification service)
    const { token } = await PushNotifications.register();

    // Handle incoming notifications
    PushNotifications.addListener('pushNotificationReceived', (notification: PushNotificationSchema) => {
      // Handle the received notification here
      console.log('Push received: ' + JSON.stringify(notification));
    });
  }
}

setupPushNotifications();

6. Add Code To Connect and Register Token With Firebase

 To connect to Firebase when your iOS app starts up and register the token in the required format, you need to add the following to your AppDelegate.swift file.

import UIKit
import Capacitor
import Firebase // Need to import this

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?


  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    // Override point for customization after application launch.
    FirebaseApp.configure() // Need to initialize
    return true
  }

  // Function to register the token as APNS for IOS only
  func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) {
    Messaging.messaging().apnsToken = deviceToken
    Messaging.messaging().token(completion: { (token, error) in
      if let error = error {
          NotificationCenter.default.post(name: .capacitorDidFailToRegisterForRemoteNotifications, object: error)
      } else if let token = token {
          NotificationCenter.default.post(name: .capacitorDidRegisterForRemoteNotifications, object: token)
      }
    })
  }
   // Function to through the registration error
  func application(_ application: UIApplication, didFailToRegisterForRemoteNotificationsWithError error: Error) {
    NotificationCenter.default.post(name: .capacitorDidFailToRegisterForRemoteNotifications, object: error)
  }

6. Test Push Notifications

You can test push notifications using a service like Firebase Cloud Messaging (FCM) or a backend server. Use the device token you receive during registration to send test notifications to your app.