Back to Top

How to receive push notification in your web browser

Updated 13 October 2017

As all developers know we can push notifications in our mobile device even when our app is not running.

We can do same in our web browser too.

How is it possible to get notified even when our web page is not running in our web browser.

There is a simple concept known as Service Worker. These service worker are like all time running observers which waits for notification. They work on behalf for your website which shows notification to you even when your site is not running.

We know that today we have email, sms, newsletters and many more medium to connect to our users but still we need more better way to connect to our users.

Start your headless eCommerce
Find out More

Every technique have their own pros and cons. If we talk about Web Push notification, then there is one biggest advantage of web push notification. User gets immediately notified as when he/she opens his/her web browser. It is the quickest way to get notified.

How to implement this feature in your webpage.

You just have follow these simple steps to enable push notification on your web browser.

  1. Register Service worker
  2. Get GCM WebDesigned to work with the SSL certificate websites that means or FCM API key and create web app manifest.
  3. Link manifest to your browser.

Step 1: How to Register service worker in web browser.

        if ('serviceWorker' in navigator) {
            navigator.serviceWorker.register(sw.js).then(function(reg) {
                    userVisibleOnly: true
                }).then(function(subscription) {
                    subscriber_id = subscription.endpoint.split("/").slice(-1)[0];
                    endpoint = subscription.endpoint;
                    // This is custom method which you will have to create yourself. 
                    // Hint: You can save endpoint detail in your db for later use
            }).catch(function(error) {
        } else {

Step 2: Goto FCM console and create a project. Create manifest for your web site.

     "gcm_sender_id": "YOUR_GCM_SENDER_ID",

Filename: manifest.json

Step 3: Link Manifest to your web site.

<link rel=manifest href="manifest.json">

Service worker content:

self.addEventListener('push', function(event) {
    fetch('get_data.json', {
        mode: 'cors'
    }).then(function(response) {
        return response.text();
    }).then(function(ret_content) {
        dataa = JSON.parse(ret_content);
        return self.registration.showNotification(dataa.title, {
            body: dataa.body,
            icon: dataa.icon,
            vibrate: 1,
            data: dataa
self.addEventListener('notificationclick', function(event) {
    var url =;
            type: 'window'
        }).then(function(windowClients) {
            if (clients.openWindow) {
                return clients.openWindow(url);

get_data.json returns json data which will be used by service worker.

To push you just need to hit a curl command:
PHP code:

	$fields = array(
			'to'           => USER_REGISTERED_ID,

		$fcm_key = "YOUR_FCM_API_KEY";

		$headers = array(
			'Authorization: key=' . $fcm_key,
			'Content-Type: application/json',
		$ch = curl_init();

		// Set the url, number of POST vars, POST data
		curl_setopt($ch, CURLOPT_URL, $url);
		curl_setopt($ch, CURLOPT_POST, true);
		curl_setopt($ch, CURLOPT_HTTPHEADER, $headers);
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

		curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
		curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($fields));
		$response = curl_exec($ch);

You can visit Push Notification demo for working demo of push notification.

Note: Web push notification works only in localhost and SSL https enabled sites.


That’s all for how to receive push notification in your web browser, still have any issue feel free to ask query.
You can comment or raise a ticket.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*

Be the first to comment.

Back to Top

Message Sent!

If you have more details or questions, you can reply to the received confirmation email.

Back to Home

Table of Content