Push Notifications

[00:00:00]
>> Kadi Kraman: A really integral part of most mobile notifications is push notifications, so a push notification, I mean we all received them probably too many. But it's the notification that you get in your notification bar from your application is triggered by the application, when it's not in the foreground usually.

[00:00:18]
And this two types of push notifications, there's remote notifications, so these are sent from a server. So a server somewhere knows your device's push notification and it sends the push notification to like Apple or to Firebase and it gets directed to your device. Or local notifications which are scheduled within your app and sent to the current device only.

[00:00:47]
Setting up remote push notifications is quite involved, I've linked to some documentations on how to do it, but basically there's that you need to set up a server. You need to register and save the push token, so it is not easily workshopable, but we are going to send some local push notifications to ourselves.

[00:01:15]
>> Kadi Kraman: To do this, let's install expo-notifications and expo-device.
>> Kadi Kraman: Now, a concept that we haven't coded before is asking for permission to send notifications. So before we can send any push notifications, we need to ask the user if they are willing to be send notifications to, and you've probably seen this alert yourself.

[00:01:45]
>> Kadi Kraman: One thing that's worth noting is that you can only ask, so these native alerts that says, can we send notifications? Can we track your background activity? Things like that, or can we access your phone camera? You can only ask them as a developer, you can only ask them once, so once you send a push like an alert, native alert with the, can we send you push notifications?

[00:02:11]
And the user says, no, you can't, then you can't ask again, the only way for the user to toggle the setting back to on, would be to go to the settings.
>> Kadi Kraman: So to ask for permission, we're going to add a little utility, and feel free to copy this function, so we'll copy this to utils/registerForPushNotificationsAsync.ts, so this will be in here.

[00:02:41]
>> Kadi Kraman: Utils and new file register for notificationsasync.ts.
>> Kadi Kraman: Love it, and feel free to copy this [COUGH].
>> Kadi Kraman: All right, so what does this do? This is a convenience function and basically, before you schedule a notification, you need to check whether you can actually send it. So the important part of this entire function is this line, sorry, it's actually this line, to request permission from the user.

[00:03:21]
And this is the bit that makes the native prompt actually show up on the user's device.
>> Kadi Kraman: So what we're doing here, is we're checking whether we're on a device because push notifications don't work on simulators and didn't work on emulators. They definitely don't work on simulators, so I can't use this iOS simulator.

[00:03:47]
Then we check what the existing permission status is, so the status, do we have all the status listed here? But it can be granted, denied, undecided, I think, let me see if there's actually permission status, there we go. Granted, undetermined, and denied, so undetermined means that we've never asked, the user has never been asked.

[00:04:14]
Granted means that they've been asked and they said yes, and denied means that they've been asked and they said no. So if the permission status is denied, and then you call this request mission Async, so this is what makes the permission pop-up show up, it's actually a no-op, it doesn't do anything.

[00:04:34]
Whereas if you do granted it also doesn't do anything, so the only time it has any effect is when the permission status is undetermined.
>> Kadi Kraman: And the reason that this is actually needed is that on as of a latest version of Android, supercilibration and android work a little bit differently, they are tied to a channel.

[00:04:55]
Android users will probably know what I mean more than I know what I mean, so there's different channels, so you can group notifications from the same app to a channel. And for the latest version of Android, you need to set up a channel before you ask for permissions, otherwise it doesn't work, so that's why this code is here.

[00:05:21]
>> Kadi Kraman: [COUGH]
>> Kadi Kraman: Okay, so what we're going to do is in our counter app here, we're going to add a button, so let's go to the counter screen, so this should be an up counter and index.
>> Kadi Kraman: And let's render a little button here, so we want a touchable opacity.

[00:05:59]
>> Kadi Kraman: We need some text, and the text should say request permission.
>> Kadi Kraman: All right, and let's give it some style, let's do style button.
>> Kadi Kraman: And we'll make the same black button that we had before, should have probably saved it, but we didn't, so we get to create it again.

[00:06:36]
So background color we'll do a theme colorBlack, get some padding, and give it a borderRadius, borderRadius: 6, and let's do a buttonText. So this will be used by the text element here, so style equals styles buttonText.
>> Kadi Kraman: Okay, so currently we just have a black button, so we need to make sure that this text is white, so we want to do a color of theme, colorWhite.

[00:07:24]
>> Kadi Kraman: So hopefully this shows up, let's do a fontWeight of bold.
>> Kadi Kraman: A textTransform.
>> Kadi Kraman: Uppercase,
>> Kadi Kraman: And don't need this fontSize, but we do want a have a letterSpacing of 1.
>> Kadi Kraman: Lovely, actually one thing I wanted to show you, this came up with someone else, so fontWeight needs to be a string.

[00:08:15]
So interestingly, on this iOS simulator it's fine, but on an Android phone when we're testing this, like passing in fontWeight as a number, actually crashed the app, so that was quite interesting.
>> Kadi Kraman: So fontWeight: bold,
>> Kadi Kraman: Okay, now we have our button and let's do an onpress.
>> Kadi Kraman: So this will be a const handleRequestPermission, which will be an arrow function.

[00:09:03]
>> Kadi Kraman: So on this TouchableOpacity, let's give it an activeOpacity as well, so it's not so highlighted, let's do 0.8 and onPress will handleRequestPermission. So in this function,
>> Kadi Kraman: We want to do const result,
>> Kadi Kraman: And we want to call this utility function that we created, so we want to await registerForpushNotificationAsync.

[00:09:39]
So this should be an asyn arrow function, and let's just console.log what happens.
>> Kadi Kraman: Okay, so I want a simulator, so I am expecting, yeah, so I'm getting null here because we're checking if we're on a device, if we're not on a device let's return null. So I need to use my phone, let's use this Android phone, so we'll do Pixel 7.

[00:10:45]
>> Kadi Kraman: Okay, so go to the counter, so now if I request permission, we're getting this permissions alert, so this alert is being triggered by our requestPermissionAsync. So let's allow, and now, you can see that this console log is telling me that my permission status is granted. And it is fine to call this function every time you want to schedule a push notification, because we've configured it in a way that it fails out early, if we don't need to ask again.

[00:11:24]
Then again, to be honest, you could even call requestPermissionAsync loads of times because it will do nothing if you already requested permission. All right, so now we have permission to give to do push notifications, let me do the same on my iOS phone, again so for next we go.

[00:11:44]
>> Kadi Kraman: And reload, okay, we're doing push notifications, so this is iOS when we're requesting permissions. So I get the native iOS push permission prompt, I'm gonna show you what happens if I say don't allow. So I say don't allow and then now my push thing is denied, and actually I wanna change this to if true.

[00:12:09]
>> Kadi Kraman: Just to show you so it will always request permission, and I press this button and literally nothing happens. And that's because I've asked the user, they've said no, then me as an app I can't ask again. So, at this point when I've denied, then as an app developer I can't ever ask request permissions again.

[00:12:28]
So the only way as a user you can toggle this on is using the settings app. So we go to settings and notifications, and then you search for the app that you want to toggle the notifications for, so in this case we are developing an Expo Go.
>> Kadi Kraman: And this will be a list of all the permissions that this app has asked, so in this case we're only asked for notification permission, so we can toggle this on.

[00:12:58]
You can also toggle things off here, so we've got a camera permission, app tracking transparency, all the good stuff. So now, if I request permission again, it will say granted because I've toggled it on from the settings.