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.

Maxim Salnikov
Maxim Salnikov
11 min
05 Jun, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

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.

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

Install Nothing: App UIs With Native Browser APIs
JSNation 2024JSNation 2024
31 min
Install Nothing: App UIs With Native Browser APIs
You might not need as much JS as you think to accomplish common UI patterns with these new native browser APIs. Dive into new and future CSS, HTML and JS APIs that make our code leaner and faster to ship.
Pushing the Limits of Video Encoding in Browsers With WebCodecs
JSNation 2023JSNation 2023
25 min
Pushing the Limits of Video Encoding in Browsers With WebCodecs
Top Content
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!
What is "TC39: Type Annotations" aka the Types as Comments proposal
TypeScript Congress 2023TypeScript Congress 2023
27 min
What is "TC39: Type Annotations" aka the Types as Comments proposal
A deep dive into the proposal which could de-fork TypeScript and bring all us users back to being "JavaScripters, but with some TypeScript types." We'll cover the author's motives, how it could work, why now and how it is going.ort
Visualising Front-End Performance Bottlenecks
React Summit 2020React Summit 2020
34 min
Visualising Front-End Performance Bottlenecks
There are many ways to measure web performance, but the most important thing is to measure what actually matters to users. This talk is about how to measure, analyze and fix slow running JavaScript code using browser APIs.
WebHID API: Control Everything via USB
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.
MIDI in the Browser... Let's Rock the Web!
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!

Workshops on related topic

Writing Universal Modules for Deno, Node and the Browser
Node Congress 2022Node Congress 2022
57 min
Writing Universal Modules for Deno, Node and the Browser
Workshop
Luca Casonato
Luca Casonato
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.