1
00:00:02,160 --> 00:00:05,180
So now that we got push notifications working,

2
00:00:05,180 --> 00:00:09,560
let's see how we can work with them from inside the app

3
00:00:09,560 --> 00:00:12,860
so that when we press this trigger notification button,

4
00:00:12,860 --> 00:00:15,510
we send a push notification.

5
00:00:15,510 --> 00:00:17,963
For that, Expo has got us covered as well.

6
00:00:18,950 --> 00:00:21,780
Here, in triggerNotificationHandler,

7
00:00:21,780 --> 00:00:25,373
or wherever you wanna send a push notification,

8
00:00:26,330 --> 00:00:29,130
in the place where you wanna trigger

9
00:00:29,130 --> 00:00:32,770
that a push notification should be delivered to some device,

10
00:00:32,770 --> 00:00:37,770
you need to send a http request to Expo's servers.

11
00:00:38,900 --> 00:00:41,010
So we can do this with the fetch API,

12
00:00:41,010 --> 00:00:43,140
which is available in React-Native,

13
00:00:43,140 --> 00:00:46,180
and the URL to which you need to send this

14
00:00:46,180 --> 00:00:51,180
is https://exp.host/--/API/v2/push/send.

15
00:01:02,660 --> 00:01:04,960
Make sure you have no typo in there.

16
00:01:04,960 --> 00:01:09,490
That is the URL to Expo's push notification server,

17
00:01:09,490 --> 00:01:13,500
which we will leverage to deliver our push notification

18
00:01:13,500 --> 00:01:15,210
to a different device.

19
00:01:15,210 --> 00:01:17,770
This, in the end, was used behind the scenes,

20
00:01:17,770 --> 00:01:20,113
when we used this testing tool here.

21
00:01:21,440 --> 00:01:23,840
So we need to send a request there,

22
00:01:23,840 --> 00:01:25,690
and we need to configure this request

23
00:01:25,690 --> 00:01:27,000
with the second argument

24
00:01:27,000 --> 00:01:29,360
we can provide to the fetch method here,

25
00:01:29,360 --> 00:01:31,060
to the fetch function.

26
00:01:31,060 --> 00:01:34,960
There we need to set the http request method to POST

27
00:01:34,960 --> 00:01:37,817
because we need to send a post request to that URL,

28
00:01:38,700 --> 00:01:41,103
and we need to add some special headers.

29
00:01:42,000 --> 00:01:46,200
The headers we need to add here are the Accept header,

30
00:01:46,200 --> 00:01:49,793
where we should accept application/json,

31
00:01:51,780 --> 00:01:56,780
the Accept-Encoding header,

32
00:01:56,810 --> 00:02:00,623
where we accept gzip, deflate,

33
00:02:03,110 --> 00:02:05,900
and the Content-Type header,

34
00:02:05,900 --> 00:02:09,643
where we also specify application/json.

35
00:02:12,000 --> 00:02:15,460
In addition to those headers, we now need to set the body,

36
00:02:15,460 --> 00:02:18,960
which will hold the actual message we wanna send.

37
00:02:18,960 --> 00:02:21,310
Message is now, not just a string,

38
00:02:21,310 --> 00:02:23,520
but an object, because after all,

39
00:02:23,520 --> 00:02:26,673
there were a lot of things we could configure.

40
00:02:27,600 --> 00:02:32,600
So, here on body, we simply provide an object,

41
00:02:33,470 --> 00:02:34,670
however, not like this,

42
00:02:34,670 --> 00:02:36,990
instead it needs to be in json format,

43
00:02:36,990 --> 00:02:41,580
so we stringify this object with JSON.stringify

44
00:02:41,580 --> 00:02:44,560
and then in there we can set up various things.

45
00:02:44,560 --> 00:02:47,423
Most importantly, we need the to property.

46
00:02:48,870 --> 00:02:52,550
This is a required property, which then needs our token,

47
00:02:52,550 --> 00:02:57,140
the token we're getting when we're registering.

48
00:02:57,140 --> 00:02:59,580
Now currently, we only have the token here,

49
00:02:59,580 --> 00:03:01,970
we can simply use useState

50
00:03:03,050 --> 00:03:08,050
to manage the token as state of our component.

51
00:03:09,660 --> 00:03:13,963
There we got the pushToken and the setPushToken function.

52
00:03:17,090 --> 00:03:21,214
We wanna set the push token once we got the token, here,

53
00:03:21,214 --> 00:03:26,214
setPushToken to token and then go down

54
00:03:27,280 --> 00:03:30,030
to the triggerNotificationHandler function

55
00:03:30,030 --> 00:03:35,030
and there we wanna send to our pushToken here.

56
00:03:36,320 --> 00:03:38,760
Now we can configure all the other fields

57
00:03:38,760 --> 00:03:41,750
we can set on notifications.

58
00:03:41,750 --> 00:03:44,080
We can for example, add the data field

59
00:03:44,080 --> 00:03:49,080
and set this to extraData some data.

60
00:03:49,280 --> 00:03:51,960
But of course, most of all, we can also set a title

61
00:03:51,960 --> 00:03:53,620
which will be displayed

62
00:03:53,620 --> 00:03:56,603
and there that could be send via the app,

63
00:03:58,040 --> 00:04:00,220
whoops sent via the app,

64
00:04:00,220 --> 00:04:04,410
and a body for the push notification which could be

65
00:04:04,410 --> 00:04:08,283
this push notification was sent via the app.

66
00:04:09,430 --> 00:04:14,430
Now this will send a http request to Expo's back-end servers

67
00:04:14,880 --> 00:04:17,690
which then, in turn, will do all the rest

68
00:04:17,690 --> 00:04:20,700
for delivering this push notification

69
00:04:20,700 --> 00:04:23,267
to the device with this pushToken.

70
00:04:25,090 --> 00:04:27,563
So, let's save this, and let's give it a try.