How to Send macOS Notifications From a React Native App

On this lesson, we will be adding notifications to our application. It's one of the most common features nowadays. And unlike on mobile, the only way to send notification on the Mac is by doing it from an open application. You probably realize this if you use the macOS Mail client, you only get notifications when the client is open. But the process is fairly simple, so let's just jump into it. First, we will start by adding a bridge method, so we can call it from our application. I will call this send notification. And it's going to take a string, which will be the title and a payload, which in this case I have chosen to use a string as the payload, but you could send some other flag if you want to. Then I'm also going to add an extra parameter, which is URL. We will talk about it in a little bit. Great. So now I can move into my Swift file and implement this. I'm just going to take the code from the lesson because it's a little longer to type. And let's just walk over it. So my header, exposing the function to Objective-C, my function itself, which takes the title, the payload and a URL, which for now it's also a string. So the object that I'm looking for is the NS user notification. I'm going to create an instance of the notification. I am going to give it an identifier. I'm just creating a UUID. This comes as part of the Swift library, so I don't need to import anything. Then I'm going to place the subtitle. I'm going to put my payload as the subtitle, my title as the title. And here you will see I'm using two different things I'm casting, then NSString into a string. So this one is the Swift class for a string. And all the stuff that we have been using so far, it has this NS prefix. This is next step. This comes from the very old system, the very first macOS operating system. This is just internal conversion. You can kind of use them in any way you want. You can convert NSString to a string. You can convert, I don't know, there's a bunch of classes, but they're more or less mapped into their Swift counterpart. So you can just cast them. Now, this notification object has a user info property, which is a map. So unlike on JavaScript, where we use curly brackets on Swift, we use square brackets. And in this user info object, I'm inserting our URL that we pass into this function. So this is basically how we're going to communicate at some point. If we want to, let's say, do some special action, right, I can just insert more properties into this user info map. So in this use case, what I thought about is we're just going to add the URL. And then at some point, you know, when the user clicks a notification, what we want to do is we want to open this URL. Then I mean, if you have any other data, what you could do is just pass it to your application, pass it back to your JavaScript code so you can display something to the user. It doesn't matter. We're going to wait to attach more information. And we're also going to give it a sound name, which is just a default for my Quest. Just so that when the notification plays, the user can hear it. Finally, I reach into the NS user notification center. I get the default. So this is another pattern that you will see in some of the classes on my Quest . This is a class. You could theoretically instantiate a new instance of the notification center. But sometimes you will see this default. And this is just an instance that has already been created for you, which is the running instance of my Quest. So here I have my notification center. So I'm just kind of reaching into that. And I'm telling it to deliver my notification. Great. So now that we have that, I'm just going to recompile the app, make sure that it runs. Great. I have it in there. So I'm going to go back into VS code. Sorry, I must have closed it. And I'm going to go into my building apps native and I'm just going to add it in there. So again, it takes a title. It takes a payload and it takes a URL. It returns void here. My notification is bound to my native module. Sent notification. And finally, I just need to call it somewhere. So I'm going to go once again into my books container. I'm going to add one more button. This is going to be a notification. Sent notification. And I'm just going to pass some test values. So this test title, test payload and my URL is empty for now since I'm not going to use it. If I click on this, you will see the first time my demo course is going to ask for permission to the user. It needs to load, but then if I click on it again and this is small detail because our app is running directly from Xcode, it might not show, it might not want to show the notifications directly. If you open the control center, they have already been kind of queued up in here. So you want to test this once you have packaged your application. On the previous lesson, we already mentioned to you if you want to package your application, you need to go into product archive and you need to export an instance. But after you export the instance and it's running on its own and you send a notification, then they should properly pop up. I think I also have do not disturb right now because I was shooting this video. So let's try one more time. Let me just clear the notifications and yeah, there you go. So there are small things, like I said, when you run your application directly from Xcode it might not behave the same way as when the application is released. Great. So now let's do one more thing. Like I said, the idea would be that once the user clicks on the notification, we do something with it. Sometimes it could be open in the URL, it could be just showing the app because right now if I click on it, nothing happens. So in order to do this, I'm going to go into the app delegate file. And in here, I'm going to modify my base class. So right now the app delegate extends NS object and NS application delegate. So now I'm going to add one more delegate into this class, the user notification center delegate. And with that, after I have done all the initialization of my windows and react native, here I'm going to insert one more line. And I'm going to say NS user notification center, the default instance one more time. And the delegate is going to be this instance, this class. It's going to take care of whatever event it might come up. Then after my open desktop window function that we created on the previous lesson, I'm going to add one more function, which is the func user notification center, did activate and the user notification. Right. Whatever the deactivate dictates that whenever the user has clicked on the notification, we need to respond to it somehow. So let us do, I'm going to extract my URL, just the notification, the user info . And since I know that it's going to be there, I'm just going to cast. I'm going to tell the compiler, don't worry about it. I know that this is a map and it has dynamic properties, but I know that my URL is in there. So don't worry. I know it's going to be there. Nothing is going to crash. Then I'm going to take this. And because it might be an empty string, I still need to do some checks in here . So first, I'm going to check if it's not empty, then what I'm going to do, let me just copy this code, is I'm going to create a URL object. Right. So this is one of the things on the native side, the URLs need to have their own specialized instance of a URL object. So I'm just going to pass that URL string into this object. And then this is how you open URLs from your application, right? Like Mac OS is going to take care. If you have a URL register to any application, it takes care on its own to open the proper application. And if there's no application, then it's probably going to open Safari, right? And it's going to open your URL. So you can redirect your user to your main website. You can redirect your user to any other application. And on the else case, what I'm going to do is I'm going to toggle or status bar item. So let me recompile. And let us. Okay. One second, let me try from here. Yeah, you can see sometimes it acts funny, but I'm just going to click on it. And there you go. The application has been opened. [ Silence ]