Creating Subscriptions

[00:00:00]
>> Well, let's go back to our push.js, I think that this part is okay. But now the last part is that we need to actually send that data, the details that we have to our server. Okay, so that's the last part. So how are we going to do that?

[00:00:24]
If you look at our server, our server already has an endpoint for a little API that says, /push/subscribe. There is expecting the data to arrive as json. So what we need to do is make a fetch, from our client to that server, okay, make sense? But before doing that, let's see how are we doing so far.

[00:00:54]
So I'm going to just do a console log of the details and maybe call my log API then say that Web Push, subscribed. Check to see if we are good at this point. What happens if you subscribe to the pushManager twice? Nothing, you will get the same data in return So every time you're getting to the website, you are subscribing again.

[00:01:26]
Okay, it will give you the same details. I will explain why that might be useful at some point. Okay, well, let's see what happens. So I will refresh here. Be careful, we need to check that maybe for later, that we have update on reload so when we change the service worker, we will get that.

[00:01:58]
And now if I try the push that by the way I think I didn't add it to the HTML. So we can call this that was in the HTML. The only thing that I'm I need to do, I didn't do this, is that by default, by CSS, my code is hiding the push because maybe the push is not there, right?

[00:02:34]
So what we need to do is to change that from CSS. Yeah, I'm not using any library, any reactive library, so plain JavaScript, Vanilla JavaScript. I'm not sure if you're rusty with that or not, it's simple anyway, we just need to change CSS style, or we can do a class wherever you want.

[00:02:54]
So, we have a button that is hidden, we have a whole section that is hidden for push. So what we need to do, we can check that this push.js file in the HTML. It has a defer property. Because of that, we know for sure that the DOM is ready.

[00:03:18]
I don't need to wait for DOM content loaded to do something like that. So that means that here, we can actually check if the API is ready, showNotification in ServiceWorkerRegistrationPrototype and here we can go and enable the section. Does it make sense? So it means we Push is available, so am going to enable the section from CSS, or JavaScript plus CSS.

[00:03:54]
So, we're going to getElementById, push.style.display = block. If this was a reactive library, well, I just change a Boolean and a flag that will trigger re-rendering and it will render that option, okay, make sense? Do you have any questions so far?
>> I'm getting a ServiceWorkerRegistrationPrototype is not defined.

[00:04:22]
>> You've done prototype [CROSSTALK]
>> Dot also. But it's weird that you're getting an error on that one because that one should be brady also. But, yeah, those prototypes should work anyway, like this. Let's try to keep this consistent. Another way is to check for, if you look here, what else you can check?

[00:04:50]
You have also PushManager. So also you can check if PushManager is available in the window object. That's another way, okay, to check if the PushManager is available. Okay, so let's see now. I have now my section at the bottom that says Push Notifications, okay, makes sense? If I try this on my IOS simulator that today is not supporting the API, Localhost4000, I shouldn't see the Push API because it's not there yet.

[00:05:38]
On the rest of the browsers today, it's available. Remember, for those of you on a Mac, if you're using Safari, you need to be on Ventura. If not, isn't gonna work, okay? So if you do an upgrade yet, it's not gonna work. You can use Chrome or Firefox to test this.

[00:05:58]
So actually, if I click Subscribe, I'm getting the permission dialogue for local host, Allow. And after a while, I'm getting the details in the console. So the first step is there. But if I try Firefox, let me try the same, Websites on Firefox. I'm opening the console. I have Push Notification, Subscribe dialogue, Allow.

[00:06:35]
And after a while I'm getting PushSubscription detail. The endpoint points to another URL that it's within Mozilla's boundaries. It's updates.push.services.mozilla.com, so that's the endpoint. So why it's called endpoint? Because if you wanna send the message to that user, you will need to send an HTTP package to that endpoint.

[00:07:04]
And then the payload, the body of that request needs to be encrypted with your private key. That's how the handshake works. The security handshake work between your server, your website and the push server. Okay, make sense?
>> Question?
>> Yeah.
>> The public private key we created, is it specific to any browser or is it application?

[00:07:32]
>> No, it's per your app, actually. You need to save it every time you create a new pair, it's a new pair, it's a random pair. Of course, between them they're not random, but then you can use the same on any browser. And the idea is that you will use the same for the rest of the life of your web app.

[00:07:53]
If you change those keys, then it will be like a separate app. From a push server point of view, you are at different app, so you will lose control of sending messages to your old users.
>> The question came because we are sending it to different endpoints, right, one for the fcs.google, another one is for the Mozilla.

[00:08:14]
>> Yeah.
>> They were same public,
>> They have their own databases, their own implementations of the spec and they will all save your public key attached to your origin as well. We're on Safari, Safari on Ventura, okay? So I will open the console as well, Subscribe. And it says, look at that.

[00:08:40]
It says that, the Provided applicationServerKey does not match the key in the existing subscription. What's that? It seems like I have already subscribed the user to this port number. And it says, you already have a subscription key and it's not the same, so I'm not going to register this.

[00:09:00]
Can this happen? Yes. What can you do about that? Actually on Safari today in the current implementation, nothing This is like the example that you mentioned recently, you change the key.
>> Do you mean you as the application engineer or you as the user of Safari?
>> Well, both to be honest,

[00:09:27]
>> [LAUGH]
>> I mean, as an application engineer here, yeah, you can change the port number, okay? And to see what happens if you change your port number?
>> No, I meant to clear out that current registration or something.
>> Well, that's cool, how can we see here.

[00:09:43]
Well, here you can see work, what can I do in Safari, okay? Where can I see the details for this website? So I have a bookmark, share, reload, compared with Chrome, the UX that Safari has it's actually weird. I mean, you can go to Settings, okay. In Settings, you can check Websites, on Websites, okay, we can say, okay, what do we wanna see?

[00:10:13]
Notifications, okay, here are different notifications that we need to find local host here that says, allows and I'm going to, I can deny them. That's revoking permission. Why can't remove them? Remove will actually remove the subscription. Yeah, probably who is going to get into here? No, it's actually pretty difficult, right, to actually get there.

[00:10:42]
I think that Chrome has the better UX and Firefox as well. Because on Firefox, you can also click on the details, okay? And everything you have here like the permissions the UX feels better, okay, in terms of how that works. So now I deleted that, let's see what happens if I try again.

[00:11:06]
Now, I'm seeing again, this is the dialog for Safari, it's different from the other dialogues, okay? It's different. If I allow this, I should get in the console at one point, the endpoint that points your web.push apple.com. So we have the three browsers working with our code right now.