Ionic 4 & Firebase Cloud Messaging: Web Push Notifications Tutorial (AngularFire Guide)

Introduction

Push notifications are crucial for user engagement, and with Firebase Cloud Messaging (FCM), you can now send them directly through your Progressive Web App (PWA) on most major browsers. This tutorial will guide you through setting up Firebase Cloud Messaging for the web within an Ionic 4 PWA from scratch. We'll leverage the power of AngularFire, now under the `@angular` namespace, which provides stable support for messaging and callable functions.

Why Web Push Notifications?

Web push notifications work in all major browsers, providing a similar experience to native push notifications on Android devices. However, it's important to note that iOS Safari is currently not supported, meaning web notifications won't reach iPhone users. The advantage here is the ease of implementation with web technologies, providing a cross platform notification system that works on desktop and Android devices.

Understanding the Notification Workflow

Here's a breakdown of how the web push notification system will work:

1. User Grants Permission: The user allows the app to send notifications.
2. Firebase Generates Token: Firebase provides a unique token for the user's browser.
3. Topic Subscription: Users are subscribed to specific topics, allowing for broadcast notifications.
4. Callable Functions: Cloud functions are triggered from the front end to subscribe or unsubscribe users from topics.
5. Firestore Trigger: A Firestore Cloud Function broadcasts messages whenever a new document is created in a specific database collection.

Backend Setup with Firebase Cloud Functions

You'll need an existing Firebase project. Initialize the backend using Firebase init functions. The code below should be placed into its own file within the functions directory. FCM is used for message based cloud functions. Callable functions are similar to HTTP functions, but allow for direct information passing via the Firebase SDK.

Subscribing to a Topic

The subscribeToTopic function allows users to subscribe using their token. It takes in a token and topic as arguments.

admin.messaging().subscribeToTopic({
    tokens: tokens,
    topic: topic,
})

Unsubscribing from a Topic

Similarly, the unsubscribeFromTopic function handles unsubscribing users.

admin.messaging().unsubscribeFromTopic({
    tokens: tokens,
    topic: topic,
});

Broadcasting Notifications

The Firestore document onCreateTrigger function sends a message to topic subscribers whenever a new document is added to the designated collection. This example is for a hypothetical discounts collection.

admin.messaging().send({
    notification: {
        title: 'New Discount!',
        body: 'Check out the latest discounts available.'
    },
    topic: topic
});

Frontend Implementation with Ionic/Angular

Web push notifications are enabled by a service worker that runs in the background. Create a file named FirebaseMessaging-sw.js in your source directory. Use the code provided by Firebase documentation, ensuring to update the sender ID for your project.

In your angular.json file, include the path to the service worker file in the assets array. Ensure AngularFire is installed correctly.

Create an FCM service to handle user permissions, display notifications, and topic subscriptions. Inject AngularFireMessaging, AngularFireFunctions, and Ionic's ToastController into your service.

Implement a method to request permission from the user using AngularFireMessaging.requestToken. Listen to incoming messages and display them using Ionic's ToastController when the app is in the foreground.

Create methods to call the callable functions (subscribeToTopic, unsubscribeFromTopic) using AngularFireFunctions.httpsCallable. Pass the topic and token as arguments.

Finally, inject the service into a page and trigger the methods on button clicks. The sample uses a button to request permission, subscribe to a topic, and broadcast a message.

Conclusion

This blog post has provided a complete guide to setting up web push notifications in an Ionic 4 Progressive Web App using Firebase Cloud Messaging. By leveraging callable functions and Firestore triggers, you can effectively engage your users with timely and relevant updates. Remember to consider the limitations of web push notifications on iOS Safari. When in doubt consult the firebase documentation for your specific platform.

Keywords: Ionic 4, Firebase Cloud Messaging, Web Push Notifications, AngularFire, Progressive Web App