Web Push Notifications Done Right

Rate this content
Bookmark

Finally, Web Push API is available in all major browsers and platforms. It's a feature that can take your users' experience to the next level or... ruin it! In my session, after a tech intro about how Web Push works, we'll explore implementing smart permission request dialogues, various types of notifications themselves, and communicating with your app for more sophisticated scenarios - all done right, with the best possible UX.

11 min
05 Jun, 2023

AI Generated Video Summary

Let's talk about web push notifications and their benefits. Web push notifications have higher opt-in and click rates compared to traditional methods. The web push API should be used responsibly, with subscription requests initiated only after explicit user action. Improve engagement by using emojis in notifications. Connect with the speaker on LinkedIn for more information about the web push API.

1. Introduction to Web Push Notifications

Short description:

Let's talk about web push notifications. I'll share tips on using this powerful API. Web push works regardless of the application state, allowing notifications to arrive even if the app or browser is closed.

Hello, dear developers. Let's talk about web push notifications. In this short session, I'll share some tips and tricks on how to use this extremely powerful API for good. My name is Maxim Salnikov, I live and work in Oslo, Norway, I do developer engagement in Microsoft, and I'm a big, big fan of the developer communities.

I run few meetups, conferences, and you often find me presenting about web and cloud technologies on the stages of meetups and conferences. And you know what, folks? Let's stay on this slide for a couple more minutes because using this set of information pieces, I want to explain or remind you what is web push notification.

First of all, let's pretend that this is a notification that came to either our or our user's device, and it has a title. Actually, this is the only required component of a notification's API notification object, but definitely you want to use more components of it, like a body. This is actually main text of the notification. Also, many platforms support relatively small, at least by specification, graphical components, called icons that is normally placed somewhere close to the title and body. Then, actions. All platforms support at least generic actions when users click or tap on the notification bubble, and some platforms support even multiple set of the actions, where we provide name, icon, and actually what to do. You write the code yourself, of course. Some platforms support larger graphical component called Image in Notification API. These are pieces of information we send as developers or business owners. Also, there are some components provided by the system or operating system itself, because we want to let users know where this notification came from, and maybe they can take some extra actions. First of all, we talk about Web Push notifications. This is why there is always an icon of the browser where the application was running. Also, there is an origin where this notification came from, and a set of, let's say, extra actions, either as a menu item or a three dot item expanded to some extra actions. It's for the users to react somehow on, for example, unwanted notifications. They can either block the sender, or the browser, or notifications in general. That really depends on a particular platform, this set of features. This is anatomy of web push notifications, if you wish.

Then, let me provide some motivations. Why using web push notifications is a really nice way to reach out to your users. First of all, compared to all other ways we can organize communication between us, as developers or business owners, and users of our web app, web push has a very important advantage. It works regardless of the application state. So once subscribed, users can close application, application tab, they can close the browser, notification will arrive anyway. Of course, this is because modern browsers, they always have some background service component that is always on duty. This is how all this works.

2. Benefits of Web Push Notifications

Short description:

Compared to traditional methods like SMS, web push notifications have higher opt-in and click rates. They are also more cost-effective due to the free delivery channel. Additionally, with 80% of Internet users now able to receive web push notifications, the potential reach is significant.

Compared to older or conservative or traditional ways to reach out to our users, for example, Push has way higher opt-in and click rates, compared to other traditional ways to reach out to users like, for example, SMS, it's way cheaper. And actually, since the delivered channel is completely free, we cannot even say how many times cheaper because we cannot divide by zero, right?

Then, I hope that my previous slide convinced you that the format itself is quite rich with different ways to express what we want to deliver to the user. And after all, it's at least relatively easy to set everything up and you can start sending message immediately. Of course, after your user's subscribed. And last but not least, motivation point is this one. After arrival of iOS 16.4 and the latest macOS, we now have 80% of Internet users who are technically can receive web push notifications. I think this is very impressive number.

3. Web Push Subscription and Sending Notifications

Short description:

Web push API is a last resort for reaching users. Browsers are protective, so don't annoy users with unwanted notifications. Initiate subscription requests only after explicit user action. Show a soft prompt with information about your messaging channel before requesting permission. Separate subscription and permission request to handle user interactions. Be transactional and avoid mass broadcast messages. Use the notification API format to send relevant information and clear call-to-action. Emojis can improve engagement.

Now, some tips and tricks. First of all, web push as a flow contains two separate parts. Subscription, and then sending notification itself. Let's talk about subscription. Politeness is a must there. All modern browsers are extremely protective in that sense. They don't want to annoy or bother users by some unwanted notifications themselves, but even requests to subscribe to notifications or allow showing notifications. This is why it might sound strange from me, like from ambassador of web push API. But dear developers consider different alternatives.

First, literally think about web push API like about last resort for you to reach out to this particular user. Because we all know how push notifications work in general. If we are not in focus mode or not in DND mode, you will be disrupted as a user by this pop up like message bubble or something like this. Then now it's only technically to initiate subscription requests after explicit action from the user. So don't even try to subscribe users somehow in the background. No, it will just not work even technically. The click or some other action from the user side is required.

