Introduction to Push Notifications

Pulling your web app one step closer to native apps

Ferenc Almasi
Feb 27 · 4 min read
Push notifications coming to your mobile
Push notifications coming to your mobile
Photo by Jamie Street on Unsplash

Push Notifications are a great way to stay in touch with your userbase. It takes your webapp one step closer to native desktop and mobile apps.

These notifications can be triggered either by your running app or even from your server when your app is not running. The API requires the user’s permission so you can be sure you only send notification to those who really want them.

They are working on top a Service Worker, a special type of web worker whose purpose is to make your app usable when users are offline. So in order to use push notifications, you have to have a service worker in place. After establishing a service worker we can go ahead and check for support and user permission.


Checking Support and Permission

If we check support on caniuse, we can see that the notification API is not yet widely adopted, it’s currently sitting at 78%.

Support on caniuse
Support on caniuse

This is why we need to check whether the browser supports it. Luckily it can be done with a single if statement:

As you can see, we also need to check for the presence of since notifications are sent through them. Apart from support, we also need to check for permission, since we need to get user permissions to show notifications:

If the first if statements have been fulfilled, we can start sending notification to the users.


Sending Notifications

As mentioned in the beginning of this article, to send notifications we have to have a registered. To show notifications, we will need to use the service worker registration object:

After registration and checking for support/permission, we can call to request the registration object from the service worker, then we can send out our very first push notification:

sending push notification
sending push notification
Make sure you test it with a webserver

Looks good but nothing fancy so far. Let’s add some more options.

Adding More Options

For adding options, we can create a new object and add it as a second parameter to :

In this case, the first parameter becomes the title. For a full list of available options, please see the documentation on MDN. There are plenty of useful properties you can pass, such as:

  • : the vibration pattern used for mobile devices
  • : a boolean specifying whether the notification is silent or not
  • : an arbitrary data containing any value so that you can identify which notification was interacted with
  • : an array of available for the user to choose from, which we will look into right now
Push notification with the provided options

Adding Actions

If we want the user to interact with our push notification we need to add an object to our options. Adding the following object will add two new buttons to the notification:

There are three properties you can use here:

  • : used for indentifying the action the user takes
  • : this will be the text on the button
  • : in case there’s not enough space for the title an icon will be displayed instead
Adding buttons to push notifications
Adding buttons to push notifications
Buttons on push notification

Listening for Events

Last thing to do is to listen when the user clicks one of the buttons so we can take actions accordingly. For that, we need to attach an event listener inside the Service Worker:

Adding the above lines into (the service worker which we have registered) will log out the emitted event:

Notification event object
Notification event object

Inside the , we have access to the which can tell us which button was clicked by the user.


Summary

Now you can send notifications to users whenever it is suitable. It’s a great way to keep in touch with your users, increase engagement and deliver updates right into their devices. Users can opt-in and out-out any time and the number of options you can provide for your notifications can make your content rich as well as tailored to your users.

Now comes the hard part: making good business decisions and figuring out the what, when and how. What you should notify users about, when is the right time to notify them (don’t do it in the middle of the night) and how frequent your notifications should be. The answers to these questions will differ for each application so the best way is to start experimenting right now.

JavaScript in Plain English

Learn the web's most important programming language.

Ferenc Almasi

Written by

Frontend dev with a passion for beautiful code and simple yet attractive designs. Get in touch by saying hello@allma.si or visit allma.si directly 👋

JavaScript in Plain English

Learn the web's most important programming language.

More From Medium

More from JavaScript in Plain English

More from JavaScript in Plain English

More from JavaScript in Plain English

32 funny Code Comments that people actually wrote

10.2K

More from JavaScript in Plain English

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade