Blog Details

  • Home
  • How To Install Web Push Notifications?

Web Push Notifications have been stealing the spotlight lately. If done right, they can make for an excellent marketing channel. If you are keen to up your marketing game and want to implement web push notifications on your website, we’ve got that sorted for you.

However, there were some challenges we faced while installing web push notifications. There were issues regarding monitoring token refresh event, sending customised messages and receiving payload in service workers. We found a way around it and have listed an accurate way to seamlessly go about it.

Here’s how it works.

How To Enable ‘Sending’ Push Notifications?

Web Notifications can be seamlessly implemented with Firebase Cloud Messaging (FCM); a cross-platform messaging solution, that is reliable and free.

Please ensure that your website is SSL Certified, more commonly known as https website. First, you need to add Firebase to your app. For this, a Firebase project, Firebase SDK, and an initialization code snippet are required along with your project details.

**Step I **– In the Firebase Console, create a Firebase Project. You can click on ‘Create New Project’; else, you can ‘Import Google Project’.



**Step II **– Once you click on Add Firebase to your Web App, you will get an initialization snippet, which you can integrate into your project.


How to Install Web Push

Step III – Now, towards the top left, click on the settings icon next to ‘Overview’ and select ‘Project Settings’ and then click on ‘Cloud Messaging’. Here you will get the server key, which is to be used to send push messages.

Step IV – You have to create a manifest. JSON file that will contain the gcm_sender_id, which states that you are authorised to send messages.

how-to-install-web-push-notifications (1).png

**Step V **– Now to receive notifications you need to request for permissions for e.g. in JavaScript messaging. requestPermission method allows you to grant permission in the browser.

Step VI – This method returns a token, which is the device id of the user who is going to receive the notification. You need to save this device id into your database to send messages in the future.

Please note: You should monitor token refresh events, to ensure that you get updated token. Additionally, the device id can change when it has been deleted by the web app or when the browser data has been cleared.

This was how to enable ‘sending’ push notifications.

How To Enable ‘Receiving’ Push Notifications?

Now, to enable receive messages you need to integrate service worker in your web app. Service Worker is a JS file, which runs on the front end.

Here’s how you go about it.

Step I– You need to define Firebase messaging in your service worker.

**Step II **-Then initialize your app in this service worker by passing the sender id into it.

**Step III ** – Retrieve the instance of Firebase messaging.

**Step IV **- Use this instance with onMessage (an event that helps you to receive data and notification payload).

Curl Method can be used to trigger send message event, which will include the following parameters.

  • Device id – that was stored in the DB at step VI

  • Server Key – Generated at step III

  • Notification title – i.e. title of the message that you want to send

  • Notification body – actual message that you want to send

You’re all set to get started with push notifications. That was simple! Wasn’t it? Let us know how it worked for you by commenting below.