Complete Examples, Step by Step for Beginners: .NET MAUI Push Notifications

Introduction

Prerequisites

Before you start, ensure you have the following:

1. Visual Studio (with .NET MAUI workload installed)
2. Firebase Account (for creating a Firebase project and obtaining server keys)
3. An Android device or emulator to test the application

Step 1: Create a New .NET MAUI Project

1. Open Visual Studio and create a new project.
2. Select .NET MAUI App (Preview) and click Next.
3. Give your project a name (e.g., MauiPushNotificationDemo) and choose a location, then click Next.
4. Click on Create to set up your project.

Step 2: Set Up Firebase for Your App

To use Firebase Cloud Messaging (FCM) for your Android app, you need to create a Firebase project and link it to your app.

Step 2.1: Create a Firebase Project

1. Go to the Firebase Console.
2. Click on the Create project button and follow the prompts to create a new project.
3. Once your project is created, click Continue.

Step 2.2: Add Firebase to Your Android App

1. Click Add app in the Firebase Console, then select Android.
2. Enter your app's package name (which you can find in Platforms/Android/AndroidManifest.xml in your MAUI project) and click Register app.
3. Download the google-services.json file and place it in the Platforms/Android folder of your .NET MAUI project.

Step 2.3: Configure Your Android Project

1. In the google-services.json file, note down the serverKey as you will need it later.

2. Open Platforms/Android/AndroidManifest.xml and add the following permissions within the <manifest> tag:

   <uses-permission android:name="android.permission.INTERNET" />
   <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
   <uses-permission android:name="android.permission.WAKE_LOCK" />
   <uses-permission android:name="com.google.android.c2dm.permission.RECEIVE" />
   

3. Still in AndroidManifest.xml, add the following intent filter inside the MainActivity tag:

   <intent-filter>
       <action android:name="com.google.firebase.MESSAGING_EVENT"/>
   </intent-filter>
   

4. Open Platforms/Android/build.gradle (Module: app) and apply the Google services plugin by adding:

   apply plugin: 'com.google.gms.google-services'
   

5. Make sure you have the Google services classpath in your Platforms/Android/build.gradle (Project: YourProjectName) by adding:

   dependencies {
       // Add this line
       classpath 'com.google.gms:google-services:4.3.10'
   }
   

6. Ensure you have the Firebase Messaging dependency in your Platforms/Android/build.gradle (Module: app):

   dependencies {
       // Add this line
       implementation 'com.google.firebase:firebase-messaging:23.0.0'
   }
   

Step 3: Install Required NuGet Packages

1. Right-click on your .NET MAUI project in Visual Studio, then select Manage NuGet Packages.
2. Install the following packages:
   • Xamarin.Firebase.Messaging
   • Xamarin.Firebase.Config
   • Xamarin.GooglePlayServices.Base
   • Xamarin.Forms (if not already installed)

Step 3.1: Install Xamarin.Firebase.Messaging

1. Search for Xamarin.Firebase.Messaging and install it.
2. Repeat for the other required packages (Xamarin.Firebase.Config, Xamarin.GooglePlayServices.Base).

Step 4: Set Up Firebase Messaging in Android

You need to create a service that handles the receiving and displaying of push notifications.

Step 4.1: Create Firebase Messaging Service

1. Create a new Java class in the Platforms/Android folder named MyFirebaseMessagingService.cs.
2. Add the following code to the service:

using Android.App;
using Android.Content;
using Firebase.Messaging;
using Android.Util;
using Android.Support.V4.App;

[Service]
[IntentFilter(new[] { "com.google.firebase.MESSAGING_EVENT" })]
public class MyFirebaseMessagingService : FirebaseMessagingService
{
    const string TAG = "MyFirebaseMsgService";

    public override void OnMessageReceived(RemoteMessage message)
    {
        Log.Debug(TAG, "From: " + message.From);

        // Check if message contains a notification payload.
        if (message.GetNotification() != null)
        {
            Log.Debug(TAG, "Message Notification Body: " + message.GetNotification().Body);
        }

        // Also if you intend to have local notifications, handle them here.
        SendNotification(message.GetNotification().Body);
    }

    private void SendNotification(string messageBody)
    {
        var intent = new Intent(this, typeof(MainActivity));
        intent.AddFlags(ActivityFlags.ClearTop);
        var pendingIntent = PendingIntent.GetActivity(this, 0 /* Request code */, intent,
                        PendingIntentFlags.OneShot);

        var notificationBuilder = new NotificationCompat.Builder(this, "default_notification_channel_id")
            .SetSmallIcon(Resource.Drawable.ic_launcher)
            .SetContentTitle("Notification Title")
            .SetContentText(messageBody)
            .SetAutoCancel(true)
            .SetContentIntent(pendingIntent);

        var notificationManager = NotificationManager.FromContext(this);
        notificationManager.Notify(0 /* ID of notification */, notificationBuilder.Build());
    }

    public override void OnNewToken(string token)
    {
        Log.Debug(TAG, "Refreshed token: " + token);
        SendRegistrationToServer(token);
    }

    private void SendRegistrationToServer(string token)
    {
        // Implement this method to send token to your app server.
    }
}

Step 5: Configure MainActivity to Handle Notifications

Ensure that your MainActivity is set up correctly to handle incoming notifications.

Step 5.1: Update MainActivity.cs

1. Open MainActivity.cs located in Platforms/Android/MainActivity.cs.
2. Update MainActivity to include the necessary imports and to create a notification channel if API level is 26 or above:

using Android.App;
using Android.Content.PM;
using Android.OS;
using Android.Notifications;

namespace MauiPushNotificationDemo.Platforms.Android
{
    [Activity(Theme = "@style/Maui.SplashTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation | ConfigChanges.UiMode | ConfigChanges.ScreenLayout | ConfigChanges.SmallestScreenSize)]
    public class MainActivity : MauiAppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);
            CreateNotificationChannel();
        }

        private void CreateNotificationChannel()
        {
            if (Build.VERSION.SdkInt >= BuildVersionCodes.O)
            {
                var name = "default_notification_channel_id";
                var channel = new NotificationChannel(name, "maui_app_channel", NotificationImportance.Default);
                channel.Description = "Channel description";

                var notificationManager = (NotificationManager)GetSystemService(NotificationService);
                notificationManager.CreateNotificationChannel(channel);
            }
        }
    }
}

Step 6: Test Push Notifications

1. Build and run your Android app on a device or emulator with Google Play Services installed.
2. Open the Firebase Console and navigate to the Cloud Messaging section.
3. Click on the Send your first message button.
4. Enter the notification details such as the title and message.
5. Select Single app test and enter your app’s registration token.
6. Click Next and then Review and send.
7. You should receive the push notification on your app.

Conclusion

Congratulations! You have successfully integrated push notifications into your .NET MAUI application using Firebase Cloud Messaging (FCM). This guide covered setting up Firebase, configuring your .NET MAUI project, and handling push notifications within the Android platform. Extending this to other platforms like iOS involves additional setup of Apple Push Notification service (APNs), but the core concepts remain similar.

Extra References

• Firebase Cloud Messaging Documentation
• .NET MAUI Documentation
• Xamarin.Firebase.Messaging Documentation