Requesting Subscription Access

[00:00:00]
>> So right now we are subscribing users, and it's working. But before actually see if this works, let's discuss for a second if it's necessary to request subscription details on every payload. So the spec says that the subscription details might change, why? Maybe the push server is changing implementation.

[00:00:29]
Maybe the user is upgrading the OS to a new version, or the user is recovering a backup in a new device. So there are many situations where it seems like it's the same user and the same browser, but the details have changed. So it's actually a good practice to always request subscription even if you already have it and update that in your server.

[00:00:57]
Okay, but you're thinking, well, what happens with abandoned details like yeah that user is not using the old details anymore. Well, when you're sending a message, so when we are in this scenario, at the end when we are sending a message. The push server also give us an HTTP status code in return.

[00:01:21]
And one of the codes actually in the payload, it comes in the payload not in the status code. It can tell us that the details, the subscription is expired, which means that user doesn't exist anymore. So in that case, you can delete that from your database. That also happens if the user is revoking permission.

[00:01:44]
Yeah, you have the details but the user went to settings and revoked notification permission for you. So then next time you send a message to that user, you will receive a message back saying, hey, no, sorry, that user is not bad anymore. Okay, so now back to our code, what we need to do is to receive the push from the server and create the notification.

[00:02:10]
That's actually a push event listener that we have already created that is kind of empty right now. And here we show a notification. We call self registration, show notification. It needs a title, a mandatory body, and a mandatory icon as well. We need to set an icon. There are many other properties that I will show you in a minute, but those are the basic ones.

[00:02:38]
That will render a notification on the screen, as simple as that, okay? So what about the body? As you can see here, I might take the body that is sent by the server. So the server, when the server sends a message, the message can include the payload, it's actually optional.

[00:03:05]
So I can just send the message without payload that will trigger the process, it will wake up the service worker. And the server worker can notify wherever it says like once. Maybe a service worker can go to the server download news. And with that, generate a notification. You don't need to use the payload.

[00:03:25]
The payload, how much payload can you send safely between all the browsers? 2K of data. So you can send the JSON binary data if you want, or a JSON. The JSON, the data that you receive can be used to update an index DV or to generate the message that the user will see.

[00:03:48]
So you can parse event.data as text as JSON as a rebuffer, whatever you want. You can use that within the body or not. Okay, so you're not forced to use the data that the server sent to notify the user. It's up to you, okay? So let's go back then to our service worker, I think that at the top we already have an EventListener.

[00:04:18]
So what we need to do is talk to our registration. And from here, we are going to show a notification. So if you remember we have already seen before the other API. The other API was actually pretty similar, but we were creating a new notification. It's actually pretty simple and pretty similar.

[00:04:39]
It has a title like Frontend Masters, and then options. So actually, this is the same or a similar signature, But a different way to access that notification factory. So here it showNotification and the other one was new notification, okay? So mandatory body, again we can take the data as text or as JSON, and then parse the data that we're receiving.

[00:05:17]
It's up to you. Or as text or no, or you can just do here, Any text, can be fixed, can be wherever you want. You can go and check and create a message from index DV. So body is mandatory and also icon. So for the icon, I will use, I have here in the public folder > Images > icon.png.

[00:05:54]
And kind of dots. How can we test this? Before checking if the server is sending the message, how can we test this? We can use the tester in Google Chrome, okay? So that's the simplest way to test this. So we can go back here, go to the application tab.

[00:06:16]
Within service workers, we have a section for push. If I send in a message, push, I didn't get it because we need to make sure that we have a new version of the service worker, remember that. Check update on reload and reload because we are changing the service worker, okay?

[00:06:39]
How do you know which version of the service worker is currently running? Because the file is this one, but you don't know exactly which version do you have? You can find them in sources under this little icon that's service worker and here you can see the current version.

[00:06:57]
So you can see that this should show a notification, right? So from here or from the server, okay? So what about the server? Again, we are not covering the back-end part here, but what I did is that broadcast.js file. This broadcast,js file is using that web-push library, okay?

[00:07:29]
It's using the private key and public key, and it's creating the message, okay? And actually this is the code. It's not really complicated, okay? But actually it's right now it's taking our database. And for each user, it's creating a new message. You need to create one HTTP request per user, per endpoint, okay?

[00:07:55]
And for each one, you're going to use your keys. Why, because also you use that to encrypt that message. So you encrypt the payload with users public key and your private key. Okay, so it's a complex scenario to avoid security issues. So to use this, you can open a terminal.

[00:08:24]
And from the terminal, using node.js. You use node space, okay, broadcast. If you just use the tool as this, it will create a message. This is a test push message from the server. But if not, you can add a message after that. I don't know, hello Frontend Masters, okay?

[00:08:54]
So this is going to loop through all the browsers and it's going to send the message. The problem that I do have right now, so if I look here, I do have some messages, okay? So I have one, by the way, for some reason, well not a reason, because it's Safari, Safari is not using the icon for now.

[00:09:21]
So you can see only the name of the website, the domain, the origin and hello Frontend Masters. So Chrome is using the icon, okay? So it's better but Firefox I'm not seeing Firefox and why is that? Because I think I didn't refresh the service worker on Firefox. So Firefox because I didn't even check Firefox.

[00:09:44]
Firefox has my old service worker that wasn't actually showing any notification. Okay, so I need to make sure that they all have the last version of the service worker, okay? So now let's clear this out. Let's go to Firefox, for example. Load this again. Also if I open the inspector, Firefox has a very simple tool with an application to check the service worker.

[00:10:14]
So I can unregister my server by both. So I unregister the service worker, I reload. So I know for sure it has the latest one, okay? So if I try again, so node broadcast "Web Push Rocks!" That's giving me that. But I think the problem is that it's escaping the, Yeah, it was escaping the exclamation mark.

[00:10:49]
Okay, so, I'm still not getting Firefox. So you can see also here it says, the best place to learn front end. I think that Chrome also has the old version of the service worker. So it's not taking the body it was a fixed string.