Using MinChat webhooks to implement push notifications

Using MinChat webhooks to implement push notifications

Welcome to our tutorial on using MinChat webhooks to implement push notifications!

In this tutorial, we will be using an app based on a simple Express server and the frontend we built in a previous tutorial on how to build in-app chat with React.

We will show you how to set up a route on your server to listen for POST requests from MinChat's webhooks, enable webhooks on the MinChat dashboard, and use the information sent by MinChat to notify your users. Let's get started!

Table of Content

Setting up 

This tutorial uses an app based on a simple Express server.

const express = require('express');
const app = express();
const server = app.listen(3000);

For the front-end, we are going to use the front end we built in the tutorial on how to build in-app chat with React

The source code for the front-end can be found on github.

inbox screenshot

To begin with, we will set up a route on the server for MinChat's webhooks to interact with.
We're going to create a route on our server that listens for POST requests at /message-received. 
And if you're working on this locally, don't worry - you can use ngrok to let incoming webhooks play nice 
with your app and allow incoming webhooks to interact with your app.

app.post('/message-received', (req, res) => {
 res.status(200).send("OK");
});

Enabling webhooks

Webhooks are enabled on the MinChat dashboard. You can find the webhooks page by clicking on the  "Webhooks" tab.

Because the express server is running locally, the base URL for the locally running app is generated by ngrok. You can reference our guide on [how to setup Ngrok for local webhook testing](https://minchat.io/blog/how-to-integrate-minchat-sdk-with-ngrok-for-local-webhook-testing). Keep in mind that the URL generated by ngrok changes each time it is run, so you will need to update the dashboard accordingly.

We want to be notified when a message is sent, so insert the URL in the Message Sent event section.

Webhooks dashboard

Whenever a user sends a message, MinChat will send a POST request to our endpoint at `/message-received` with all
of the information about the message. We can then use this information to notify the user through our front-end depending on our architecture.

Handling the webhook

When a message is sent, MinChat will send a POST request to our endpoint at `/message-received` with the following payload:

{
  "sent_by":{
     "id":"639575b2c280a7001e892906",
     "name":"Sam",
     "username":"sam",
  },
  "sent_to":[
     {
        "id":"289575b9b280a7001e892956",
        "name":"Fred",
        "username":"fred",
     }
  ],
  "chat_id": "63d3e12d669fc928b3d78f80",
  "text":"Hello there!"
}

Pushing the notification

The process of pushing notifications from our express server to the front-end will depend on the architecture of the front end. Whether we are working with a web-based front-end, a cross-platform mobile app, or a native mobile app will determine the approach we use to send the notification.

It's important to consider the specific technology being used in order to ensure the most efficient and effective method of delivering notifications. With the right approach, we can seamlessly and easily push notifications to the front-end, enhancing the user experience and keeping them informed and engaged.

Notifications on the web

The Web Notifications API is a browser API that allows websites to display notifications to the user outside of the website context. It allows websites to send notifications even when the website is not currently open in the browser.

The notifications can be displayed as pop-up notifications in the browser or as notifications in the operating system's notification center, depending on the browser and operating system being used.

The Web Notifications API is supported by most modern browsers, including Google Chrome, Mozilla Firefox, and Apple Safari. It can be used to send various types of notifications, such as alerts, messages, and updates, to the user in a non-intrusive way.

Firebase Cloud Messaging 

The Firebase Cloud Messaging JavaScript client is a highly supported alternative to the Notifications API that works on all browsers that support the Push API and is the method used to handle push notifications on Android devices. If we were to implement this in our app, we would utilize the Firebase Cloud Messaging JavaScript client, which can be found in the official documentation based on your specific setup.

There are also third-party clients available, but regardless of which client you choose, you will need to register your app in order to use it. This is a reliable and well-supported option for handling push notifications, making it a great choice for enhancing the user experience and keeping them informed and engaged.

Apple Push Notification Service 

In order to push notifications, iOS requires an app to be running natively, as web apps are unable to send notifications from within a browser. While it is possible to use Firebase Cloud Messaging in a native iOS app, it would still rely on Apple's own Apple Push Notification Service for notifications. If your app runs natively, it may be advantageous to use Apple Push Notification Service directly instead of Firebase Cloud Messaging.

It's also possible to handle notifications server-side using Apple Push Notification Service, but keep in mind that your app will need to be proficient in either Swift or Objective-C or have a way to bridge the gap for your framework.

Additionally, you'll need to register your app with Apple Push Notification Service in order to make use of this service. Overall, utilizing Apple Push Notification Service can be a powerful tool for delivering notifications to iOS users and enhancing the user experience.

Notifications in React Native

React Native has the ability to utilize either Firebase Cloud Messaging or Apple Push Notification Service for push notifications. Libraries like React Native Push Notifications can handle both, and there are also cross-platform services such as Expo Push Notifications and OneSignal that can be used. 
It's great to have options when it comes to push notifications, and being able to choose between different services and libraries allows us to find the best solution for our specific needs and project goals. With the right approach, we can effectively and efficiently deliver notifications to our users and enhance their experience.

Notifications with Swift

Swift], developed by Apple, uses the Apple Push Notification Service to send notifications natively, following the Apple Push Notification Service documentation to do so. To push notifications on Android devices, you can add Firebase and subsequently Firebase Cloud Messaging to your Swift app. This allows you to utilize the best notification service for each platform, ensuring that you are able to deliver notifications effectively and efficiently to all users.

With the right approach and tools, you can easily and seamlessly send notifications to your users, enhancing their experience and keeping them engaged.

Notifications with Kotlin

Kotlin works exceptionally well with Firebase Cloud Messaging, thanks to its interoperability with Java which makes the process for plain Java apps similar. With Kotlin/Native, this interoperability is extended to Swift and Objective-C, allowing you to use the Apple Push Notification Service documentation to implement iOS notifications directly.

This versatility and compatibility make Kotlin a great choice for delivering notifications to users on a variety of platforms. Whether you are targeting Android or iOS devices, you can use the most suitable notification service to ensure that your users receive timely and relevant notifications. With the right approach, you can enhance the user experience and keep them engaged and informed.

Notifications in Flutter

Flutter is a powerful tool that can handle notifications using both Firebase Cloud Messaging and Apple Push Notification Service. As a Google product, it integrates smoothly with Firebase Cloud Messaging. However, if you prefer to use a different method for handling iOS notifications, you can utilize a native Apple Push Notification Service package to get the job done.

This flexibility and versatility make Flutter a great choice for delivering notifications to users on a range of platforms. Whether you choose to use Firebase Cloud Messaging or Apple Push Notification Service, you can find the solution that best fits your needs and project goals.

By using the right approach and tools, you can easily and effectively send notifications to your users, enhancing their experience and keeping them engaged and informed.

Conclusion

Congratulations, you have successfully implemented push notifications using MinChat webhooks! With this feature, you can now notify your users whenever they receive a new message in real-time, making their experience with your app even more seamless and enjoyable. We hope you found this tutorial helpful and that you continue to explore the capabilities of MinChat and webhooks to enhance your app. Thank you for following along!