Options & Events

[00:00:00]
>> At this point, you can understand why this is complicated to the bottom. And think about thousands of users with many versions of the ServiceWorker because maybe the user is not coming back to your website. But again, we are not going to the service workers details. But having mind that when you send a push message and the ServiceWorker activates for the first time in a while, it will check if there is a new version.

[00:00:32]
And if there is a new version, it will install the new version that will be ready for the next push. Okay, so it's we are uncomplicated, but yeah, with enough information and enough organization, you can version your service workers. You can log that in your server, you can know which versions users have, and so on.

[00:00:58]
Okay, make sense, do you have any question at this point? What else can we do here in the notification? So if I'm going to the ServiceWorker, but if you look here, it's the ServiceWorker, the one that is sending the notification, not the server. So the server is waking up, but the one that generates the UI, the visual notification is the ServiceWorker, and here I have a larger object.

[00:01:35]
So I can show you everything that can be done in notification. Fact is let's see the another example, registration show notification for the master, and that option, it's long one. So we have the body, we have already seen that one, we can specify direction that for Arabic or Hebrew, okay, you can change that, you can have actions.

[00:02:13]
What's an action buttons that you can have in your notification? To be honest on desktop, they look weird, they look really nice on Android. So the notification can include actions, buttons, makes sense? So then you can say yes, no. I mean, the notification can have a question and then yes or no.

[00:02:35]
And you can provide different icons, okay, for that, and yeah, we'll explain, okay, where? What happens with the action? Okay, wait a minute. Well icon, a batch, what's the difference between the icon and the batch? The batch is the little icon that appears in the Android status bar, okay, that sometimes is grayscale.

[00:03:01]
So you can change the icon that you see when you open the notification from this molar icon from the status bar on Android. Okay, an image so you can provide like a larger image it can be a photo. For example, when you receive a photo from WhatsApp, you can get a thumbnail of that photo in the notification itself that then you can see in your watch for example.

[00:03:27]
Remember that you will see web push notifications on watches as well. Okay, vibration, this works on Android only on some Androids also. You will find here a vibration pattern, this is vibration, delay, or pause, vibration pause, vibration pause in milliseconds.
>> Is there limit on that? Can we do like nine million seconds?

[00:03:53]
>> You could, but yeah, so the spec has no limit to be honest on most I think this works on Firefox Android. Chrome on Android depends on the manufacturer, it's not gonna work, so it doesn't work really consistently. Hey, the vibration, you can make a sound as well in the real world doesn't work.

[00:04:17]
The idea is that you can provide an mp3 file that will be played when the notification is arrived like your own sound for that, but it doesn't work, it's in the spec, but it doesn't work. Attire, this is to identify that notification if you have more than one notification that will explain why it's useful data.

[00:04:40]
You can attach payload to the notification, a timestamp, this is so when some operating systems render the notification it says a day ago four hours ago. Because maybe you have just received the notification, but it's what generated four hours ago. Okay, make sense? Require interaction if you say true, typically it works on Android only, then the user will have to like click on it to do this method.

[00:05:16]
Renotify true if you say true, false is the default, if you say true, it's saying, hey, I'm using the same tag. So it's the same ID, it is the same authentication, I don't wanna just silently modify the contents, I wanna re-notify the user. So like vibrate again or sound again, and silent, true, or false, it's in the spec, but isn't gonna work.

[00:05:43]
So this is a lot of based on a best effort actually. The question is what about actions? What about ID? So how can I play with that? Well, there are more events in the ServiceWorker such as push such as terminal push, notification click. So if the user is clicking in one notification, you will get here in your ServiceWorker a call.

[00:06:12]
And in the event, you will receive the data, the payload that you sent, you will receive the tau, so you know exactly which notification is that one, and you will receive an optional action. So in the case, there is an action, because maybe there are no actions, You will know here which button the user has used.

[00:06:41]
So then you can just notify your server, you can send a request saying the user says yes or no to this ID. Make sense? What else you can do here? This is the only place in the whole ServiceWorker ecosystem where you can actually focus the user browser in your tab or you can open a new tab only here.

[00:07:13]
So a ServiceWorker cannot open tabs because it's in the background, it's weird, the only exception is notification click. From notification click, you can open a new tab because the user has clicked in the notification, so the user wants something, so something can be opened in the URL.
>> Is that in the event objects then?

[00:07:38]
>> The opening the noise in the clients API. So the ServiceWorker has a clients property. And the clients open a property you can query all the clients, so you can see all the clients to see if there was a client from a service workers perspective, a Window, or a PWA from that origin?

[00:07:57]
So you can query the clients and see if you have one client available. And if it's there, you can just focus on that one, so it will pop up the current available Window or you can create from here, you can open a new client. So this is known as the client API, so is the ServiceWorker client API on MDN.

[00:08:25]
You have what you can do so much all is the way you have to actually search or see all the clients available right now. And you have the open Window that will open a new Window, but clients open Window will work only within notification click. That's the only place where you have permission to actually open a Window.

[00:08:50]
So for example, here you can open a Window to one URL that says notification click and you pass the ID or whatever. You pass the tie and that will open the browser in that particular URL, because remember, everything happens in the background.
>> I'm just wondering how it knows it's in the event listener like if we create a separate function called handle notification click?

[00:09:22]
>> [COUGH] It will work because I mean, the browser knows the event that is firing the current execution, it's in the call stack. So if it's in the call stack, it will work. The same happens that you cannot today on Safari, for example, you cannot request permission for notification on payload, you need user interaction.

[00:09:44]
So the browser knows if you're executing a function, and in the cost stack, it's because there was an click event, okay, make, sense? That's the push API, then everything on top of that it's something that you need to build. So the API is this, that's how it works.

[00:10:08]
There's nothing that we mentioned before, but push messages can arrive when a web app is active or when it's closed. If it's closed, it's simple, but if it's active maybe you don't wanna open a new Window. You wanna send the message internally to the page saying, hey, there is a message notifier, maybe you notify the user internally or something like that.

[00:10:31]
And I mentioned before, you are not forced to notify the user with a payload's body, you are forced to notify something. You can take advantage of the data that the server send or not up to you.