![Electron, v3](https://static.frontendmasters.com/assets/courses/2023-09-19-electron-v3/thumb.webp)
Check out a free preview of the full Electron, v3 course
The "Triggering Notifications" Lesson is part of the full, Electron, v3 course featured in this preview video. Here's what you'd learn in this lesson:
Steve demonstrates how to create and trigger OS desktop notifications by utilizing the Notification module.
Transcript from the "Triggering Notifications" Lesson
[00:00:00]
>> In term, I'm trying to think of, there are some other niceties. Some of them are cool, but there's the ability to trigger notifications, right, which I think it is the exact same API as the browser. And last time when we did this, it was cool because it was really hard to trigger notifications from the browser or it wasn't widely supported like when we did this four or five years ago.
[00:00:26]
Now it's new notification and you can send it. It's very much the same API in the browser but you can also do it from Node, which is super cool. So now you can you can pull in, You can say notification. Again, this is the main process, so this is on the Node side.
[00:00:45]
You can theoretically trigger notification from the browser from your nodes. So if you had a long running process of like, hey, go save this thing. Or I kicked off downloading a bunch of Docker containers that are happening in the main process, maybe away from the browser, but you could still trigger the notification right from the node context.
[00:01:06]
So for instance, we can, let's do another global shortcut. Let's call this one, what do I do? I wanna say, let's read from the clipboard, trying to think what I wanna do here. And what we're gonna do is, Let's see, let's do x. We're just gonna try to, you could theoretically have scripts that, if it's markdown, turn it into HTML just to bring everything together in my clipboard and then write it back to the clipboard, right?
[00:01:46]
Or if you had image processing, you're like, I have something in my clipboard, I wanna resize it to this thing. And then you could theoretically register a shortcut without even really much of a UI to speak of whatsoever. And we'll talk about other ways if you don't feel like this app needs a whole bunch of UI, but you want some of these things.
[00:02:01]
You could do any of this stuff and you could theoretically like, we'll say content is readText. And that was a content = toUpperCase, yeah, whatever. It doesn't really matter. The point is that you could theoretically have like all sorts of different processes or maybe just UI agnostic that are happening in the background.
[00:02:24]
And then you could say, we're gonna write it. And then we do new notification. Yeah, we'll do that eventually, dot show, and we'll say that the title is, Capitalized Clipboard Content. Do I want body in this case? I can't remember if it's body or subtitle. I think it depends a little on the OSes.
[00:02:54]
I think, on Mac OS, you only get two things. Let's also put in a subtitle. I forgot, now, I will tell you cuz I've done this enough times in my life. I know that I'm not gonna see the notification because I'm presenting, and Mac OS automatically silences notifications.
[00:03:14]
I know this cuz in 2017 one time we had an hour where I was debugging code to realize that my notifications was just muted. I will just say that in case you were somebody who has your notifications muted right now and you do not see this. Just learn from six years ago me and some of the mistakes that I have made.
[00:03:31]
So this is now CommandOrControl+Shift+Alt+x. That's a lot, but we'll go with it. And I don't think that's registered to anything else right now, but we'll find out. So I'm gonna grab this right here. We'll copy it and then we should be able. And I should see, yeah, yeah, we have a body and a subtitle, you can do all of them in macOS.
[00:03:52]
And yeah, so you can trigger notifications, even from things that have no UI process whatsoever, right? And all of that kind of in place as well, which is, I think, super cool. These OS integrations become, I think, even if you feel like or you're like, I [INAUDIBLE] need to make an app but maybe I have scripts with things that I'm doing that could benefit from some of these things and the ability to have all this integration.
[00:04:15]
Or I just needed some convenience tools for my day to day job. You can whip this stuff up super quickly and use it in your day to day. So we did notifications, we did keyboard shortcuts. Let's see, what else do we wanna talk about? You know what would be kinda cool?
[00:04:34]
It'd be kinda cool if I could put it up here, right, and have that instead of having a full app and maybe just click up here and have it. I feel like an app like this, it makes sense, right? And then you could add up all the keyboard shortcuts and stuff along those lines.
[00:04:51]
I feel like that's a good experience. So let's do that. Let's make it a, either menu bar or a system tray icon. Yeah.
>> So, we've got global shortcuts for wherever you are and we've got accelerated menu things. Does a hotkey inside the application, it's only registered in the application, have to be also a menu accelerated command?
[00:05:15]
>> I think so. I think that it's actually possibly true for like at least macOS writ large, right? Insofar that a fun fact, I will just say this rather than give you a full tour. In macOS, for instance, you can actually, any app, you can give anything a hotkey if it doesn't already have one, right?
[00:05:38]
And so I think that the hockey are bound to menu items in macOS, barring some browser ability to also listen for keystrokes. Cuz as you know, you can like do certain keystrokes in web apps as well. So obviously, what you can do in the browser, aside from all OS integration, probably still counts.
[00:05:56]
But I think for the most part, in terms of the OS level kind of stuff, I do think, at least in macOS, has to be bound to a menu item, right? Now obviously you can listen for key up and key down in the browser and get the correct combination.
[00:06:10]
There are libraries that will multiplex all of that and put it together. So yes, ish. But for the electron part, which is, you know, the part I feel most qualified to answer right now, that is true. Obviously with asterisks that there's dark ways to do that kinda stuff.
[00:06:27]
>> I'd forgotten about all the browser keystroke listening-
>> Yah, those are also available to you as well. These are cool because for that, I didn't even need the UI to be open, right? That was just a node process that can now do it running in the background, which is kind of cool.
[00:06:46]
For those who I think get either needs to be registered as a global shortcut or it needs to be bound to a menu item as far as I know.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops