As cool as notifications are, there will be times people will want to unsubscribe. Of course, there are two parts to unsubscribing. The first is going to be on the server, where we delete a subscription for the user. And that is all based upon the endpoint. Now, remember that the endpoint is unique for an individual device. So a user could be subscribed on multiple devices, in which case they would need to manually unsubscribe on each one of those devices if they wanted to completely disable notifications. Unless if we provided a mechanism on a settings page or something like that to where we could essentially delete all of these subscriptions for a user.

Unless if we provided a mechanism on a settings page or something like that to where we could essentially delete all of these subscriptions for a user. Now, of course, that's just on the server side. And ultimately, that's really it, because we are going to send notifications to the subscriptions. If the subscriptions for a user are deleted out of the database, then we can't send them notifications. The second piece is, of course, the browser, in which case we need to provide a mechanism for them to unsubscribe for the device. And once again, ideally, this would be like a settings page or something like that,

in which case we need to provide a mechanism for them to unsubscribe for the device. And once again, ideally, this would be like a settings page or something like that, because that would give us the opportunity to provide a lot more functionality, a lot more reporting, and things like that. I'm more interested in showing you how to actually unsubscribe. So while it's going to work, it's not necessarily going to be what I would do in an application that people were actually using. So with that in mind, I think all we need to do is just add a button. So it'll be right up here next to the Logout button.

So with that in mind, I think all we need to do is just add a button. So it'll be right up here next to the Logout button. And we are always going to show that. We aren't going to hide it or anything like that. And I'm just now noticing that our Logout button is available for everyone. So let's wrap that with an end off, because then what we are going to do is have a div with flex, justify end, items, center, and we want a gap between those buttons. And we're going to wrap our Logout button with a div, which is just going to be an Alpine component.

And we're going to wrap our Logout button with a div, which is just going to be an Alpine component. We're going to have a button. Let's use the same exact styling as our Logout button, just so that we can make things a little confusing. And we'll have bg-white 10. We want hover bg-white 20. And wow, that did not do what I wanted it to do. So let's just copy what we have for the Logout button. We'll use that as our basis there, so that we will have our class.

So let's just copy what we have for the Logout button. We'll use that as our basis there, so that we will have our class. The text will be simply disabled. And then we will add the Alpine things. Let's go to the components folder inside of resources.js. We'll create a new JavaScript file, which we'll call push-unsubscribe.js. And let's open up the notification banner, because we can use some of this to start with, such as the Alpine init event listener and the beginning of an Alpine component there.

such as the Alpine init event listener and the beginning of an Alpine component there. So that we'll call this push-unsubscribe. We will return an object, which we will build out. And then we just need to close all of the things. We, of course, want to import this. So let's go ahead and open up app, so that we can include the push-unsubscribe file. All right, so that sets most everything up. So we'll leave our view open,

All right, so that sets most everything up. So we'll leave our view open, so that we can come back in and add what is necessary. But I guess we need to take a look at what this looks like. And sure enough, we have our disable button next to the logout. So we are going to focus on our component here. And all we're going to do is have a method called disable. And I think I closed notification banner prematurely, because I want this same check here. If notification is not in the window,

because I want this same check here. If notification is not in the window, then we need to do something. And this is where things become really easy. As I've said, this should be inside of a settings page or something like that, so that we can provide a good user experience. I'm going to use alerts, because who doesn't love an alert pop-up? If notification is not in window, we alert the user that the browser does not support notifications, in which case, you know, they cannot disable.

we alert the user that the browser does not support notifications, in which case, you know, they cannot disable. However, if we make it past that check, then we need to try to, first of all, get our service worker's registration. So we will await navigatorServiceWorker.ready. We have done this before, because this gives us the ability to use the registration to get the push manager to call getSubscription. And we'll check.

to get the push manager to call getSubscription. And we'll check. If we don't have a subscription, then there's nothing here. We'll say this device is not currently subscribed. And then we will simply return, because there is nothing else to do. However, if we make it past that check, we want the endpoint, because we need to include the endpoint whenever we send our request to the server. And we can get that from our subscription object. We have the endpoint property. And then we just need to unsubscribe.

We have the endpoint property. And then we just need to unsubscribe. We do that with the subscriptions unsubscribe method. But it helps if you type things correctly. So that's subscriptions, unsubscribe, and we need to check if this was successful. Because maybe it wasn't. In which case, we'll just write something out to the console. But let's use warn. And we'll say that the subscription reported as not unsubscribed.

But let's use warn. And we'll say that the subscription reported as not unsubscribed. But we don't need to return here, because remember that the user's intent is to unsubscribe. So if it fails on the client side, that's okay. Because what is really going to prevent notifications from being sent is to delete the subscription on the server. But before we can send our request, we need to get the CSRF token. And that is from the document. We have a meta tag.

And that is from the document. We have a meta tag. So we are going to select that meta tag that has an attribute name of CSRF token. And then we want to get the attributes of content. That gets us the CSRF token. So then we can finally send our request to push subscriptions. And we want the method to be the delete method. But we need to set some headers because we are going to send a JSON structure. So we'll set content type to application slash JSON. Let's copy that so that I don't have to type application slash JSON again for

So we'll set content type to application slash JSON. Let's copy that so that I don't have to type application slash JSON again for the accept header. And then finally, we need the XCSRF token header set to our token. So that is our headers. Let's also include the credentials to be same origin. And then finally, we want to include the body and we will serialize our endpoint. And let's be sure that we are looking for the endpoint key. Yes, we are.

And let's be sure that we are looking for the endpoint key. Yes, we are. So we are ensuring that endpoint is required so that we can delete that from the database. So after we send our request, we will let the user know that notifications have been disabled on this device. Because if it's gonna fail, then we are going to catch that error. So that we can first of all log the error to the console so that we have some information if we need it. And then we will tell the user unable to disable notifications for

that we have some information if we need it. And then we will tell the user unable to disable notifications for this device. And that is gonna be it. So that now we have this disable method and we want to use it for our button here. So let's first of all add the X data attribute for push unsubscribe. And then for the button elements, we want to add a click event to call disable. Now before we do anything else, let's use Artisan to start our queue. So that inside of the browser, we can go to any one of our meters and

Now before we do anything else, let's use Artisan to start our queue. So that inside of the browser, we can go to any one of our meters and let's edit one of these readings. It doesn't matter what it is, we will update that and we will get a notification because we have not disabled notifications just yet. There it is. So we are good to go. However, let's take a look in the console and we can see that it is running. It ran for four seconds and it's done. And that's important because whenever we disable,

It ran for four seconds and it's done. And that's important because whenever we disable, we see that notifications have been disabled on this device. So that if we edit one of these again, we are going to see that our job runs. But we aren't going to see any notifications because we have successfully unsubscribed from them. And no notification, but if we look at the console, we can see that it indeed ran. So unsubscribing from notifications requires two things. First of all, we need to unsubscribe in the browser, but more importantly, we need to delete the subscriptions on the server.

First of all, we need to unsubscribe in the browser, but more importantly, we need to delete the subscriptions on the server. Because even if the browser for whatever reason can't or won't unsubscribe, ultimately that's okay. Because if our application doesn't send notifications to that device's endpoint, then they don't receive notifications. Microsoft Mechanics www.microsoft.com