Check out a free preview of the full Progressive Web Applications and Offline course:
The "Push API and Notification API" Lesson is part of the full, Progressive Web Applications and Offline course featured in this preview video. Here's what you'd learn in this lesson:

Mike reviews Web Push, which uses the Push API and Notification APIs to send timely updates to site visitors.

Get Unlimited Access Now

Transcript from the "Push API and Notification API" Lesson

>> Mike North: All day, we've been dealing with requests and we've gone deeper into requests than you probably ever thought you would go, right? I mean, if you came in here thinking Ajax was the primary tool of the trade, we've used Fetch just to such a high degree that you really know the ins and outs of what's going on.

[00:00:21] But that's still only one direction, right? Essentially we're telling the server what we want, and it's sending stuff back to us. So the browser has still been initiating all communication with the server. And if we think about the kinds of needs that developers have, which have caused them to want native platforms for their mobile experiences, push notifications and the ability to send something initiated at a server, that lands on a client.

[00:00:55] That is very high on the list.
>> Mike North: Luckily there is an effort to standardize this, it's a little bit fragmented right now. Web Push is the only thing even close to a standard, I mean it is a standard. Safari has its own thing, but we're gonna look at Web Push because it is gaining enough steam that it's highly likely it will become the de facto solution for this kind of thing.

[00:01:22] So at it's core, the idea here is that we can send something from a server to one or more of a user's browsers, right? So we essentially ask them for permission to push to their browsers. And part of the advantage of having the service worker installed is we have something there waiting to handle any of these events that may come through.

[00:01:49] Just like the way service workers have been operating so far. Your tab does not have to be open in order for them to get these events. And news sites really love to use this stuff these days, where they will send notifications to you, and try to re-engage you back into the site.

[00:02:08] They're trying to tell you they have something for you, click here, look at this article. And that's one of the core tenants of progressive web apps, right? You should be able to do something, put it aside. And then if the app needs you to come back or has something of interest, you should be able to come and take care of that.

[00:02:26] And this is their two components of this here. There's the act of being able to send a signal to the browser and then notifications are sort of an independent thing that you can use in response to one of those messages that lends in the browser. So we're just gonna talk about the mechanism at first.

[00:02:44] And after that, Steve's gonna go through the visual notification that comes in and how that works so nicely with Push. So part of the standard involves this concept of a push service. So here's the general idea. So we have multiple browsers, and each vendor, each creator of these browsers, they maintain, like when they add support for a web push to the browser, they will as part of that create a push service.

[00:03:16] This is a server run by the, you know Mozilla and Chrome, and like if Apple implements web push for Safari, they will have one of these as well. And essentially these serve as the queues. They serve as a gateway where you can send stuff to these things, and they're responsible for delivering that message to the appropriate individual browser.

[00:03:41] This is very closely modeled off of the way push notifications work in Android and iOS. So in general, you're going to request permission of your user to send them notifications. And what you get as a result of them granting that permission, are these objects called PushSubscriptions. And that there, that has the information that you need to prove that you're authorized to send messages to that user's device.

[00:04:14] So then next what happens is we take that PushSubscription and wrap it up package it with the message that we wish to send to that browser. We send it to the push service and then the push service is responsible for finding that browser and making sure it gets the message.

[00:04:31] The browser has to be open in order for this to work, but they don't have to be in any particular tab. And in the future it's very likely that browsers will have sort of a demon process that's always running in the background. So that even if like Chrome is closed, they have at least some small foundational piece that can be used so that people can receive these notifications at any time, right?

[00:04:56] Just like a native app would be able to send notifications at any time.
>> Mike North: So it is not too complicated, but if you dive deeper into it, it gets quite complicated. But the basic case shouldn't be too difficult. So first we need a ServiceWorkerRegistration object. This is the object that we get when we register a ServiceWorker, and within the ServiceWorker, we can access it using self.registration.

[00:05:28] And so that's, right there, that's a promise that will resolve, and then I'll give you access to this thing. So although it's not part of the standard, one of the conventions that all modern browsers now that support web push have adapted, is there's a single permission that users grant.

[00:05:49] And that enables you both to push non-visible messages that your service worker will receive. And to show visual notifications which usually are closely related to those messages. And you need the ServiceWorkerRegistration in order to make that work. So let's look at how we make use of this registration.

[00:06:14] And this is all inside the registration handler here. We have this subscribeOptions object here. And there's something called a push manager, and we ask the push manager to subscribe the user to notifications, right? And this resolves, this promise resolves to that PushSubscription. Let's look at the subscribe options here.

[00:06:43] So the first option we get is userVisibleOnly. I have a false value here, but Chrome currently, I believe only lets us register with true. Which means that we're only allowing push command that turns into something visible for the user. Now, frankly, we are able to do things that are not visible to the user, currently.

[00:07:12] And this option is part of the specs so that may evolve at some point. But just know that we have to have that value, userVisibleOnly at true for today's exercise.