1 00:00:02,090 --> 00:00:04,380 Thankfully, handling push notifications 2 00:00:04,380 --> 00:00:06,400 is made easy with Expo. 3 00:00:06,400 --> 00:00:09,840 And there are various steps which we already implemented, 4 00:00:09,840 --> 00:00:12,020 which we will also need to implement 5 00:00:12,020 --> 00:00:15,450 if we are looking to handle push notifications. 6 00:00:15,450 --> 00:00:19,430 For example, we also need to ask for permission, 7 00:00:19,430 --> 00:00:21,880 if we want to get push notifications. 8 00:00:21,880 --> 00:00:23,250 So that permission, 9 00:00:23,250 --> 00:00:26,750 which we're getting here for receiving notifications, 10 00:00:26,750 --> 00:00:28,080 that will in the end enabled 11 00:00:28,080 --> 00:00:31,520 both local and push notifications you could say. 12 00:00:31,520 --> 00:00:35,430 So that is code we absolutely need on iOS only, 13 00:00:35,430 --> 00:00:36,823 but they are we need it. 14 00:00:37,800 --> 00:00:40,210 We will also need our handlers 15 00:00:40,210 --> 00:00:43,230 for handling incoming notifications when the app 16 00:00:43,230 --> 00:00:46,710 is in foreground and when the app is in background, 17 00:00:46,710 --> 00:00:49,080 because actually push notifications 18 00:00:49,080 --> 00:00:53,420 will still cause a local notification once they arrive. 19 00:00:53,420 --> 00:00:57,130 So for handling the message, once it's on our device, 20 00:00:57,130 --> 00:00:59,430 our code is exactly the same. 21 00:00:59,430 --> 00:01:01,820 So this does not change. 22 00:01:01,820 --> 00:01:02,860 But what will change, 23 00:01:02,860 --> 00:01:06,920 of course, is how we schedule a notification. 24 00:01:06,920 --> 00:01:09,760 We're not going to do this with this code anymore. 25 00:01:09,760 --> 00:01:12,870 Instead, I first of all wanna start with showing 26 00:01:12,870 --> 00:01:14,420 you how a message could be sent 27 00:01:14,420 --> 00:01:17,060 from totally outside of the device. 28 00:01:17,060 --> 00:01:18,800 And then as a second step, 29 00:01:18,800 --> 00:01:21,280 I will show you how our app here, 30 00:01:21,280 --> 00:01:24,210 could send a notification to itself, 31 00:01:24,210 --> 00:01:27,010 but to itself or running on a different device 32 00:01:27,010 --> 00:01:28,363 on a different user. 33 00:01:29,630 --> 00:01:30,740 That would be the scenario 34 00:01:30,740 --> 00:01:33,130 you have in a chat app for example. 35 00:01:33,130 --> 00:01:36,150 That your app wants to send a notification to, well, 36 00:01:36,150 --> 00:01:39,500 the same app, but the same app on a different device, 37 00:01:39,500 --> 00:01:43,540 the device of the user to whom you just send a chat message. 38 00:01:43,540 --> 00:01:44,890 That will be the second step. 39 00:01:44,890 --> 00:01:46,960 First of all, I'll show you how to send 40 00:01:46,960 --> 00:01:49,840 a notification totally from outside the app. 41 00:01:49,840 --> 00:01:52,590 But for that one important step is missing. 42 00:01:52,590 --> 00:01:55,450 And that's that identification with Google's 43 00:01:55,450 --> 00:01:59,110 and Apple's push servers, because as I mentioned, 44 00:01:59,110 --> 00:02:00,700 we will need to do that. 45 00:02:00,700 --> 00:02:05,410 And those servers will then give us this token, this ID, 46 00:02:05,410 --> 00:02:09,130 which we ultimately need to send push notifications. 47 00:02:09,130 --> 00:02:12,060 And that's therefore code we have to add here. 48 00:02:12,060 --> 00:02:15,310 Besides asking for permission here, 49 00:02:15,310 --> 00:02:18,470 if we plan on receiving push notifications, 50 00:02:18,470 --> 00:02:22,910 we also need to sign this app installation up 51 00:02:22,910 --> 00:02:25,560 with those official push servers. 52 00:02:25,560 --> 00:02:29,100 So this app running on a device of our user, 53 00:02:29,100 --> 00:02:33,040 needs to register itself with those official push servers. 54 00:02:33,040 --> 00:02:35,550 And for that, we need to add some code. 55 00:02:35,550 --> 00:02:38,710 Now we will need to make some changes here, 56 00:02:38,710 --> 00:02:40,870 to our permissions though 57 00:02:40,870 --> 00:02:44,700 or not to the permissions we'll still need those. 58 00:02:44,700 --> 00:02:47,150 But after we have those permissions 59 00:02:47,150 --> 00:02:50,860 will now need to get that token, that ID. 60 00:02:50,860 --> 00:02:53,050 We'll need to sign our app up 61 00:02:53,050 --> 00:02:56,790 with those official push notification servers 62 00:02:56,790 --> 00:02:59,110 and get that ID which then allows us 63 00:02:59,110 --> 00:03:01,810 to use the ID to push notifications 64 00:03:01,810 --> 00:03:05,050 to this app installation on this device. 65 00:03:05,050 --> 00:03:09,890 Now, thankfully, Expo makes that super, super easy. 66 00:03:09,890 --> 00:03:11,480 It makes it very simple. 67 00:03:11,480 --> 00:03:13,790 Because the team behind Expo, 68 00:03:13,790 --> 00:03:15,620 basically did not just give us 69 00:03:15,620 --> 00:03:18,240 all these nice JavaScript functions 70 00:03:18,240 --> 00:03:20,600 and API's for building React Native apps 71 00:03:20,600 --> 00:03:22,010 in a convenient way, 72 00:03:22,010 --> 00:03:25,010 they also have their own backend server, 73 00:03:25,010 --> 00:03:27,560 to which you can talk through some functions, 74 00:03:27,560 --> 00:03:29,840 where they have all the logic 75 00:03:29,840 --> 00:03:33,490 for signing up an app with those official push servers 76 00:03:33,490 --> 00:03:35,750 and getting that permission. 77 00:03:35,750 --> 00:03:37,810 Actually, to be precise, 78 00:03:37,810 --> 00:03:42,280 Expo does not sign our app up with those services. 79 00:03:42,280 --> 00:03:46,740 Instead, Expo signed itself up with those services. 80 00:03:46,740 --> 00:03:51,540 And it allows us to use its sign up you could say. 81 00:03:51,540 --> 00:03:53,920 So Expo, the team and the software 82 00:03:53,920 --> 00:03:57,030 does all the heavy lifting behind the scenes for us, 83 00:03:57,030 --> 00:04:00,220 so that we don't manually need to sign up our app, 84 00:04:00,220 --> 00:04:04,070 but we can leverage Expo's existing server 85 00:04:04,070 --> 00:04:08,390 to push notifications through Expo's subscription 86 00:04:08,390 --> 00:04:10,680 with those official servers 87 00:04:10,680 --> 00:04:15,320 to our different app installations, users and devices. 88 00:04:15,320 --> 00:04:17,570 That is how you can think about that. 89 00:04:17,570 --> 00:04:19,310 And that will make implementing 90 00:04:19,310 --> 00:04:24,070 push notifications with Expo very, very easy. 91 00:04:24,070 --> 00:04:27,560 I can tell you that if you would need to sign up manually, 92 00:04:27,560 --> 00:04:30,270 that would be a lot of steps, a lot of work. 93 00:04:30,270 --> 00:04:33,850 And Expo is handling this for you in a very, 94 00:04:33,850 --> 00:04:35,430 very elegant way. 95 00:04:35,430 --> 00:04:38,160 Expo really makes it easy to deliver 96 00:04:38,160 --> 00:04:41,263 push notifications to your applications. 97 00:04:43,250 --> 00:04:44,610 What do you need to do? 98 00:04:44,610 --> 00:04:47,470 Well, after we got our permissions here, 99 00:04:47,470 --> 00:04:49,470 in the next then block, 100 00:04:49,470 --> 00:04:54,000 we want to tell Expo and their own server 101 00:04:54,000 --> 00:04:55,580 which they have for us, 102 00:04:55,580 --> 00:04:59,880 to sign our app up with those official push servers. 103 00:04:59,880 --> 00:05:02,510 We'll need to tell Expo to basically sign 104 00:05:02,510 --> 00:05:04,340 our app up so to say. 105 00:05:04,340 --> 00:05:06,520 Behind the scenes Expo will do all of that, 106 00:05:06,520 --> 00:05:08,650 behind the scenes Expo will sign up, 107 00:05:08,650 --> 00:05:11,260 and then our app will leverage Expo 108 00:05:11,260 --> 00:05:14,050 to deliver push notifications. 109 00:05:14,050 --> 00:05:16,610 Now for that, we need to ensure that we only reach 110 00:05:16,610 --> 00:05:20,050 this then block if we do have an active permission. 111 00:05:20,050 --> 00:05:23,420 Therefore here, if the permission was not granted, 112 00:05:23,420 --> 00:05:25,100 we don't really wanna return, 113 00:05:25,100 --> 00:05:28,160 because then the next then block would still be triggered, 114 00:05:28,160 --> 00:05:29,920 even though we don't have permission. 115 00:05:29,920 --> 00:05:32,173 Instead, here I wanna throw a new error. 116 00:05:33,160 --> 00:05:35,763 Permission not granted. 117 00:05:38,590 --> 00:05:41,070 With this we'll ensure that this code 118 00:05:41,070 --> 00:05:43,450 only runs if we do have permissions. 119 00:05:43,450 --> 00:05:45,050 You will see I now get a warning 120 00:05:45,050 --> 00:05:46,920 that permissions were not granted, 121 00:05:46,920 --> 00:05:50,150 even though we did grant permissions before here. 122 00:05:50,150 --> 00:05:54,080 The reason for that simply can be seen if we console log, 123 00:05:54,080 --> 00:05:56,640 this status object here. 124 00:05:56,640 --> 00:05:58,640 If we do that, we see indeed, 125 00:05:58,640 --> 00:06:00,833 I do have a status of granted here. 126 00:06:03,900 --> 00:06:06,793 But before that we have a status of undetermined. 127 00:06:08,500 --> 00:06:10,730 Which simply means it's still figuring out 128 00:06:10,730 --> 00:06:12,633 whether we have permissions or not. 129 00:06:13,570 --> 00:06:15,210 That is okay because ultimately 130 00:06:15,210 --> 00:06:17,210 it should see that we do have them. 131 00:06:17,210 --> 00:06:18,710 So we can simply get rid of the warning 132 00:06:18,710 --> 00:06:20,473 by adding a catch block here. 133 00:06:22,340 --> 00:06:25,403 And then here for the moment, I'll not return anything. 134 00:06:27,300 --> 00:06:29,580 But with that we no longer have an unhandled 135 00:06:29,580 --> 00:06:33,040 promise rejection and therefore this warning goes away. 136 00:06:33,040 --> 00:06:35,580 Again, getting the permission should work. 137 00:06:35,580 --> 00:06:37,270 Now with those permissions out of the way, 138 00:06:37,270 --> 00:06:40,270 let's see how we can get this push token 139 00:06:40,270 --> 00:06:42,583 which we need to deliver messages.