Registering Subscriptions in Node.js

[00:00:00]
>> The next step is to send that data to the server. So, so far in the diagram, let's look at the layout diagram again, we are actually here. We have received the details, but we need to also send the details to our server for the last part, okay?

[00:00:20]
So to do that with our server, if you're using Firebase or other solutions, you just call the API. They have a simple API that you use to do this, okay? But here, what I need, okay, is I need to call a fetch to an endpoint that is push/subscribe.

[00:00:47]
But it's opposed to, yeah, if you're using Axios or any other library might be shorter, but we are being ManilaJS. So we're going to send these by post, that's the method. The headers, what we need to send is Content-Type, As application/JSON like so. And the body, and the body is going to be an stringify.

[00:01:15]
We'll just stringify, but anyway, with the endpoint. Now, we're going to see where they're going to get this and the keys. The endpoint, where is the endpoint actually available? In the details, We have the endpoint. Let's see this again here. The details, they have an endpoint, okay? So it's details.endpoint, but we also need to pass keys.

[00:01:51]
And they have two properties, auth and p256d!. And you say, okay, this is coming from the push server, I didn't create this, okay? The problem is that what we have right now is actually an array buffer, and we cannot convert that to JSON. So we need to use some of the tools that I have here already ready, okay?

[00:02:18]
Again, typically, you don't do this low level coding. You use Google, Firebase, or high level API that will solve this for you, but we are here, okay? So I'm going to call arrayBufferToBase64 for the auth, and I'm going to take from the details. So that's the object that we received from the server.

[00:02:44]
From the details, they're going to get a key. Okay, that is called this, this is the auth, its off. So this is actually getting the array buffer, that's bytes and converted that into base 64. So text, so we can put in the JSON, okay? And something similar here, array ToBase64.

[00:03:17]
And we're going to get details, getKey, and that's the name of the key. Okay, like so, and I'm missing a coma. Remember that you already have the final code array there in the final version. How do you know that? Well, that's part of the API. When you look at the web spec, okay, those are the properties with those teams and that's all.

[00:03:51]
By the way, I'm simplifying this only to cover the current version of the spec. A few years ago, so I mentioned that I did a couple of workshops on web push before probably model 25 or something like that. And most of them were pre-pandemic, we're talking about 2018.

[00:04:12]
And at that time, I was also covering two other previous version of the spec that today, it's not really necessary. I'm just telling you that in case you see some codes out there that are more complex than this. So Chrome 60, Chrome 70, I'm talking about those versions, okay?

[00:04:35]
Many years ago, we don't have users of those versions anymore to care about. But for example, before, we have two versions, one without keys. There was one version that there were no signing. So actually, the security was worse, that was one version. The other version was actually GCM based, that was Google Cloud Messaging.

[00:05:04]
That was before Firebase even existed that needs a sender ID. Again, I'm just giving you keywords that you will probably find somewhere in blog posts, because they are old. We don't need to care about those anymore. We don't have users using those old versions of the web push spec, okay?

[00:05:27]
Make sense? So that would probably, yeah.
>> You need to add an H to your p256.
>> Probably, this one, yeah, thank you, my bad. Okay, so if I run this on any browser, it doesn't matter. Something that I can check is the Network tab, okay? So when I'm subscribing, it's giving me the key.

[00:06:01]
So I'm sending the data properly. But their response didn't work. Okay, because, I think, I didn't restart the server. Let's check the server. And I think that with that, we should be good. So I'm going to restart my server. Yeah, sorry.
>> On 22 there, header should be headers.

[00:06:34]
There might be-
>> You're right, thank you. So we have a typo here, it's headers. Anyway, I'm not sure why my shortcuts to open the terminal is not working. [LAUGH] Who knows why? So let me close this, restart the server. Because we set the key, that's the only thing that we'll change.

[00:06:58]
Let's try again. Subscribe, there we are. I'm not getting any error. How do I know if this is working? Well, this server is using a very basic database, it's called. It's not even SQLite, it's actually simpler than that. So in our project, we should have a users.db file.

[00:07:22]
In that file, when you click there, you're going to see some kind of a JSON file. But it's not really a JSON file, because it's not a collection. But you can see that I have my file there. So that's my endpoint with the keys, and that's me on Chrome.

[00:07:44]
Then I can go with the Firefox, refresh just in case. Subscribe on Firefox, and the same on Safari. Subscribe, so If I go back here, I have three users. So in this case of course, I'm not authenticating the user, so I don't know who the user is. So the only thing that I can do is broadcast messages, because I'm not assigning this to a user database.

[00:08:14]
But if I have a user identification, you just need to match each register with a real user. So the registration part is done, that's all. So let's see what's next. Where are the next steps? We have already done this. So let's see how the architecture finishes. So let's say that we wanna send a message to one user.

[00:08:47]
Well, our web server or any server, it doesn't need to be the web server. The server of this that has the subscription details, and the message will talk to the push server through the endpoint. The push server will send a push message to the browser and the browser will wake up the service worker, and the service worker will finally create the notification, that's the flow.

[00:09:20]
>> What if the web browser is not running?
>> In that case, so if the web browser is closed, okay, so the push message, there is another actor here not on the screen, but you have the operating system. So the push message, actually, it depends on the browser and the operating system.

[00:09:42]
But on mobile for sure, it comes to the OS. The OS knows, that message is for Chrome, so it wakes up Chrome. And the chrome received the message, it parses the details, that's for that audition. For that audition, I have registered that service worker. So then he wakes up the service worker.

[00:10:03]
And on desktop today or most desktop operating system, it works in the same way. On some operating system such as Linux, you don't have a centralized push system at the OS level, so it's the browser. If you kill the browser and you kill the browser of daemon, you won't get the message until you open the browser next time.

[00:10:24]
But it's just for very specific situations, because the OS doesn't have a messaging system. It depends on the distribution, so it's not so simple. Does it make sense?
>> What if the OS is off like phone is off, does it-
>> So if the phone is off, what happens is that the message stays at the push server.

[00:10:49]
For how much time? It depends on the implementation actually. But also when you create the notification, and I will show you that in a minute, you can specify an expiration date. So you can say, hey, this notification is useful until that day and time. So if it couldn't be deliver up to that time, then you can discard it.

[00:11:11]
But push notifications are never guaranteed, so it's the best effort scenario.