Check out a free preview of the full React Native, v3 course
The "Scheduling Notifications" Lesson is part of the full, React Native, v3 course featured in this preview video. Here's what you'd learn in this lesson:
Kadi demonstrates how to schedule a notification using the Expo Notifications API to schedule a local notification with a title and trigger time. She also explains the difference between foreground and background notifications and how to handle each.
Transcript from the "Scheduling Notifications" Lesson
[00:00:00]
>> Kadi Kraman: Now, let's schedule a notification, all right, so I've switched this from my iOS simulator to the screen mirroring of my android phone. So we can see how we're testing the push notifications, right. So here instead of handle request permission, let's call this schedule notification. And what we're doing is we're checking if we can schedule a notification, so if results is granted.
[00:00:44]
>> Kadi Kraman: And I'll do an else, so this is to do but I'll do an else here as well. So I'll just do a quick alert that says unable to schedule notification and enable the notification permission for Expo go in settings. Actually, it might be worth I didn't do just an example of that, but it might be worth adding a if device, how do we do this here?
[00:01:29]
Yeah, if device is device, this is device from Expo device, so I just don't wanna get this alert on a simulator.
>> Kadi Kraman: Yeah, so if it is a device then we'll give the alert, otherwise we can just fail silently because it will be on a simulator, so we'll be the ones doing it.
[00:02:08]
All right, so if it is granted, we want to schedule a notification, so this will be asynchronous, so we'll await notifications.
>> Kadi Kraman: We should import notifications, so let's import star as notifications from Expo notifications. And we want to await notifications schedule notification async, so this will schedule a local notification for ourselves on our device.
[00:02:52]
And for the content, we can pass in a title so this will be our I'm a notification from your app, let's add a little emoji here as well.
>> Kadi Kraman: And then the other config option that we're gonna pass in is the trigger, so when do we want to trigger it?
[00:03:20]
You can look at the docs, actually one, we can look at the docs now, [LAUGH]. So extra notifications there we go, so the trigger, so you can do like two sec, you can pass in the amount of seconds you can pass in a day. So we go to date time, so this will be the input, there you go.
[00:03:45]
So you can do a date, you can do a time interval, you can do a daily push notification, a weekly, a yearly or a particular second or a particular timestamp. So look at the docs, this is actually quite flexible when you can schedule it. But in our case, let's just trigger it after 5 seconds, so we can see it immediately.
[00:04:11]
All right, so we should probably rename our button as well, so let's call this schedule notification.
>> Kadi Kraman: Lovely, so now let's see, I don't have any settings, can you get rid of this? Okay, lovely, so notifications, so I'm gonna schedule notifications, so one thing to note is that foreground and background notifications are treated differently.
[00:04:46]
So when your app is open, your background notification isn't going to end up in your notifications bar. So I'm going to press the button and immediately background the app. So press the button, background the app and then open the notifications bar, so I'm hoping again, notification here. [SOUND] There you go I'm a notification from your app, so when I open this, it will open the app.
[00:05:13]
>> Kadi Kraman: And it'll work the same on iOS, I promise [LAUGH], so yeah. So the important thing, I guess to note here is I said, if you have your app open, this will be a foreground notification. And you can add handling for foreground notifications, so you can look at the documentation for that but by default they won't show up.
[00:05:37]
So if I do schedule a notification here and then just look at my notification bar and wait for five seconds, nothing happens. So nothing happens because my app is literally open here.
>> Kadi Kraman: There you go. So this is what it looks like on Android, and this is what it looks like on iOS.
[00:06:08]
Yes.
>> Speaker 2: This is not a question specific notifications, but the Google services.json file in general. Alexander's asking, do you have any tips for passing GoogleServices.json to EAS while keeping it in the gitignore?
>> Kadi Kraman: While keeping it in the gitignore, why would you keep it in the gitignore? I think, okay, so there's this tricky thing about secrets from people coming from the web.
[00:06:45]
Actually, we have an iOS developer in the audience, would you put the Google services P list, is it a secure file in your opinion?
>> Speaker 2: Bundling it in the app?
>> Kadi Kraman: Yeah, would you add it to get ignore or not?
>> Speaker 2: Yes, you would not want the secrets in your Git repository to keep them out of Github, but if they're required bundled in the app to run for push notifications.
[00:07:11]
>> Kadi Kraman: Yeah.
>> Speaker 2: So yeah, I guess that's probably what they're asking is are you generating them?
>> Kadi Kraman: Yeah, so basically to set up your firebase is a service from Google and you use it for analytics, so Google analytics got merged with Firebase. So if you want to do analytics on a mobile app, you need to install React Native Firebase.
[00:07:32]
And also it's in different personifications on Android but the way you set it up is you go to a firebase and then you sign up and you get this Google services p list. And then for Android, I think it's a json file but you get the file for android.
[00:07:51]
And then this file has some kind of Ids that distinguish your app to the firebase services. So the only work in conjunction to your app so it needs to be the same app ID. So it's not like someone could take this app bundle and use it in a different app, it needs to be your app.
[00:08:13]
And then these files get bundled within your app bundle and delivered to the user's phone. So anything delivered to the user's phone inherently can't be completely secret. So on the web, you could just do this and then you can look at the network traffic and you can look at the code, so it's more difficult to do the same thing for a mobile app.
[00:08:40]
But you could take it off the phone, you could like extract it you could see everything that's shipped in your mobile bundle in plain text. So that's why anything you ship with your React Native app including the p list and Google services stuff is inherently not secret. And therefore those spirals, unless your repository is public to the world, I genuinely wouldn't put them in gitignore myself, because it's almost communicating misinformation.
[00:09:15]
Because when you put it in gitignore and treat it as a secret, then it makes you think. Anything that I put in these [INAUDIBLE] inject into my JavaScript bundle at build time, they're gonna be secret, like server-side, but that is not true. So anything you put in your React Native app that gets delivered to the user is not secret.
[00:09:35]
>> Speaker 2: One note on that Tiff, they might be asking because secret scanning GitHub will mark those as secrets. So we did have to go through the hoops to get it out of there and we basically just generated.
>> Kadi Kraman: Yeah.
>> Speaker 2: And pull it from a secret storage or do dnv or something like that.
[00:09:49]
>> Kadi Kraman: Yeah.
>> Speaker 2: Yeah, I agree, you can lock down the key to only work on your app bundles and stuff.
>> Kadi Kraman: Yeah, exactly, I've had this [LAUGH] conversation about secrets a lot. Which is why I think I've gone for a bit of a tangent to the original question was actually, I think it was how do you use EAS with your Google services files and keep a secret?
[00:10:14]
So there is EAS secrets, which you can use and I think we have handling for this. We have documentation for this, eas secrets.
>> Kadi Kraman: Yeah, there's actually an example for the Google services_Info.plist here, so if you haven't seen this doc, this might actually be helpful. And also saying what I said about these things not being secrets, I think this is just like a good thing to know.
[00:10:55]
Because a lot of people end up reusing the secrets by putting actual secrets in there. So if there's anything you get from the API, just like an API secret, then it shouldn't be included in your app code. So for example, you're using OpenAPI on your React Native app and you have the OpenAPI key.
[00:11:21]
So this is tied to yourself and how much it's used will be how much you get charged. So this is a proper secret you don't want someone else to accidentally get it you want to be able to revoke it and change it. But if you bundle it with your app bundle then it will be technically available for anyone to see.
[00:11:43]
And also you can't revoke it because you'd have to submit another app in order to do that. So the way to get around it is the same way that you would on, if you were building a website. So you build a server, so it can literally be a cloud function or a Lambda or something.
[00:11:57]
And that server will have the API key and do the sensitive your operation and your mobile app will call your API and that way you can always rotate your secrets.
>> Kadi Kraman: So that's my attention on secrets. [LAUGH]
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops