How can I do push notifications in an HTML5 Web application?

Question

I have a web application. I want to use the HTML 5 inbuilt notifications API to do push notifications from the server when the user is on a particular page. Is it possible?

Answer 1

You can do real push notifications with Web apps today in Chrome using Service Workers and PushManager from the W3C Push API .

See the article Push Notifications on the Open Web for a step-by-step how-to and code snippets you can use. Here's a diagram from that article that explains what the UI around it looks like.

An implementation of the Push API has already landed in Firefox too; it's targeted for shipping in November 2015 in Firefox 42. And Microsoft has indicated that the Push API is also under consideration for implementation in Edge team as well.

Below is a simple code example, borrowed from MDN.

this.onpush = function(event) {
  console.log(event.data);
}

navigator.serviceWorker.register('serviceworker.js').then(
    function(serviceWorkerRegistration) {
        serviceWorkerRegistration.pushManager.subscribe().then(
            function(pushSubscription) {
                console.log(pushSubscription.subscriptionId);
                console.log(pushSubscription.endpoint);
            }, function(error) {
                console.log(error);
            }
        );
    }
);

Answer 2

It depends on what you want to achieve:

• if you want to display a push notifications to the user while is surfing your website you can use the Web Notifications API , to give the notification a "native" style; you may also use a technology like SSE or WebSockets to push the notification from your server to the client
• if you want off-site push notifications (that are delivered even when the user is not on your website) you should use a combination of Service Workers and Push API to trigger the offline event and use the Notifications API to display the notification (see my answer )