Actually you have only one chance to get this permission to show notifications from the user. Because once they hit block or even dismiss few times, your notification subscription request will not be shown, will be blocked by the browser itself. This is why it's really good idea to show soft prompt. Before calling this API method with show permission request dialog, show your own UI component like snackbar or dialog or whatever, where you provide all information about your messaging channel, what kind of content are you going to send, frequency, and of course what kind of way to unsubscribe from this messages. And then only then, if user is completely aware and fully agree and they click like button I do agree, then call this permission request dialog and then subscribe. And that's really good to separate these two pieces in your code because this notification permission dialog will be called implicitly after you try to just subscribe user to PushNotifications, but you can do it explicitly and then you have better flexibility to have plan B or plan C if user is blocking or dismissing your dialog.

Now, your best notification, time has come to send something to the user. So be transactional, try not to use, my personal ask for you never use a Push API for mass like broadcast message to all users. Keep it only for concrete users for concrete task like checking is available, new messages right, something like this. Of course, then it will be timely, personal and relevant. And yeah, you have all possibilities of notification API format to send information itself, not just hint about something is updated. And yeah, again, you have all possibilities to contain to provide very clear call to action or even set of call to actions if actions are supported by this platform. And after all, we have only a few pixels on the screen. So try to not repeat yourself and latest research shows that emojis are working better for engagement.

4. Improving Generic Notification and Call to Action

Short description:

I improved a generic notification from my imaginary airline using the push notification API format to the maximum. Web push notifications are powerful and convenient for users on all major platforms. It's important for developers to not misuse or overuse this API. I created a small app for testing web push notifications on multiple devices. Find me on LinkedIn to stay connected and ask me about the Web push API.

This is why as an exercise I did improvement of a generic notification from my imaginary airline about checking is available to, let's say, using a format of push notification API to the maximum. This is why I tried to remove all repeated components and tried to place as much information as possible and tried to provide very concise call to action.

Let's sum up. Web push feature is very powerful and very convenient for the users, currently available on all major platforms. You remember that 80% of Internet users can technically receive Web push notifications now. That's very important for us developers to not misuse, to not overuse this very powerful API.

Yeah, we have a set of services that can simplify our lives in setting everything up. Like this one. Small app I created for you to start testing Web push notifications immediately on multiple devices and on the same website you'll find extended presentation on the topic with more technical details, both video recording and slides. And my main call to action for you let's stay connected. Find me on LinkedIn and ask me about Web push API.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
High quality video encoding in browsers have traditionally been slow, low-quality and did not allow much customisation. This is because browsers never had a native way to encode videos leveraging hardware acceleration. In this talk, I’ll be going over the secrets of creating high-quality videos in-browsers efficiently with the power of WebCodecs and WebAssembly. From video containers to muxing, audio and beyond, this talk will give you everything you need to render your videos in browsers today!
JSNation 2022JSNation 2022
23 min
WebHID API: Control Everything via USB
Operational System allows controlling different devices using Human Interface Device protocol for a long time. With WebHID API you can do the same right from the browser. Let’s talk about the protocol features and limitations. We’ll try to connect some devices to the laptop and control them with JavaScript.
JSNation 2022JSNation 2022
28 min
MIDI in the Browser... Let's Rock the Web!
If you own an electronic music instrument made in the last 3 decades, it most likely supports the MIDI protocol. What if I told you that it is possible to interact with your keytar or drum machine directly from your beloved browser? You would go crazy, right? Well, prepare to do so…With built-in support in Chrome, Firefox and Opera, this possibility is now a reality. This talk will introduce the audience to the Web MIDI API and to my own WEBMIDI.js library so you can get rockin' fast.Web devs, man your synths!
React Advanced Conference 2023React Advanced Conference 2023
23 min
Superpowers of Browser’s Web API
When writing code for the Web, there are a lot of capabilities that are offered out of the box by our browsers. If you ever wrote a File Upload component, used timers and intervals, interacted with the DOM, or stored something in the Local/Session Storage, you had to go to the MDN’s Web API docs, to find some relevant information on how to implement that code.
In this session, we will delve into the exciting world of browser Web APIs that are not so commonly used (although they should be) and explore their incredible capabilities 🚀
All these features offer new opportunities for creating immersive web experiences that can help businesses grow and connect with customers.
So if you are the kind of an engineer who wants to stay ahead of the curve when it comes to web development, learn how Intersection Observer, Background Sync API, Screen Wake Lock API (and many more) can help you create better web applications that will keep users engaged and coming back for more!

Workshops on related topic

Node Congress 2022Node Congress 2022
57 min
Writing Universal Modules for Deno, Node and the Browser
Workshop
This workshop will walk you through writing a module in TypeScript that can be consumed users of Deno, Node and the browsers. I will explain how to set up formatting, linting and testing in Deno, and then how to publish your module to deno.land/x and npm. We’ll start out with a quick introduction to what Deno is.