iOS Push Notifications in Ionic Capacitor with Angular

by | Oct 4, 2024 | Mobile App Development

ios

Introduction

IOS Push notifications are crucial for enhancing user engagement in mobile applications. In this guide, we’ll walk you through implementing iOS push notifications using Ionic Capacitor and Angular. We’ll cover everything from project setup to configuring Firebase and adding the necessary Swift files, ensuring a seamless notification experience on iOS devices.

Prerequisites

Ensure you have the following:

  • Node.js installed
  • Ionic CLI installed
  • An iOS device or simulator
  • An Apple Developer Account
  • Xcode installed on macOS
  • Firebase Project set up for push notifications

 

Step 1: Create an Ionic Angular Project

If you don’t have an existing Ionic project, create a new one:

ionic start myPushNotificationApp blank –type=angular

cd myPushNotificationApp

Step 2: Install Capacitor Plugins

Install the necessary Capacitor plugins for handling push notifications:

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

npx cap sync

Step 3: Set Up Firebase for Push Notifications

  1. Go to the Firebase Console and create a new project if you don’t have one.
  2. Navigate to Project Settings and under the General tab, download the GoogleService-Info.plist file.
  3. Add the GoogleService-Info.plist file to the root of your Xcode project under the App folder.

Step 4: Configure iOS for Push Notifications

Open your Ionic project in Xcode:

  1. npx cap open ios
  2. Go to your project settings in Xcode and ensure the following:
    • Under Signing & Capabilities, enable Push Notifications.
    • Add the Background Modes capability and check Remote notifications.
    • Ensure the GoogleService-Info.plist file is included in your project.

In the Info.plist file, add the following key to disable the Firebase App Delegate Proxy:

Step 5: Add a Swift File for Push Notifications

If your Ionic project doesn’t already have a Swift file, you need to add one to ensure your project supports Swift:

  1. In Xcode, select File > New > File…
  2. Choose Swift File and name it PushNotificationHandler.
  3. When prompted, choose to create a bridging header. Xcode will create a myPushNotificationApp-Bridging-Header.h file. You can leave this header file empty or use it if you need to bridge Objective-C code in the future.

In your newly created Swift file, import Firebase and handle push notifications like this:

import UIKit
import Firebase

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

  var window: UIWindow?

  func application(_ application: UIApplication,
                   didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
    FirebaseApp.configure()
    return true
  }

 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)
}

Step 6: Request Permission for Notifications in Angular

In your Angular project, create a service to manage push notifications. This service will handle requesting permission and managing tokens.

import { Injectable } from '@angular/core';
import { PushNotifications, Token } from '@capacitor/push-notifications';

@Injectable({
  providedIn: 'root'
})
export class NotificationService {

  constructor() { }

  initPushNotifications() {
    PushNotifications.requestPermissions().then(result => {
      if (result.receive === 'granted') {
        this.registerPush();
      } else {
        console.log('Push notification permission not granted');
      }
    });
  }

  private registerPush() {
    PushNotifications.register();

    PushNotifications.addListener('registration', (token: Token) => {
      console.log('Push registration success, token: ' + token.value);
      // Send the token to your backend or Firebase Cloud Messaging (FCM)
    });

    PushNotifications.addListener('registrationError', (error: any) => {
      console.error('Push registration error: ' + JSON.stringify(error));
    });

    PushNotifications.addListener('pushNotificationReceived', (notification: any) => {
      console.log('Push notification received: ', notification);
      // Handle the notification
    });

    PushNotifications.addListener('pushNotificationActionPerformed', (notification: any) => {
      console.log('Push notification action performed: ', notification);
      // Handle the action, e.g., navigate to a specific page
    });
  }
}

Step 7: Initialize Notifications in Your App Component

In your app.component.ts, initialize the NotificationService to start managing push notifications.

import { Component, OnInit } from '@angular/core';
import { NotificationService } from './services/notification.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(private notificationService: NotificationService) { }

  ngOnInit() {
    this.notificationService.initPushNotifications();
  }
}

Step 8: Test Push Notifications

Build your Ionic project for iOS:
ionic build

npx cap copy ios

npx cap open ios

  2. Run the app on your device or simulator. Ensure that your device is connected to the internet.
  3. Use Firebase Cloud Messaging or any other backend service to send a push notification to the device. The token generated during registration will be used to target the device.

Conclusion

Implementing push notifications in an Ionic Capacitor project with Angular for iOS involves a few key steps: setting up Firebase, configuring iOS-specific capabilities, adding a Swift file, and handling push notifications in Angular. This setup enables you to send timely and relevant notifications to your users, enhancing engagement and user experience.