-: So now that we got push notifications working, 2 2
let's see how we can work with them from inside the app 3 3
so that when we press this trigger notification button, 4 4
we send a push notification. 5 5
For that, Expo has got us covered as well. 6 6
Here, in triggerNotificationHandler, 7 7
or wherever you wanna send a push notification, 8 8
in the place where you wanna trigger 9 9
that a push notification should be delivered to some device, 10 10
you need to send a http request to Expo's servers. 11 11
So we can do this with the fetch API, 12 12
which is available in React-Native, 13 13
and the URL to which you need to send this 14 14
is https://exp.host/--/API/v2/push/send. 15 15
Make sure you have no typo in there. 16 16
That is the URL to Expo's push notification server, 17 17
which we will leverage to deliver our push notification 18 18
to a different device. 19 19
This, in the end, was used behind the scenes, 20 20
when we used this testing tool here. 21 21
So we need to send a request there, 22 22
and we need to configure this request 23 23
with the second argument 24 24
we can provide to the fetch method here, 25 25
to the fetch function. 26 26
There we need to set the http request method to POST 27 27
because we need to send a post request to that URL, 28 28
and we need to add some special headers. 29 29
The headers we need to add here are the Accept header, 30 30
where we should accept application/json, 31 31
the Accept-Encoding header, 32 32
where we accept gzip, deflate, 33 33
and the Content-Type header, 34 34
where we also specify application/json. 35 35
In addition to those headers, we now need to set the body, 36 36
which will hold the actual message we wanna send. 37 37
Message is now, not just a string, 38 38
but an object, because after all, 39 39
there were a lot of things we could configure. 40 40
So, here on body, we simply provide an object, 41 41
however, not like this, 42 42
instead it needs to be in json format, 43 43
so we stringify this object with JSON.stringify 44 44
and then in there we can set up various things. 45 45
Most importantly, we need the to property. 46 46
This is a required property, which then needs our token, 47 47
the token we're getting when we're registering. 48 48
Now currently, we only have the token here, 49 49
we can simply use useState 50 50
to manage the token as state of our component. 51 51
There we got the pushToken and the setPushToken function. 52 52
We wanna set the push token once we got the token, here, 53 53
setPushToken to token and then go down 54 54
to the triggerNotificationHandler function 55 55
and there we wanna send to our pushToken here. 56 56
Now we can configure all the other fields 57 57
we can set on notifications. 58 58
We can for example, add the data field 59 59
and set this to extraData some data. 60 60
But of course, most of all, we can also set a title 61 61
which will be displayed 62 62
and there that could be send via the app, 63 63
whoops sent via the app, 64 64
and a body for the push notification which could be 65 65
this push notification was sent via the app. 66 66
Now this will send a http request to Expo's back-end servers 67 67
which then, in turn, will do all the rest 68 68
for delivering this push notification 69 69
to the device with this pushToken. 70 70
So, let's save this, and let's give it a try.