Guide to Display Browser Push Notification in PHP Website

Nowadays, there are so many ways for businesses to reach out to their online audience. Though, businesses still need to make sure that they’re using the right methods. Aside from same-old email marketing and social media marketing, another good way to reach out to customers is through browser push notification.

A browser push notification is still a great way for sending a message to a target audience in either a web application or website. We as a PHP development company use browser push notifications on applications for keeping your users notified even when they’re on another tab and that helped our clients increase their mobile app retention ratio as well as benefit their business sales.

Today, we’ll implement browser push notification in PHP website to send custom PHP push notification to increase user interactions.

Let’s Get Started

Create a file with webnotification.html for the output view.

hand icon Now, first generate notification pop up through notification button.

<div id="container">
    <h1>Space-O Browser notification demo</h1>
    <h4>Generate Notification with tap on Notification</h4>
    <a href="#" id="notificationlabel" class="button">Notification</a>
Copy to Clipboard

hand icon Next, set CSS for Notification window.

<style type="text/css">
    .hover {
        background-color: #cc0000;
    #container {
        margin: 0px auto; 
        width: 800px;
    .button {
        font-weight: bold;
        padding: 7px 9px;
        background-color: #5fcf80;
        color: #fff !important;
        font-size: 12px;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        cursor: pointer;
        text-decoration: none;
        text-shadow: 0 1px 0px rgba(0, 0, 0, 0.15);
        border-width: 1px 1px 3px !important;
        border-style: solid;
        border-color: #3ac162;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -moz-inline-stack;
        display: inline-block;
        vertical-align: middle;
        zoom: 1;
        border-radius: 3px;
        box-sizing: border-box;
        box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.1) inset;
    .authorBlock {
        border-top: 1px solid #cc0000;
Copy to Clipboard

hand icon Adding Script

<script type="text/javascript">
Copy to Clipboard

hand icon Define array for text of notification.

var blogs = [    ["Space-O",""],
Copy to Clipboard

hand icon To get random text from array, create following function.

    var x = Math.floor((Math.random() * 5) + 1);
    var title=blogs[x][0];
    var desc='Most popular blogs.';
    var url=blogs[x][1];
}, 200000);
Copy to Clipboard

hand icon Use AddEventListener to create notification on current screen.

document.addEventListener('DOMContentLoaded', function () {
    if (Notification.permission !== "granted") {

    document.querySelector("#notificationlabel").addEventListener("click", function(e) {
        var x = Math.floor((Math.random() * 5) + 1);
        var title = blogs[x][0];
        var desc = 'Most popular blogs.';
        var url = blogs[x][1];

function notifyBrowser(title, desc, url) {
    if (!Notification) {
        console.log('Desktop notifications not available in your browser..');
    if (Notification.permission !== "granted") {
    else {
        var notification = new Notification(title, {
            icon: '',
            body: desc,
Copy to Clipboard

hand icon Remove the notification from notification center once clicked.

notification.onclick = function () {;
Copy to Clipboard

hand icon Callback function when the notification is closed.

notification.onclose = function () {
    console.log('Closed notification popup');
Copy to Clipboard

That’s It!

Have an App Idea That Solves The Actual Problem?

Want to validate your app idea? Want to get a free consultation from an expert?

Cta Image

Although, it’s possible to do further modifications, but the implementation part might look tricky. Therefore, to implement this feature, you can hire PHP programmers, and display the contents that interests them to improve user interactions in your business website.

While push notifications started from the mobile industry, but this technology has become a widespread in desktop apps as well. These are great for keeping users engaged and for further improving user-engagement you can embed videos that are relevant to the content. For this to work you can refer our guide to use YouTube API to upload video in PHP website.

Bhaval Patel

Written by

Bhaval Patel is a Director (Operations) at Space-O Technologies. He has 20+ years of experience helping startups and enterprises with custom software solutions to drive maximum results. Under his leadership, Space-O has won the 8th GESIA annual award for being the best mobile app development company. So far, he has validated more than 300 app ideas and successfully delivered 100 custom solutions using the technologies, such as Swift, Kotlin, React Native, Flutter, PHP, RoR, IoT, AI, NFC, AR/VR, Blockchain, NFT, and more.