Push Notifications

[00:00:00]
>> Kyle Simpson: While we're on the topic of what can we do with these APIs, these technologies, there's a very commonly known and cited technology which is called push notifications. And I debated whether or not we were gonna integrate push notification into the app that we were gonna do today.

[00:00:20]
And I decided not to, and I'll explain why we're not gonna do push notification. But I do want to talk about what that is, because there's a lot of misconception about it. Our misconception or our negative perception of push notification is that we think push notification is a single technology.

[00:00:37]
And it's actually two technologies being used at the same time. And one of those technologies is really super useful, and the other one can be really super annoying, which is every time you show up at a website that you've never been to before, like 13 milliseconds later, they pop up a thing that says, hey, would you like to receive notifications when we post new blogs?

[00:00:57]
And you're like, no, block. Right, and we're all in this habit of just like block, block. I don't even care, don't, stop bothering me. And browsers now have settings where you can just have a blanket block across all of them, which is tragic, because there is actually some really good use for it.

[00:01:11]
But it's a terrible user experience to like throw that dialogue right in somebody's face when they literally just landed on your site. it should be more like they've engaged, they've logged in. You have an optional button they click and it says, yeah, this would be helpful, I'd like to know about it.

[00:01:26]
So they're all of those annoying, spammy usages of notifications are polluting the situation for all for the few good uses where some of us would like to have it. In my app, I'd love to be able to prompt people to ask for that, but I'm pretty sure everybody's gonna already have it blocked.

[00:01:42]
So then I can't send them any kind of notification at all about a new node or something. So we have to be careful how we use these technologies. But notification is a thing that your service worker can send to the operating system. And it can literally do that even if the page is not open.

[00:02:01]
There's a notification API where the service worker can say, I wanna pop up a little notification on somebody's screen. You can only do that if the user has, prior to that point, granted access for that. So you can't do that in a spammy way. But if you've asked for permission and now you have permission, the service worker can pop up a little prompt and you can have it say whatever you want.

[00:02:24]
It doesn't have to be anything. So it could be a notification about a Tweet or a notification about a new email, or a calendar event, or anything. Any kind of notification that you've seen on your devices, you can push those from a service worker. In addition, if your site was not open at the time that this thing was launched, you can chose that if they click on a button in that notification, that it launches your site in a tab in a browser.

[00:02:54]
So if they don't have your site open, but there's some new thing that you want them to see, you show them a notification, and then they say that's cool and they click on it, and now they're at your website. If they're already on your website you can focus them to a specific part in the app.

[00:03:06]
You can literally change the page or change the location to something that you want them to see. That's notification, and there are arguably some good use cases for it, but there's a ton of ways that that's abused and spammy. I mean, some people have even talked about taking it out of the web platform.

[00:03:24]
I hope that doesn't happen, but it's definitely not being used well. But the other part, the push part, is actually, in my opinion, much more interesting and exciting. It's enabled by the same permission, and that's why they're grouped together. Push and notification are basically the same prompt. But push is a separate thing.

[00:03:47]
Push is how your service worker can be notified of something from your server. So it's how your server can tell the service worker that something needs to occur. Often, that thing that you're telling it is, show them a visible notification, but it doesn't have to be that you want to notify the service worker.

[00:04:10]
And, by the way, if you haven't thought about this, this is kind of an amazing technical feat that your browser, the tab can be closed. The user it could have been days or weeks prior. And somehow there's been an, when the permission was granted, there was an exchange of encrypted keys and information, where now your server knows how to talk to the browser even if the browser isn't talking to the server.

[00:04:39]
That's what a push message is, is the server making an outbound network request routing it somewhere in the world to your browser, even if you're on a different WiFi at that point. It finds your browser and it says, hey, service worker, wake up, I've got something for you, okay?

[00:04:56]
That's kind of mind-blowing that it's able to do that, and that's why it's one of my favorite technologies. It's a bit complex to set up, you gotta do vapid key exchange and some other stuff that we're not gonna get into, but there's a bunch of tutorials if you get curious.

[00:05:11]
But the thing that's particularly interesting about this is, you could actually send push messages to a service worker that did nothing to alert the user about what was happening. But just for example update their cache, like say you've posted a new blog and you could push that to somebody's device and it's already in their cache.

[00:05:34]
And the next time they come to your site, it's an instant load. That sort of thing, so you could literally just sort of sync them with any new information that you want, prime their cache with information. It's a really, really cool technology usage and it's such a shame that because of all this other bullshit with notifications, that API is almost certainly gonna be blocked by most users cuz they're annoyed by that one.

[00:05:59]
Yeah.
>> Student: I was just going to say that so that you can do like new versions. Like if you have a new version of your application.
>> Kyle Simpson: Yep.
>> Student: You can pre-push.
>> Kyle Simpson: Pre-push and install and the app's already installed by the time you.
>> Student: That's incredible. That's really cool.

[00:06:12]
>> Kyle Simpson: It's really, really cool that we have these capabilities. So the point I'm making is there's a bunch of these like auxiliary technologies underneath this umbrella of service workers. And service workers is our entry point to using all of these things because the service worker lives independent of an open tab.

[00:06:33]
We could do all of that stuff if the tab was open because we've had web sockets for a decade or more. We could do all of this stuff if the tab was open. But now we have the potential to do all this stuff even if they've closed the page.

[00:06:45]
So there's some really exciting stuff with service workers. And that's why we've got a bunch of exercise to work through. So we're gonna dive in, now, to this exercise on service workers.