Push Notifications Setup

[00:00:00]
>> Let's implement this first part in our website. So I'm going to open push.js. So in push.js you will find already a couple of functions that we will use later. They're tricky. One of the problems here is that the data that we received from here, as you can see.

[00:00:21]
It's actually an arrayBuffer and we need to send that to the server. So we need to convert that into something that we can send to the server. So I'm converting that into text Base64, blah blah blah. To be honest, on most cases when you have a website and you want to implement web push.

[00:00:42]
What you're going to do is to probably use a cloud based solution that is everything is already done for you. Like Firebase, Microsoft Azure, and Amazon's cloud, all the solutions. They have an easy to use web push solution. So you're not going to probably write this manually, your own.

[00:01:06]
We're going to do that to understand this as vanilla plain JavaScript because it's not so difficult. The most difficult part is probably on the servers part. The server side that I already have a quick solution, so it's a plain solution, also vanilla, in node.js. But again, if you're using five arrays from Google or Azure, you have that done.

[00:01:31]
You have an API, you just call the API and say, hey, I wanna send a message. You don't care about all the details. So then what we want first here is we wanna try to write code for push. In our HTML we do have a section for push with a btnPushSubscribe.

[00:01:57]
So I'm going to start reading that button, click event handler. That's the simplest part and within the push.js file. So it's going to be document, our friend, getElementById. And we're going to addEventListener for the click, that simple. Well, I did an old function but we can use our own function of course as well.

[00:02:34]
We can have two operations or only one. Typically, we are doing everything at once. We request permission, and also we request the push subscription. But technically there are two different steps. So you can do this in two different moments of your web app life cycle. Commonly, you just do everything at once.

[00:02:58]
So the first step, let's say that the service worker, we already have it so we are not checking if service worker API is available. We are just going to try this directly. One quick way to know if push is available is checking in the ServiceWorkerRegistrationPrototype. It's a weird one, if we do have showNotification, it's one way.

[00:03:29]
So that's a simple way to check if the API is available. Progressive enhancement, okay? That means that web push is available. So on the else, we can log Web push not available. For example, it's an iPhone today that is not available. What else? Well, maybe it can be a website without the ServiceWorker.

[00:03:59]
It can be a website on HTTP, not HTTPS.
>> So they also don't have a ServiceWorker?
>> Because they don't have a ServiceWorker. So at the end, we are just asking about the same thing. Okay, so when we are here then we are ready to request permission. Okay, and that's the permission that we saw before.

[00:04:21]
It's actually pretty simple. We take Notification. We can check first if we have permission or not. Or we can just requestPermission. And we are going to await for that. And because we are doing a wait, I'm converting my function to an async function. Okay, and yeah, we can, Store the state in case we want to check.

[00:04:49]
And actually the API is pretty simple to the periodic background sync. We are following this, so we just check for the string granted. So that's how it works. So it's a string. If it's granted, this is an old permission API in browsers but it's how it is. So if it's granted then, We can request push subscription.

[00:05:31]
Okay, make sense? What happens if I'm requesting permission and it was already granted? Nothing, it will be granted. So the state will be granted automatically. If it was denied this permission in particular, if it was denied it will be denied automatically. The user won't see a message typically.

[00:05:54]
Also I'm not covering today a lot of complex algorithms that some browsers have. For example, Google Chrome has also an engagement score but not the one that we saw before. It's more like a server side engagement score. If they know that you're abusing web push they will not show any dialogue.

[00:06:24]
You will see in the URL bar a message saying notification blocked immediately. Even if it's a new user that has just arrived to your website for the first time. But Chrome thinks that you're abusing web push. So then notifications will be blocked by default. You won't see even the dialogue.

[00:06:43]
And if the user wants notification, the user needs to go manually to that notification blocks icon and enable that manually. So that is suppose to increase the user experience of websites that are really annoying about web push. And it will try to push those developers to make a better push implementation.

[00:07:11]
That's kind of idea. Now if we are ready here what we need is to talk to our service worker registration. So what we need is another service worker registration. That is navigator.serviceWorker dot.ready. And when we have that one now we need to talk to the subscription to the pushManager.

[00:07:41]
It's pushManager.subscribe. And we need to pass an object with options. And typically we await for the details. Something like that. And the subscribe has userVisibleOnly with a mandatory true. If you try false, you will get an exception saying no. We only support userVisibleOnly true. And then we need the application server key.