A service worker gives us the ability to send push notifications. But there are a lot of moving pieces. So let's just jump in and get started. Sending push notifications has a lot of moving parts. And the most important thing that we need is explicit user permission to send notifications. Because we have all experienced navigating to a page and then we get a pop-up, you know, that says, hey, do you want to enable notifications? And most of the time we say block or deny or whatever. But if we look at the security settings for any website,

And most of the time we say block or deny or whatever. But if we look at the security settings for any website, we are going to see the permission settings for that site. Here we can see that notifications are set to ask, which is the default. But there's also allowed and there's block. Now, of course, if we block notifications, notifications aren't going to work. But we want to set this to ask because we want to ask the user, do you want to enable notifications? And if they allow them, then great, we can subscribe and do all of that stuff. As I said, a lot of moving parts.

And if they allow them, then great, we can subscribe and do all of that stuff. As I said, a lot of moving parts. Let's focus on the permission aspect. Now, before we go any farther, I have switched browsers. As it turns out, Brave has some issues with notifications. And so instead of spending a lot of time figuring out why or what the problem is, I'm just going to move to another browser. So I'm using Edge. And I would say it doesn't matter what Chromium-based browser you use, because obviously it does.

And I would say it doesn't matter what Chromium-based browser you use, because obviously it does. But if you use any Chromium-based browser other than Brave, then you should be okay. I'm on Windows, so Edge makes the most sense. Now, as I said, the most important thing or the, well, it is important. The most important thing that we need is explicit user permission to send them notifications, and we have to ask for that permission. So we could do this in a variety of different ways. We could put a button up here that says enable notifications.

So we could do this in a variety of different ways. We could put a button up here that says enable notifications. But we could supply some other information because some things could go wrong, in which case it would be nice to have some message or some area to display in the message. So I think having some kind of banner would work. And we could break this out into a component so that we could have notification banner or something along those lines. So let's do it. We will make that component called NotificationBanner.

So let's do it. We will make that component called NotificationBanner. And we just need the view. We don't need a class behind this component. And this way we don't muddy up our layout. And we can also make the arguments, do we want to do this instead of our layout? Maybe we have a page dedicated to the settings of our application, in which case that would be the place to have this option of enabling notifications. But we don't have that. So we're just gonna muddy up our layout here.

But we don't have that. So we're just gonna muddy up our layout here. So let's open up the notification banner view. And ideally, we would only display this for authenticated users. So let's wrap this with the auth directive. Let's have a div element. That's gonna have a lot of classes. And of course, inside of this element, we're gonna have a button. We're gonna have a message area. So there's gonna be not a lot, but a good amount of information or content.

We're gonna have a message area. So there's gonna be not a lot, but a good amount of information or content. So let's have a p element with some semi bold font and some margin at the bottom. And we'll just say enable notifications. And then we can have another paragraph that has some smaller text. And let's use an amber color. So let's say that's 180. And let's give it some margin at the bottom. So that we can send you notifications when there's new field activity. And really, the sky's the limit when it comes to

So that we can send you notifications when there's new field activity. And really, the sky's the limit when it comes to what information that we want to send in these push notifications. Because it really just comes down to what kind of actions do the clients or the users want to be notified about. So if there were some clients that needed to be notified when a meter was added to the system, then they could subscribe to that particular kind of notification. If there's others that needed just notifications when field data was updated or removed or added, things like that, the sky's the limit.

If there's others that needed just notifications when field data was updated or removed or added, things like that, the sky's the limit. Because there's nothing that says you can only send one kind of notification. Of course, granted, a notification is a notification. Once we have push notifications set up, then it's just a matter of determining on the back end what kind of action occurred. Is this something that we want to notify our clients and then go from there. And then we need our button. We need something that is going to allow the user to explicitly allow us to ask for permission.

We need something that is going to allow the user to explicitly allow us to ask for permission. So this is where our button will be. And of course, we're going to use Alpine to enable all of this functionality. Or maybe not enable. Enable isn't the right word. Dynamic. Dynamic is the word that I'm searching for. So then we'll have a message area. Let's say that our text will be 11 pixels text.

