JS Nation

JSNation 2023

<p>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.</p>

Web Push Notifications Done Right

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 a 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 notification that came to either our or our user's device and it has title. Actually, this is the only required component of a notifications API notification object, but definitely you want to use more components of it, like body. This is actually main text of the notification. Also, many platforms support relatively small, at least by specification. Title component called icon that is normally placed somewhere close to title and body. Then actions, all platforms support at least generic action when users click or tap on the notification bubble. And some platforms support even multiple set of the actions where you provide name, icon, and actually what to do. You write the code yourself, of course. And some platforms support larger graphical component called image in notification API. These are pieces of information we send as developers or business owners. And also there are some components provided by the system or like operating system itself because we want to let users know where this notification came from and maybe they can take some extra actions. This is why, first of all, we talk about web push notifications. This is why there is always icon of the browser where the application was running. Also there is origin where this notification came from and set of, let's say, extra actions, either as a menu item or three dots item expanded to some extra actions. And it's for the users to react somehow on, for example, unwanted notification. So they can either block the sender or the browser or notifications in general. That really depends on a particular platform, this set of the features. So this is anatomy of web push notification, 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 very important advantage. It works regardless of the application state. So once subscribed, users can close application tab, they can close the browser, notification will arrive anyway. Of course, this is because modern browsers, they always have some ground service component that is always on duty. This is how all this works. Compared to older or conservative or traditional ways to reach out to our users, for example, web 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 delivery channel is completely free, we cannot even say how many times cheaper, because we cannot divide by zero. 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 messages immediately, of course, after your users 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. 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, first of all, 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, right? If we are not in focus mode or not in D&D 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 request 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. So the click or some other action from user side is required. And actually you have only one chance literally 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 like permission request dialogue, show your own UI component like snack bar or dialogue or whatever, where you provide all information about your subscription, about let's say your messaging channel, like what kind of content are going to send, frequency and of course, what kind of way to unsubscribe from these messages. And only then if user is completely aware and fully agree and they click like button I do agree, then call this permission request dialogue and then subscribe. And that's really good to separate these two pieces in your code, because like this notification permission dialogue will be called implicitly after you try to just subscribe user to push notifications, but you can do it explicitly and then you have better flexibility to let's say have plan B or plan C if user is blocking or dismissing your dialogue. 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 web push API for mass like broadcast message to all users. Keep it only for concrete users, for concrete tasks like check-in is available, new messages arrived, 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 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 the latest research shows that emojis are working better for engagement. This is why as an exercise, I did improvement of generic notification from 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. And yeah, we have set of services that can simplify our lives in setting everything up. Like this one, a 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. Thank you very much.
