How to receive push notification in your web browser

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.

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) {
                reg.pushManager.subscribe({
                    userVisibleOnly: true
                }).then(function(subscription) {
                    subscriber_id = subscription.endpoint.split("/").slice(-1)[0];
                    endpoint = subscription.endpoint;
                    save_end_point_for_later_use(reg_id,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) {
                console.log(error);
            });
        } else {
        	alert('{__("service_workers_are_not_supported_in_this_browser")}');
        }

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

   {
     "gcm_sender_id": "YOUR_GCM_SENDER_ID",
     "name": "DEMO FOR PUSH NOTIFICATION"
   }

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 = event.notification.data.target_url;
    if(url){
        event.notification.close();
        event.waitUntil(clients.matchAll({
            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);
		curl_close($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.