So then we'll have a message area. Let's say that our text will be 11 pixels text. Amber, 170. And then we'll have our message area. Wow, Visual Studio Code did not like that. So we had text brackets 11 px. Okay, so if we take a look, this is what we have. And I thought we would have a little bit more padding there. And that's why. So if we take a look, that looks better.

And that's why. So if we take a look, that looks better. So now we just need to add the JavaScript to, first of all, make this dynamic as well as prompt the user to enable notifications. Well, let's organize our JavaScript. Because we don't want to put everything inside of app.js. That's just going to get really busy really quick. So let's do this. Let's create a new file inside of a components folder inside of js. So we will have components.

Let's create a new file inside of a components folder inside of js. So we will have components. And then let's call this notification banner.js. That's exactly what this is. And let's see, how do we want to do this? Because we do listen for the Alpine init. But we could do that as many times as we want. That way, we could do something like this to where we import, what do we import? The components notification banner.

what do we import? The components notification banner. We have that side effects kind of thing to where we're just importing it, and then it does everything that it needs to do. I like that. That way, we don't have to do anything else here. And inside of notification banner, we will have our event list. Event listener for Alpine init. And yeah, then all we have to do here is create our data notification banner. And then we have our components.

And yeah, then all we have to do here is create our data notification banner. And then we have our components. Yep, I like that. That's going to work just fine. So with that done, let's go to our notification banner component. That's going to be a little confusing if I just say component. Let's go to the blade component. So that's here we can say x data, and that's going to be the notification banner there. Okay, so what do we need? We're going to need some button text because we want to change the value of that button text

Okay, so what do we need? We're going to need some button text because we want to change the value of that button text based upon if the client has enabled notifications or if they haven't enabled notifications. So we're going to want something there. And we're also going to want our message. So we can go ahead and let's say that we're going to have a property called message. So that's inside of our notification banner, we can go ahead and just define that message property with an empty string. Except that's very wrong.

we can go ahead and just define that message property with an empty string. Except that's very wrong. It's a function that returns an object. There we go. So now we have our message property. And we also need to keep track of the state of the notification permission that the user gives us, which we'll talk about here in a moment. But there's three different values. We're going to start off as default because that's the default value. And yeah, that should be enough.

We're going to start off as default because that's the default value. And yeah, that should be enough. So that then we can initialize this component. And the first thing that we should do is actually check if notifications are a feature that we can use. Because it is perfectly possible that the browser does not support notifications. So if notification is not in window, well, then let's set the state to unsupported. And then we can set a message saying this browser does not support notifications. And then we can return, we're done.

And then we can set a message saying this browser does not support notifications. And then we can return, we're done. So that's going to be fine. In which case, then we need to set our state according to the permission that has been set for this website. Now there are three possible values here. The first is default, which obviously. Next is granted, meaning that the user has granted us permission for notifications. And then finally, there's denied. Of course, meaning that the user has denied permission for notifications.

And then finally, there's denied. Of course, meaning that the user has denied permission for notifications. But it doesn't matter what it is. We want to know what the current permission is, so that we can change the state of our banner. And really the only thing that we need to do is check if the state is denied. Because then we want to tell the user, hey, you blocked notifications in your browser settings. So that way we can tell the user, if you want to enable notifications, you need to change your browser settings.

So that way we can tell the user, if you want to enable notifications, you need to change your browser settings. I mean, we're not saying exactly that, but yeah, we are. So with that done, we should be able to check this. We can send you notifications when there's a new field activity. If we come in and if we block and we need to refresh the page, sure enough, you're blocked notifications in your browser. I'm going to have to change that. That's going to bother me. Okay, so you blocked notifications in your browser settings.

