Push notifications have come to the web! In this tutorial, I’ll show you how to create a full-stack application that is able to send and receive web push notifications.

Push notifications are everywhere, from news and messenger apps to fitness and health applications. They are a great tool for increasing user engagement, having a click rate that is 7 times higher than that of email marketing. But be careful not to send too many irrelevant notifications. As this report shows, 50% of app users find push notifications annoying.

With that being said, in this tutorial, I’ll show you how to create your own web push notifications, using your own backend with NodeJS and TypeScript, and vanilla JavaScript on the frontend.

I’ll go through all the steps you need to take to set up the backend and frontend, but you can skip those parts of course if you’re interested in adding push notifications to an existing project.

I uploaded the final code to this GitHub repository.

What you will learn

I’ll briefly explain what you need to know about web push notifications before diving into the tutorial, where we’ll build a full-stack web application that allows us to broadcast push messages to its users.

That’s what we will implement in this tutorial. We’ll have another look at this diagram later on.

The technology we’ll be using is:

• JavaScript on the frontend
• NodeJS on the backend (with TypeScript (optional))
  • ExpressJS for the API
  • MongoDB for storing data (using mongoosejs)
  • web-push for sending push messages

Prerequisites

You must be familiar with JavaScript in the frontend and ideally in the backend as well. I included a GitHub repository and commits for each step, so following along is a little easier.

You don’t need to have experience with service workers but I recommend you learn more about this topic before working on serious projects.

Table of Contents

• What are web push notifications?
• The technology behind web push notifications
  • Notification API
  • Push API
  • Service worker
  • Browser vendors: The middlemen for sending out push messages
• Tutorial
  • Project setup
  • Subscribe to web push notifications
  • Send the subscription to the backend
  • Save the subscription
  • Send web push notifications to all clients
• Customize your notification
• Browser support for web push notifications
• Conclusion

What are web push notifications?

Web push notifications are notifications that the user receives through the browser. These notifications were previously exclusive to native web and desktop applications, but can now be used by websites as well.

To receive a web push notification, the user doesn’t need to have the browser or the website open, thanks to the service worker technology, which is an important part of Progressive Web Apps.

The technology behind web push notifications

As the name already gives away, web push notifications are a combination of web push and notifications. You also need to have an active service worker to make this work.

Notification API

The notification API enables websites to show push notifications to the user. You can use this in isolation without the push API if you want to display notifications while the user is browsing your site.

You can display a notification with the following code:

if ('Notification' in window) {
  if (window.Notification.permission === 'granted') {
    new window.Notification('Time is over!');
  }
}

Example code that displays a simple notification to the user. You need to have requested permission first with window.Notification.requestPermission

Push API

The push API allows web apps to receive messages from a server, even when the website is not open. We can use this API to receive messages and then display them, using the notification API.

This API is only available through service workers, which allow code to be executed in the background when the app is not open. I’ll explain how to set up a service worker for push notifications in the tutorial, but in case you want to learn more about them, I wrote a few articles on that topic. I recommend that you start with the introduction to the JavaScript API of service workers.

Service worker

Service workers allow code to be executed in the background without user interaction. That’s exactly what we need for push notifications since they are supposed to show up even when the user isn’t browsing our website.

Browser vendors: The middlemen for sending out push messages

Thanks /Chaphasilor for pointing out that I was missing this!

We need to have our own server for storing and sending out push notifications, but our server can’t send the push messages directly to all clients.

Instead, browsers that support web push notifications offer push services, which are completely free of charge. The subscription object that we will send to our backend will contain an endpoint field, which points to the URL of the corresponding vendor.

You can read more about browser vendors in the docs of Mozilla (autopush) and Chrome (Firebase Cloud Messaging).

We’ll use the web-push package that handles the communication to those vendors for us.

Tutorial

Let’s see how this works in practice. As part of the tutorial, we’ll write a full-stack application with a simple JavaScript client that can subscribe or unsubscribe from push notifications. The frontend will also be able to trigger a notification that will be sent to all subscribed clients.

If you want to see the final application code, I uploaded it to this GitHub repository. I included the exact commit of this repository for every step, so you can check if your code matches mine in case you run into any issues.

The steps of this tutorial are the following:

• Project setup
• Subscribe to web push notifications (1)
• Send the subscription to the backend (2)
• Save the subscription (3)
• Send web push notifications to all clients (4) (5)

#javascript #typescript #node #web-development #programming