Browser notifications from server side using PHP

Question

Can I send browser notifications from server to subscribed users using PHP? I saw this tutorial today, but that work only from client side. I know there are services like pushcrew, but I want to develop my own using PHP and JavaScript.

My actual requirement is asking users to confirm if I can send them notifications using this code,

if (Notification.permission !== "granted")
{
   Notification.requestPermission();
}

then show notifications when I publish new article in my website.

NB: Browser support doesn't matter.

If you can get it to work, you could try this library: github.com/web-push-libs/web-push-php. I can't get it to work though, the PHP code inside the library is throwing errors even if I just use the example code on their website. — Donald Duck is with Ukraine
– Donald Duck is with Ukraine, Commented Dec 28, 2019 at 17:43

Fabian Horlacher · Accepted Answer · 2016-02-26 12:53:17Z

6

You have to trigger these notifications on the client side, so you need to get them from the PHP server to your JavaScript:

do an ajax polling every x seconds, for example with the jQuery ajax functions, and show a message if the server returned one
push the message over WebSockets, for example with Ratchet

Web Push allows you to push notification even if the user didn’t have the site open and is supported by the recent Firefox 44. It is partially supported in Chrome. For details check out the Mozilla Hacks blog.

Example with polling

JavaScript jQuery part:

function doPoll() {
    // Get the JSON
    $.ajax({ url: 'test.json', success: function(data){
        if(data.notify) {
            // Yeah, there is a new notification! Show it to the user
            var notification = new Notification(data.title, {
                 icon:'https://lh3.googleusercontent.com/-aCFiK4baXX4/VjmGJojsQ_I/AAAAAAAANJg/h-sLVX1M5zA/s48-Ic42/eggsmall.png',
                 body: data.desc,
             });
             notification.onclick = function () {
                 window.open(data.url);      
             };
        }
        // Retry after a second
        setTimeout(doPoll,1000);
    }, dataType: "json"});
}
if (Notification.permission !== "granted")
{
    // Request permission to send browser notifications
    Notification.requestPermission().then(function(result) {
        if (result === 'default') {
            // Permission granted
            doPoll();
        }
    });
} else {
    doPoll();
}

JSON server answer in "test.json" if there is a message:

{
    "notify": true,
    "title": "Hey there!",
    "desc": "This is a new message for you",
    "url": "http://stackoverflow.com"
}

JSON server answer in "test.json" to not show a message:

{
    "notify": false
}

edited Feb 26, 2016 at 12:53

answered Feb 24, 2016 at 7:40

Fabian Horlacher

1,9101 gold badge24 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Joel James Over a year ago

Your method is for custom notifications when user is active on my page. But my requirement is to use browser notifications, even when user is not active on my website.

Fabian Horlacher Over a year ago

Browser notifications only work when the page, which is sending the notifications, is open (active or in the background). Imagine how many spammers would flood your desktop if that weren't the case?

Joel James Over a year ago

You are completely wrong! Browser notifications are different. They ask your permission first, then only it will start showing notifications. No spam at all. Different permissions are required for different domains. It doesn't require web page to be active. If your browser is open it will show notifications. Please see this link - developer.mozilla.org/en/docs/Web/API/notification

Fabian Horlacher Over a year ago

"The Notifications API allows web pages to control the display of system notifications to the end user — these are outside the top-level browsing context viewport, so therefore can be displayed even the user has switched tabs or moved to a different app." developer.mozilla.org/en-US/docs/Web/API/Notifications_API

Fabian Horlacher Over a year ago

Voilà, I found what you were looking for: hacks.mozilla.org/2016/01/web-push-arrives-in-firefox-44

|

Collectives™ on Stack Overflow

Browser notifications from server side using PHP

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related