Getting a message with a notification is nice, but we can do more. Let's look at the push event listener in our service worker. So we are building this data object, and this comes either from the notification that we received, or we are building it ourselves if that data doesn't exist. Ideally, it will exist. So we are taking that data from the notification, and then we are including some of that data with the options that we pass to the show notification method. In this case, right now, we are just passing in the body from the notification. So the notification shows the title, and then it shows the body. We've seen that. But, you know, let's think about this. Let's say that someone is out in the field, they add a new meter, and we want that notification to go out to anyone that is

But, you know, let's think about this. Let's say that someone is out in the field, they add a new meter, and we want that notification to go out to anyone that is interested in that meter. Ideally, the other people that are working in that region, in which case they get the notification. That's great. But, you know, we can do more. What if they click on or tap on that notification? I would want that to open up a browser window that takes them to the page for that meter. And we can do that, because when the user clicks on or taps on that notification, it fires a notification click event, which, of course, we can listen for. And this event object has a notification object, which also has whatever information that we want to include when we show the notification. So we pass in the title. Then we also pass

And this event object has a notification object, which also has whatever information that we want to include when we show the notification. So we pass in the title. Then we also pass in this options object, which has the body and the icon. But we can include our own arbitrary property if we wanted to. I'm going to call it data. We could call it whatever we wanted. But when it comes to something like this, I typically reach for data. That's just me. And we could include the URL that we want to open up in a new browser tab when the user clicks on or taps on the notification, in which case we could say that, well, that's coming from our data object that we built up here. So it would need to ideally come from the server, in which case we can go to our test push controller, because that is where we sent our test notification. And we could just include

So it would need to ideally come from the server, in which case we can go to our test push controller, because that is where we sent our test notification. And we could just include another URL, which I think here, let's do this. We'll have HTTPS and then field-logger.test meters, so that it will take us to the index and we could at least see that working. So we are now going to get the data from the push notification from the server. It has a data URL, which we are passing here, which then gets passed to the show notification method, which is then available here. So we could say data URL or, and then we could have just a slash for home. So we can do this. We'll say const URL is going to be that value, but let's also do this. Let's close the notification when the user clicks on or taps it. I don't want to keep saying clicks on or taps it. So I'm just going to say click there. So when the user clicks on the

Let's close the notification when the user clicks on or taps it. I don't want to keep saying clicks on or taps it. So I'm just going to say click there. So when the user clicks on the notification, we want it to close the notification, but we also want it to open up a new browser tab. But then the question becomes, do we really want to open up a new browser tab or should we check to see if there's a tab already open for the URL that was provided here? I like that approach. So let's do that. We need to do that by waiting. So we will call wait until, and then we're going to use a object called clients. Now the clients object is, well, it's basically all of the tabs that the service worker is aware of. So if we take a look at the browser, I have three tabs open. First is the meter index. Then we have one page open that is one meter. Then we have another tab open that's another meter. So we essentially have three clients here. We actually have more, but

First is the meter index. Then we have one page open that is one meter. Then we have another tab open that's another meter. So we essentially have three clients here. We actually have more, but let's just think in terms of tabs, or I'm going to call it windows because that is essentially what we have. Even though these are tabs, they are still windows. So we essentially want to find any client that matches the URL that we want to open. But we need to be a little specific as to what we want to find as far as our clients are concerned. So we want to search only the clients that are windows because we could also have a worker clients. We can also have a shared worker clients, but in our case, we just want the tabs, which are windows. But just because there's a tab open that is for our website doesn't necessarily mean that the service worker is aware of it or has control of that tab. In which case, we want to include uncontrolled. The idea being that not only is it

our website doesn't necessarily mean that the service worker is aware of it or has control of that tab. In which case, we want to include uncontrolled. The idea being that not only is it going to search tabs that the service worker controls, but it's going to search tabs that match the same origin. The default for this is false, but we want it to be true because we want to search all of the tabs that either the service worker is aware of or has the same origin as our service worker. And this is going to give us a client list, which we will then need to iterate over because we want to find the client that matches the URL. So client of client list. If the client URL includes the URL that we are searching for and if we can focus that client, because not every client can be focused, in which case we just return client focus. But it's entirely possible that a tab is currently not open. We want to open one, but we need to

because not every client can be focused, in which case we just return client focus. But it's entirely possible that a tab is currently not open. We want to open one, but we need to be sure that the client can open a new window so that we can return clients, open window, and then the URL that we want to open. So that is our code. So our push notification is going to include a URL, which we get with this data object, which we include here with the options so that when the user clicks on the notification, we close the notification, we reach into the data that we passed to the notification to get the URL. We tried to find an open tab with that URL, and if it exists, then we focus it. Otherwise, we open up a new window. So I think we are ready to test this. So inside of the browser, let's unregister our service worker because we made changes. Let's do a hard refresh and let's resubscribe. And then let's open up a few

to test this. So inside of the browser, let's unregister our service worker because we made changes. Let's do a hard refresh and let's resubscribe. And then let's open up a few of these pages. It doesn't have to be many. Let's just do two of those. Let's duplicate this one because we need to send our test push. So this is, of course, going to show our notification. We click on it, and it takes us back to our meters, which is what we would expect. But this is actually something that I didn't really expect because, and I'll show you why. Let's go to our sources. Let's go to our service worker because when it comes to our client list, let's scroll down to our notification click handler. Here where we iterate over our client list. Our client list isn't in the order of the tabs as they appear in the window. I don't really know what order that it appears, but I set a break point here so that whenever we send a notification,

list. Our client list isn't in the order of the tabs as they appear in the window. I don't really know what order that it appears, but I set a break point here so that whenever we send a notification, we will, of course, get that. We will click it. We will hit that break point. And if we look at the client list, the first client is test push, which is what we were just on, which is that one. The second client is the meters index because we can see that. And then, of course, the other clients are there. I'm wondering, though, if it's the order of focus. So if we focus meters three and then go to field logger, let's refresh here. We're going to hit that break point after we click on the notification. If we look at the client list, the first one is still going to be, well, now it's meter seven. The second is meters three, then it's test push. So I really don't know what dictates the order of the clients inside of the client list because now since meters seven was the first in

meter seven. The second is meters three, then it's test push. So I really don't know what dictates the order of the clients inside of the client list because now since meters seven was the first in the list, that's what matched because the URL that we sent was just that. So our code checks to see if the client URL includes the URL that was passed to the notification. So I don't know. I don't know what the order of the client list is or how that order is determined, but we can do this. Let's say slash two here so that whenever we send our notification, we don't have a tab with that URL yet. So if we click on this, it opens up a new tab, meters two. We can just put this somewhere. It's going to be in the middle here and we can send another notification. And whenever we click on this, it's going to focus that same tab. So at least that works. Our issue is that the URL that we sent with the notification was just too generic. So that's

And whenever we click on this, it's going to focus that same tab. So at least that works. Our issue is that the URL that we sent with the notification was just too generic. So that's something to be mindful of. So now we have all of the pieces ready for sending notifications from our application. Now we just need to send those notifications when something important happens in our application.