This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

CloudwaysCDN — a powerful solution that offers superior performance and satisfied global audience for your business. Read More

Adding Push Notification in PHP With OneSignal and Toastr

Updated on  7th February

4 Min Read
Reading Time: 4 minutes

In the previous tutorial, I developed a chat application using Pusher on my hosting for PHP and discussed the process of setting up a Pusher account and testing the responses of the app. In this tutorial, I will show you how to add browser and push notification in a PHP chat app. I will use Toastr.js for browser notifications and OneSignal API for push notification in PHP.

Push Notification in PHP With OneSignal

Chat App Follow Up

Let’s recall the previous tutorial. I included AJAX and pusher.js libraries to work with the messages and the related response. The messages were sent on the click event of the Enter key. Pusher authenticated the messages and and then pass on to the client in the AJAX request.

In the new version, when you get the messages while the app is active, you can set Toast notifications for a quick look at the message.

Here is the AJAX call which takes the PHP file URL and the message data:

Now when the message is displayed to the user, a Toast notification is also displayed.

Show a Toastr with toastr.js

Toastr is a Javascript library for non-blocking notifications. It requires jQuery (I’ve already added jQuery files in previous scripts). Now to add Toastr notifications to the chat app, first add these two scripts in the head tag.

Next, I will add the Toastr method in the binding event of the received message which is my_event. Remember I have got the response in the data variable and append it to the message_display div.

Now when you send a message to anyone, it shows the Toastr to the recipient. Check out the following screencap:

Show Web Push Notification For Chat Messages

Next, I’ll setup web push notification in PHP chat application we created. Here I’m going to use OneSignal API for this: for this, follow these steps:

  1. Setup the OneSignal account
  2. Add the application
  3. Get the app key and the API key

Since the account setup is simple, I will not cover it in this tutorial. If you need help, follow this guide.

When you have successfully created the account, OneSignal will give you a customized script that contains the appID. Add it into the head tag. Here is the script:

 

Once the script is added, you will see the red OneSignal icon appear at the bottom right corner of the window.

Click the icon and subscribe to the notifications. Next, for sending chat notifications to the chat app users, you need to add the send notifications functionality to the app. Basically whenever an app user sends a message, OneSignal will create a notification and sends it to all subscribed persons.

For this, you need to add the following code to message.php page. This code will use the appID and API key for authentication.The function accepts $message as an argument and curl will create the notification:

The good thing is even when you are not online and the browser tab is also closed, you will still get chat notifications through the OneSignal push notification service. Here is the PHP chat application demo that highlights the push notification functionality.

Note: As there is no login method for the user at the moment, it will NOT authenticate the user, save or retrieve message history. I might add these features in a later version of the app.

Share your opinion in the comment section. COMMENT NOW

Shahroze Nawaz

Shahroze is a PHP Community Manager at Cloudways - A Managed PHP Hosting Platform. He’s always in search of new frameworks and methods to implement them. Besides his coding life, he loves movies and playing soccer with friends. You can email him at shahroze.nawaz@cloudways.com

Create PHP websites without the worry of server management.

Deploy your PHP app on optimized PHP hosting servers.

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.