That's going to bother me. Okay, so you blocked notifications in your browser settings. But we can still show the Enable Notification button, but we might want to hide that. But let's change this back to the default to ask. We need to refresh, and that message goes away. So we at least have some reactivity. Reactivity, if it's not a word, it ought to be a word. So if the state, let's say that if the state is granted, we don't need to show this banner at all.

So if the state, let's say that if the state is granted, we don't need to show this banner at all. Do we? I don't think so. So let's do this. We'll say show when state is not granted. Because really, that's the only time we want to show this. So once again, we can test this out. We can change the value of notifications by changing that to allowed. Voila, it's gone.

We can change the value of notifications by changing that to allowed. Voila, it's gone. So yeah, okay. But if it is the default, or if it's blocked, we of course want to show the banner. If we moved this into a settings page, that would be a little bit different. Yeah, I think we would always want to show it just so that we could show the user, this is the current setting, you can change it. Doesn't matter, that is for someone else to decide. But we do need to change the text of the button here. And it needs to be based upon that state.

But we do need to change the text of the button here. And it needs to be based upon that state. So we'll add x text here. And if the state is equal to default, then we want enable notifications. But if it's not, we still want to display the button. Because when all we are doing here right now is prompting the user asking for permission. I mean, eventually we will actually subscribe and all that stuff. But for right now, we're just asking for permission. So let's do something like try again. I don't know.

So let's do something like try again. I don't know. I don't know if that's gonna be good or not. Either way, okay, we have enable notifications. And of course, if it's granted, then the button's not gonna be shown anyway. So that will be fine. And then we don't need to do anything for the message. So now we just need to do something whenever we click on the button. So let's say that we want a method called request. We are going to request the user for permission to send notifications.

So let's say that we want a method called request. We are going to request the user for permission to send notifications. So let's add the request method to our component. And here, we are going to try to request permission. And we need to mark this as async, because we will await notification request permission. And this is going to give us a result, not a request. And we will set the state to whatever the result is. And it's gonna be one of those values, granted, denied, or default. I guess if we X out of it, it would be default. So one of three values.

I guess if we X out of it, it would be default. So one of three values. In which case, we could do something like this. So that's if the state is granted, then we could say something in our message. Like, thanks, we'll notify you of new activity. That'll be fine. So then we could check if state, I mean, this isn't necessary. I'm doing this because I want to. And we'll say you blocked notifications in your browser settings. So that then finally, as I said, well, that was horrible.

And we'll say you blocked notifications in your browser settings. So that then finally, as I said, well, that was horrible. If the state is denied, then we set the message to that phrase. But as I said, there's only three values. Only three values. So if it's not granted, if it's not denied, then it's default. In which case, we could not say anything. Or we could say, you can enable notifications later. And that would be fine. But of course, if something goes wrong, we want to catch that exception.

And that would be fine. But of course, if something goes wrong, we want to catch that exception. So that we could log it to the console. But then we could set the message saying that something went wrong, requesting permission. We should have everything wired up, I think. I don't think we need anything else here. We have that request method that we will execute when we click on the button. So everything should be okay. So if we go to the browser, let's pull up the developer tools. And I don't anticipate anything going wrong.

So if we go to the browser, let's pull up the developer tools. And I don't anticipate anything going wrong. So if we click on Enable Notifications, we are now asked to show notifications. If we just click on the X, if we close it, you can enable notifications later because the value is still default. But if we block notifications, then we can see that you blocked notifications in your browser settings. There we go. And if we try, well, we can't try again. If we come back here, and if we change the setting back to ask,

And if we try, well, we can't try again. If we come back here, and if we change the setting back to ask, we have to refresh the page. But if we enable notifications and allow them, then it goes away. In which case, I guess, we don't need that else. Nobody's gonna see it. So we might as well just get rid of that. Okay, we now have the ability to explicitly ask the user to enable notifications. But as I said before, there's a lot of moving parts here. This is just the first step.

But as I said before, there's a lot of moving parts here. This is just the first step. The next thing that we need to do is actually set up the ability for the server to push those notifications. And we will start that process in the next episode.