Learn how to send push notifications to users, even after they have closed an Angular app in the browser. 

Check out the full lesson code here: https://angularfirebase.com/lessons/send-push-notifications-in-angular-with-firebase-cloud-messaging

Official Firebase Cloud Messaging (FCM) docs: https://firebase.google.com/docs/cloud-messaging/
2024-02-04T08:16:35.054Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
91cb7709-b9da-433c-b07e-e9c2a0c74ece
cff992c52d42d440e2b393ca951e42532e4c3834e2b6c1e1e94d6f2b7a7f9b76
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
Firebase Cloud Messaging allows you to send push notifications throughout multiple devices even after an app's been closed.
It does this on the web by registering a service worker that listens for messages from Firebase in the background.
As you can see here, we've completely closed our Angular app in the browser, but we still get this push notification on our operating system directly from Firebase.
Many apps do this to notify their users of important information such as Slack which will notify users when they have a new mention on a channel.
Let's get started by building this worker into our Angular app.
Create a new file in the source directory called cloudmessaging s w dot j s.
Then inside that file, we'll import the Firebase SDK and initialize it with only the messaging sender ID.
Then we set a variable with the Firebase messaging library.
That's actually all we need to do to set up the background worker.
Everything else will happen automatically.
However, to ensure compatibility with modern browsers, we need to add a manifest dot JSON file.
Inside this file, we include the GCM sender ID, which is the same for all applications, so keep it the same as it appears in this video.
And then you'll wanna link the manifest in the head of your index dot HTML file.
To ensure these 2 newly created files get included when we build the app, we wanna add them to the at angularcli.jsonfile.
With the initial setup down, we can start building the service.
We're going to need both the AngularFire database and AngularFire auth modules as well as the Firebase SDK.
We're going to keep track of the most recent message with a behavior subject which is just an observable that we can push new data to.
So the way cloud messaging works is the browser will first ask the user for permission for an app to send them cloud messages, and then Firebase will give us a token once that permission has been entered.
What we need to do is save that token with the user's auth ID on the Firebase database so we can use it on the back end when we start sending messages with Firebase Cloud Functions.
To do that, we will subscribe to the AngularFire auth state taking only one just to prevent a long running subscription.
Then we'll save the auth ID as the key with the token as the value in a collection called FCM tokens in the database.
The token will change anytime the user clears their browser cache, so it's important to update this token periodically.
In this example, we're going to update the token every time this get permission function runs.
This will happen whenever the browser asks the user for permission to send them notification.
The request permission function will trigger that pop up that the user has to confirm.
And then from there, we can get the token and update the token in the database.
The last thing we need to do is listen for new messages, and then we'll update that behavior subject whenever a new message is received.
We do this by calling on message, which will return the message from Firebase, and then we can call next on our behavior subject and pass it that value.
So now we can use these functions in the app component or any other component that you wanna set up messaging with.
When the user is actively using the app, we wanna show the notification location inside the app itself.
We don't want it to come from some external source, which would be distracting.
So to do that, we inject the messaging service and first get permission.
And then we set up the receive message function and then set a variable on the component to that behavior subject.
Again, a behavior subject is just an observable so we can unwrap it in the template with the async pipe.
So here we're handling the notification in Angular and it should look something like this.
Notice the message appears directly in our Angular app and not coming from the external browser or operating system.
If the app were closed at the time this message was sent, the service worker would take over and send the message to the external browser or operating system.
Now that we know how to receive messages, we need a way to send them, which I'm going to do with a Firebase Cloud function.
If you don't want to deploy a Cloud function, check out the link in the scription where I provide a kernel command to send push messages over HTTP.
But in most cases, you're going to be sending push notifications when something happens in your database, so it's a perfect fit for Firebase Cloud Functions.
In this example, we're going to create a function called fcm send and it's going to run during the on create trigger in the database.
So anytime new data is added to the messages for a given user, this function will run.
So we'll define a variable called payload and that's the actual message that's going to be seen by the user.
From there we'll tap into the admin database and get the token for that user.
So we'll chain together a couple promises and then once we have the actual token, we can send that to the Firebase Messaging Library.
We call send to device and send it the token as well as the payload or the message.
This is what will actually trigger the message to be sent to that device.
And that's pretty much it.
Pretty simple Cloud Function.
Go ahead and deploy the function and you should be ready to start sending messages to your users.
As you can see here, we update some data on the messages node, and the user is automatically updated with that push notification.
If this video helped you please like and subscribe.
And if you're serious about Angular and Firebase consider becoming a pro member at angularfirebase.com where you'll get a free copy of my book, The Angular Firebase Survival Guide.
Thanks for watching and I'll talk to you soon.

Speaker 0: Firebase Cloud Messaging allows you to send push notifications throughout multiple devices even after an app's been closed. It does this on the web by registering a service worker that listens for messages from Firebase in the background. As you can see here, we've completely closed our Angular app in the browser, but we still get this push notification on our operating system directly from Firebase. Many apps do this to notify their users of important information such as Slack which will notify users when they have a new mention on a channel. Let's get started by building this worker into our Angular app.

Create a new file in the source directory called cloudmessaging s w dot j s. Then inside that file, we'll import the Firebase SDK and initialize it with only the messaging sender ID. Then we set a variable with the Firebase messaging library. That's actually all we need to do to set up the background worker. Everything else will happen automatically.

However, to ensure compatibility with modern browsers, we need to add a manifest dot JSON file. Inside this file, we include the GCM sender ID, which is the same for all applications, so keep it the same as it appears in this video. And then you'll wanna link the manifest in the head of your index dot HTML file. To ensure these 2 newly created files get included when we build the app, we wanna add them to the at angularcli.jsonfile. With the initial setup down, we can start building the service.

We're going to need both the AngularFire database and AngularFire auth modules as well as the Firebase SDK. We're going to keep track of the most recent message with a behavior subject which is just an observable that we can push new data to. So the way cloud messaging works is the browser will first ask the user for permission for an app to send them cloud messages, and then Firebase will give us a token once that permission has been entered. What we need to do is save that token with the user's auth ID on the Firebase database so we can use it on the back end when we start sending messages with Firebase Cloud Functions. To do that, we will subscribe to the AngularFire auth state taking only one just to prevent a long running subscription.

Then we'll save the auth ID as the key with the token as the value in a collection called FCM tokens in the database. The token will change anytime the user clears their browser cache, so it's important to update this token periodically. In this example, we're going to update the token every time this get permission function runs. This will happen whenever the browser asks the user for permission to send them notification. The request permission function will trigger that pop up that the user has to confirm.

And then from there, we can get the token and update the token in the database. The last thing we need to do is listen for new messages, and then we'll update that behavior subject whenever a new message is received. We do this by calling on message, which will return the message from Firebase, and then we can call next on our behavior subject and pass it that value. So now we can use these functions in the app component or any other component that you wanna set up messaging with. When the user is actively using the app, we wanna show the notification location inside the app itself.

We don't want it to come from some external source, which would be distracting. So to do that, we inject the messaging service and first get permission. And then we set up the receive message function and then set a variable on the component to that behavior subject. Again, a behavior subject is just an observable so we can unwrap it in the template with the async pipe. So here we're handling the notification in Angular and it should look something like this.

Notice the message appears directly in our Angular app and not coming from the external browser or operating system. If the app were closed at the time this message was sent, the service worker would take over and send the message to the external browser or operating system. Now that we know how to receive messages, we need a way to send them, which I'm going to do with a Firebase Cloud function. If you don't want to deploy a Cloud function, check out the link in the scription where I provide a kernel command to send push messages over HTTP. But in most cases, you're going to be sending push notifications when something happens in your database, so it's a perfect fit for Firebase Cloud Functions.

In this example, we're going to create a function called fcm send and it's going to run during the on create trigger in the database. So anytime new data is added to the messages for a given user, this function will run. So we'll define a variable called payload and that's the actual message that's going to be seen by the user. From there we'll tap into the admin database and get the token for that user. So we'll chain together a couple promises and then once we have the actual token, we can send that to the Firebase Messaging Library.

We call send to device and send it the token as well as the payload or the message. This is what will actually trigger the message to be sent to that device. And that's pretty much it. Pretty simple Cloud Function. Go ahead and deploy the function and you should be ready to start sending messages to your users.

As you can see here, we update some data on the messages node, and the user is automatically updated with that push notification. If this video helped you please like and subscribe. And if you're serious about Angular and Firebase consider becoming a pro member at angularfirebase.com where you'll get a free copy of my book, The Angular Firebase Survival Guide. Thanks for watching and I'll talk to you soon.
Firebase Cloud Messaging allows you to send push notifications throughout multiple devices even after an app's been closed. It does this on the web by registering a service worker that listens for messages from Firebase in the background. As you can see here, we've completely closed our Angular app in the browser, but we still get this push notification on our operating system directly from Firebase. Many apps do this to notify their users of important information such as Slack which will notify users when they have a new mention on a channel. Let's get started by building this worker into our Angular app. Create a new file in the source directory called cloudmessaging s w dot j s. Then inside that file, we'll import the Firebase SDK and initialize it with only the messaging sender ID. Then we set a variable with the Firebase messaging library. That's actually all we need to do to set up the background worker. Everything else will happen automatically. However, to ensure compatibility with modern browsers, we need to add a manifest dot JSON file. Inside this file, we include the GCM sender ID, which is the same for all applications, so keep it the same as it appears in this video. And then you'll wanna link the manifest in the head of your index dot HTML file. To ensure these 2 newly created files get included when we build the app, we wanna add them to the at angularcli.jsonfile.
With the initial setup down, we can start building the service. We're going to need both the AngularFire database and AngularFire auth modules as well as the Firebase SDK. We're going to keep track of the most recent message with a behavior subject which is just an observable that we can push new data to.
databases
So the way cloud messaging works is the browser will first ask the user for permission for an app to send them cloud messages, and then Firebase will give us a token once that permission has been entered. What we need to do is save that token with the user's auth ID on the Firebase database so we can use it on the back end when we start sending messages with Firebase Cloud Functions.
To do that, we will subscribe to the AngularFire auth state taking only one just to prevent a long running subscription. Then we'll save the auth ID as the key with the token as the value in a collection called FCM tokens in the database. The token will change anytime the user clears their browser cache, so it's important to update this token periodically.
cryptocurrency
In this example, we're going to update the token every time this get permission function runs. This will happen whenever the browser asks the user for permission to send them notification. The request permission function will trigger that pop up that the user has to confirm. And then from there, we can get the token and update the token in the database. The last thing we need to do is listen for new messages, and then we'll update that behavior subject whenever a new message is received.
We do this by calling on message, which will return the message from Firebase, and then we can call next on our behavior subject and pass it that value. So now we can use these functions in the app component or any other component that you wanna set up messaging with.
programming
When the user is actively using the app, we wanna show the notification location inside the app itself. We don't want it to come from some external source, which would be distracting. So to do that, we inject the messaging service and first get permission. And then we set up the receive message function and then set a variable on the component to that behavior subject. Again, a behavior subject is just an observable so we can unwrap it in the template with the async pipe. So here we're handling the notification in Angular and it should look something like this. Notice the message appears directly in our Angular app and not coming from the external browser or operating system. If the app were closed at the time this message was sent, the service worker would take over and send the message to the external browser or operating system. Now that we know how to receive messages, we need a way to send them, which I'm going to do with a Firebase Cloud function. If you don't want to deploy a Cloud function, check out the link in the scription where I provide a kernel command to send push messages over HTTP. But in most cases, you're going to be sending push notifications when something happens in your database, so it's a perfect fit for Firebase Cloud Functions.
In this example, we're going to create a function called fcm send and it's going to run during the on create trigger in the database. So anytime new data is added to the messages for a given user, this function will run. So we'll define a variable called payload and that's the actual message that's going to be seen by the user. From there we'll tap into the admin database and get the token for that user.
programming
data
So we'll chain together a couple promises and then once we have the actual token, we can send that to the Firebase Messaging Library. We call send to device and send it the token as well as the payload or the message. This is what will actually trigger the message to be sent to that device. And that's pretty much it. Pretty simple Cloud Function. Go ahead and deploy the function and you should be ready to start sending messages to your users. As you can see here, we update some data on the messages node, and the user is automatically updated with that push notification. If this video helped you please like and subscribe. And if you're serious about Angular and Firebase consider becoming a pro member at angularfirebase.com where you'll get a free copy of my book, The Angular Firebase Survival Guide. Thanks for watching and I'll talk to you soon.
Firebase Cloud Messaging allows you to send push notifications throughout multiple devices even after an app's been closed. It does this on the web by registering a service worker that listens for messages from Firebase in the background. As you can see here, we've completely closed our Angular app in the browser, but we still get this push notification on our operating system directly from Firebase. Many apps do this to notify their users of important information such as Slack which will notify users when they have a new mention on a channel. Let's get started by building this worker into our Angular app. Create a new file in the source directory called cloudmessaging s w dot j s. Then inside that file, we'll import the Firebase SDK and initialize it with only the messaging sender ID. Then we set a variable with the Firebase messaging library. That's actually all we need to do to set up the background worker. Everything else will happen automatically. However, to ensure compatibility with modern browsers, we need to add a manifest dot JSON file. Inside this file, we include the GCM sender ID, which is the same for all applications, so keep it the same as it appears in this video. And then you'll wanna link the manifest in the head of your index dot HTML file. To ensure these 2 newly created files get included when we build the app, we wanna add them to the at angularcli.jsonfile. With the initial setup down, we can start building the service. We're going to need both the AngularFire database and AngularFire auth modules as well as the Firebase SDK. We're going to keep track of the most recent message with a behavior subject which is just an observable that we can push new data to. So the way cloud messaging works is the browser will first ask the user for permission for an app to send them cloud messages, and then Firebase will give us a token once that permission has been entered. What we need to do is save that token with the user's auth ID on the Firebase database so we can use it on the back end when we start sending messages with Firebase Cloud Functions. To do that, we will subscribe to the AngularFire auth state taking only one just to prevent a long running subscription. Then we'll save the auth ID as the key with the token as the value in a collection called FCM tokens in the database. The token will change anytime the user clears their browser cache, so it's important to update this token periodically. In this example, we're going to update the token every time this get permission function runs. This will happen whenever the browser asks the user for permission to send them notification. The request permission function will trigger that pop up that the user has to confirm. And then from there, we can get the token and update the token in the database. The last thing we need to do is listen for new messages, and then we'll update that behavior subject whenever a new message is received. We do this by calling on message, which will return the message from Firebase, and then we can call next on our behavior subject and pass it that value. So now we can use these functions in the app component or any other component that you wanna set up messaging with. When the user is actively using the app, we wanna show the notification location inside the app itself. We don't want it to come from some external source, which would be distracting. So to do that, we inject the messaging service and first get permission. And then we set up the receive message function and then set a variable on the component to that behavior subject. Again, a behavior subject is just an observable so we can unwrap it in the template with the async pipe. So here we're handling the notification in Angular and it should look something like this. Notice the message appears directly in our Angular app and not coming from the external browser or operating system. If the app were closed at the time this message was sent, the service worker would take over and send the message to the external browser or operating system. Now that we know how to receive messages, we need a way to send them, which I'm going to do with a Firebase Cloud function. If you don't want to deploy a Cloud function, check out the link in the scription where I provide a kernel command to send push messages over HTTP. But in most cases, you're going to be sending push notifications when something happens in your database, so it's a perfect fit for Firebase Cloud Functions. In this example, we're going to create a function called fcm send and it's going to run during the on create trigger in the database. So anytime new data is added to the messages for a given user, this function will run. So we'll define a variable called payload and that's the actual message that's going to be seen by the user. From there we'll tap into the admin database and get the token for that user. So we'll chain together a couple promises and then once we have the actual token, we can send that to the Firebase Messaging Library. We call send to device and send it the token as well as the payload or the message. This is what will actually trigger the message to be sent to that device. And that's pretty much it. Pretty simple Cloud Function. Go ahead and deploy the function and you should be ready to start sending messages to your users. As you can see here, we update some data on the messages node, and the user is automatically updated with that push notification. If this video helped you please like and subscribe. And if you're serious about Angular and Firebase consider becoming a pro member at angularfirebase.com where you'll get a free copy of my book, The Angular Firebase Survival Guide. Thanks for watching and I'll talk to you soon.
Firebase
firebase
Cloud
cloud
Messaging
messaging
allows
allows
you
you
to
to
send
send
push
push
notifications
notifications
throughout
throughout
multiple
multiple
devices
devices
even
even
after
after
an
an
app's
app's
been
been
closed.
closed
It
it
does
does
this
this
on
on
the
the
web
web
by
by
registering
registering
a
a
service
service
worker
worker
that
that
listens
listens
for
for
messages
messages
from
from
Firebase
firebase
in
in
the
the
background.
background
As
as
you
you
can
can
see
see
here,
here
we've
we've
completely
completely
closed
closed
our
our
Angular
angular
app
app
in
in
the
the
browser,
browser
but
but
we
we
still
still
get
get
this
this
push
push
notification
notification
on
on
our
our
operating
operating
system
system
directly
directly
from
from
Firebase.
firebase
Many
many
apps
apps
do
do
this
this
to
to
notify
notify
their
their
users
users
of
of
important
important
information
information
such
such
as
as
Slack
slack
which
which
will
will
notify
notify
users
users
when
when
they
they
have
have
a
a
new
new
mention
mention
on
on
a
a
channel.
channel
Let's
let's
get
get
started
started
by
by
building
building
this
this
worker
worker
into
into
our
our
Angular
angular
app.
app
Create
create
a
a
new
new
file
file
in
in
the
the
source
source
directory
directory
called
called
cloudmessaging
cloudmessaging
s
s
w
w
dot
dot
j
j
s.
s
Then
then
inside
inside
that
that
file,
file
we'll
we'll
import
import
the
the
Firebase
firebase
SDK
sdk
and
and
initialize
initialize
it
it
with
with
only
only
the
the
messaging
messaging
sender
sender
ID.
id
Then
then
we
we
set
set
a
a
variable
variable
with
with
the
the
Firebase
firebase
messaging
messaging
library.
library
That's
that's
actually
actually
all
all
we
we
need
need
to
to
do
do
to
to
set
set
up
up
the
the
background
background
worker.
worker
Everything
everything
else
else
will
will
happen
happen
automatically.
automatically
However,
however
to
to
ensure
ensure
compatibility
compatibility
with
with
modern
modern
browsers,
browsers
we
we
need
need
to
to
add
add
a
a
manifest
manifest
dot
dot
JSON
json
file.
file
Inside
inside
this
this
file,
file
we
we
include
include
the
the
GCM
gcm
sender
sender
ID,
id
which
which
is
is
the
the
same
same
for
for
all
all
applications,
applications
so
so
keep
keep
it
it
the
the
same
same
as
as
it
it
appears
appears
in
in
this
this
video.
video
And
and
then
then
you'll
you'll
wanna
wanna
link
link
the
the
manifest
manifest
in
in
the
the
head
head
of
of
your
your
index
index
dot
dot
HTML
html
file.
file
To
to
ensure
ensure
these
these
2
2
newly
newly
created
created
files
files
get
get
included
included
when
when
we
we
build
build
the
the
app,
app
we
we
wanna
wanna
add
add
them
them
to
to
the
the
at
at
angularcli.jsonfile.
angularcli.jsonfile
With
with
the
the
initial
initial
setup
setup
down,
down
we
we
can
can
start
start
building
building
the
the
service.
service
We're
we're
going
going
to
to
need
need
both
both
the
the
AngularFire
angularfire
database
database
and
and
AngularFire
angularfire
auth
auth
modules
modules
as
as
well
well
as
as
the
the
Firebase
firebase
SDK.
sdk
We're
we're
going
going
to
to
keep
keep
track
track
of
of
the
the
most
most
recent
recent
message
message
with
with
a
a
behavior
behavior
subject
subject
which
which
is
is
just
just
an
an
observable
observable
that
that
we
we
can
can
push
push
new
new
data
data
to.
to
So
so
the
the
way
way
cloud
cloud
messaging
messaging
works
works
is
is
the
the
browser
browser
will
will
first
first
ask
ask
the
the
user
user
for
for
permission
permission
for
for
an
an
app
app
to
to
send
send
them
them
cloud
cloud
messages,
messages
and
and
then
then
Firebase
firebase
will
will
give
give
us
us
a
a
token
token
once
once
that
that
permission
permission
has
has
been
been
entered.
entered
What
what
we
we
need
need
to
to
do
do
is
is
save
save
that
that
token
token
with
with
the
the
user's
user's
auth
auth
ID
id
on
on
the
the
Firebase
firebase
database
database
so
so
we
we
can
can
use
use
it
it
on
on
the
the
back
back
end
end
when
when
we
we
start
start
sending
sending
messages
messages
with
with
Firebase
firebase
Cloud
cloud
Functions.
functions
To
to
do
do
that,
that
we
we
will
will
subscribe
subscribe
to
to
the
the
AngularFire
angularfire
auth
auth
state
state
taking
taking
only
only
one
one
just
just
to
to
prevent
prevent
a
a
long
long
running
running
subscription.
subscription
Then
then
we'll
we'll
save
save
the
the
auth
auth
ID
id
as
as
the
the
key
key
with
with
the
the
token
token
as
as
the
the
value
value
in
in
a
a
collection
collection
called
called
FCM
fcm
tokens
tokens
in
in
the
the
database.
database
The
the
token
token
will
will
change
change
anytime
anytime
the
the
user
user
clears
clears
their
their
browser
browser
cache,
cache
so
so
it's
it's
important
important
to
to
update
update
this
this
token
token
periodically.
periodically
In
in
this
this
example,
example
we're
we're
going
going
to
to
update
update
the
the
token
token
every
every
time
time
this
this
get
get
permission
permission
function
function
runs.
runs
This
this
will
will
happen
happen
whenever
whenever
the
the
browser
browser
asks
asks
the
the
user
user
for
for
permission
permission
to
to
send
send
them
them
notification.
notification
The
the
request
request
permission
permission
function
function
will
will
trigger
trigger
that
that
pop
pop
up
up
that
that
the
the
user
user
has
has
to
to
confirm.
confirm
And
and
then
then
from
from
there,
there
we
we
can
can
get
get
the
the
token
token
and
and
update
update
the
the
token
token
in
in
the
the
database.
database
The
the
last
last
thing
thing
we
we
need
need
to
to
do
do
is
is
listen
listen
for
for
new
new
messages,
messages
and
and
then
then
we'll
we'll
update
update
that
that
behavior
behavior
subject
subject
whenever
whenever
a
a
new
new
message
message
is
is
received.
received
We
we
do
do
this
this
by
by
calling
calling
on
on
message,
message
which
which
will
will
return
return
the
the
message
message
from
from
Firebase,
firebase
and
and
then
then
we
we
can
can
call
call
next
next
on
on
our
our
behavior
behavior
subject
subject
and
and
pass
pass
it
it
that
that
value.
value
So
so
now
now
we
we
can
can
use
use
these
these
functions
functions
in
in
the
the
app
app
component
component
or
or
any
any
other
other
component
component
that
that
you
you
wanna
wanna
set
set
up
up
messaging
messaging
with.
with
When
when
the
the
user
user
is
is
actively
actively
using
using
the
the
app,
app
we
we
wanna
wanna
show
show
the
the
notification
notification
location
location
inside
inside
the
the
app
app
itself.
itself
We
we
don't
don't
want
want
it
it
to
to
come
come
from
from
some
some
external
external
source,
source
which
which
would
would
be
be
distracting.
distracting
So
so
to
to
do
do
that,
that
we
we
inject
inject
the
the
messaging
messaging
service
service
and
and
first
first
get
get
permission.
permission
And
and
then
then
we
we
set
set
up
up
the
the
receive
receive
message
message
function
function
and
and
then
then
set
set
a
a
variable
variable
on
on
the
the
component
component
to
to
that
that
behavior
behavior
subject.
subject
Again,
again
a
a
behavior
behavior
subject
subject
is
is
just
just
an
an
observable
observable
so
so
we
we
can
can
unwrap
unwrap
it
it
in
in
the
the
template
template
with
with
the
the
async
async
pipe.
pipe
So
so
here
here
we're
we're
handling
handling
the
the
notification
notification
in
in
Angular
angular
and
and
it
it
should
should
look
look
something
something
like
like
this.
this
Notice
notice
the
the
message
message
appears
appears
directly
directly
in
in
our
our
Angular
angular
app
app
and
and
not
not
coming
coming
from
from
the
the
external
external
browser
browser
or
or
operating
operating
system.
system
If
if
the
the
app
app
were
were
closed
closed
at
at
the
the
time
time
this
this
message
message
was
was
sent,
sent
the
the
service
service
worker
worker
would
would
take
take
over
over
and
and
send
send
the
the
message
message
to
to
the
the
external
external
browser
browser
or
or
operating
operating
system.
system
Now
now
that
that
we
we
know
know
how
how
to
to
receive
receive
messages,
messages
we
we
need
need
a
a
way
way
to
to
send
send
them,
them
which
which
I'm
i'm
going
going
to
to
do
do
with
with
a
a
Firebase
firebase
Cloud
cloud
function.
function
If
if
you
you
don't
don't
want
want
to
to
deploy
deploy
a
a
Cloud
cloud
function,
function
check
check
out
out
the
the
link
link
in
in
the
the
scription
scription
where
where
I
i
provide
provide
a
a
kernel
kernel
command
command
to
to
send
send
push
push
messages
messages
over
over
HTTP.
http
But
but
in
in
most
most
cases,
cases
you're
you're
going
going
to
to
be
be
sending
sending
push
push
notifications
notifications
when
when
something
something
happens
happens
in
in
your
your
database,
database
so
so
it's
it's
a
a
perfect
perfect
fit
fit
for
for
Firebase
firebase
Cloud
cloud
Functions.
functions
In
in
this
this
example,
example
we're
we're
going
going
to
to
create
create
a
a
function
function
called
called
fcm
fcm
send
send
and
and
it's
it's
going
going
to
to
run
run
during
during
the
the
on
on
create
create
trigger
trigger
in
in
the
the
database.
database
So
so
anytime
anytime
new
new
data
data
is
is
added
added
to
to
the
the
messages
messages
for
for
a
a
given
given
user,
user
this
this
function
function
will
will
run.
run
So
so
we'll
we'll
define
define
a
a
variable
variable
called
called
payload
payload
and
and
that's
that's
the
the
actual
actual
message
message
that's
that's
going
going
to
to
be
be
seen
seen
by
by
the
the
user.
user
From
from
there
there
we'll
we'll
tap
tap
into
into
the
the
admin
admin
database
database
and
and
get
get
the
the
token
token
for
for
that
that
user.
user
So
so
we'll
we'll
chain
chain
together
together
a
a
couple
couple
promises
promises
and
and
then
then
once
once
we
we
have
have
the
the
actual
actual
token,
token
we
we
can
can
send
send
that
that
to
to
the
the
Firebase
firebase
Messaging
messaging
Library.
library
We
we
call
call
send
send
to
to
device
device
and
and
send
send
it
it
the
the
token
token
as
as
well
well
as
as
the
the
payload
payload
or
or
the
the
message.
message
This
this
is
is
what
what
will
will
actually
actually
trigger
trigger
the
the
message
message
to
to
be
be
sent
sent
to
to
that
that
device.
device
And
and
that's
that's
pretty
pretty
much
much
it.
it
Pretty
pretty
simple
simple
Cloud
cloud
Function.
function
Go
go
ahead
ahead
and
and
deploy
deploy
the
the
function
function
and
and
you
you
should
should
be
be
ready
ready
to
to
start
start
sending
sending
messages
messages
to
to
your
your
users.
users
As
as
you
you
can
can
see
see
here,
here
we
we
update
update
some
some
data
data
on
on
the
the
messages
messages
node,
node
and
and
the
the
user
user
is
is
automatically
automatically
updated
updated
with
with
that
that
push
push
notification.
notification
If
if
this
this
video
video
helped
helped
you
you
please
please
like
like
and
and
subscribe.
subscribe
And
and
if
if
you're
you're
serious
serious
about
about
Angular
angular
and
and
Firebase
firebase
consider
consider
becoming
becoming
a
a
pro
pro
member
member
at
at
angularfirebase.com
angularfirebase.com
where
where
you'll
you'll
get
get
a
a
free
free
copy
copy
of
of
my
my
book,
book
The
the
Angular
angular
Firebase
firebase
Survival
survival
Guide.
guide
Thanks
thanks
for
for
watching
watching
and
and
I'll
i'll
talk
talk
to
to
you
you
soon.
soon
success
The speaker explains how the reminded message on the Angular app works, including the use of cloud notifications and the use of apers-than-per session (PPS) to handle requests. The process involves creating a worker, importting an SDK, setting a variable, and updating the token in the database. The speaker also explains how to send messages to users and suggests becoming a pro member on the angular appointed to support Angular and Azure.
Send Push Notifications in Angular with Firebase Cloud Messaging
Firebase Cloud Messaging allows you to send push notifications throughout multiple devices even after an app's been closed. It does this on the web by registering a service worker that listens for messages from Firebase in the background. As you can see here, we've completely closed our Angular app in the browser, but we still get this push notification on our operating system directly from Firebase. Many apps do this to notify their users of important information such as Slack which will notify users when they have a new mention on a channel. Let's get started by building this worker into our Angular app. Create a new file in the source directory called cloudmessaging s w dot j s. Then inside that file, we'll import the Firebase SDK and initialize it with only the messaging sender ID. Then we set a variable with the Firebase messaging library. That's actually all we need to do to set up the background worker. Everything else will happen automatically. However, to ensure compatibility with modern browsers, we need to add a manifest dot JSON file. Inside this file, we include the GCM sender ID, which is the same for all applications, so keep it the same as it appears in this video. And then you'll wanna link the manifest in the head of your index dot HTML file. To ensure these 2 newly created files get included when we build the app, we wanna add them to the at angularcli.jsonfile. With the initial setup down, we can start building the service. We're going to need both the AngularFire database and AngularFire auth modules as well as the Firebase SDK. We're going to keep track of the most recent message with a behavior subject which is just an observable that we can push new data to. So the way cloud messaging works is the browser will first ask the user for permission for an app to send them cloud messages, and then Firebase will give us a token once that permission has been entered. What we need to do is save that token with the user's auth ID on the Firebase database so we can use it on the back end when we start sending messages with Firebase Cloud Functions. To do that, we will subscribe to the AngularFire auth state taking only one just to prevent a long running subscription. Then we'll save the auth ID as the key with the token as the value in a collection called FCM tokens in the database. The token will change anytime the user clears their browser cache, so it's important to update this token periodically. In this example, we're going to update the token every time this get permission function runs. This will happen whenever the browser asks the user for permission to send them notification. The request permission function will trigger that pop up that the user has to confirm. And then from there, we can get the token and update the token in the database. The last thing we need to do is listen for new messages, and then we'll update that behavior subject whenever a new message is received. We do this by calling on message, which will return the message from Firebase, and then we can call next on our behavior subject and pass it that value. So now we can use these functions in the app component or any other component that you wanna set up messaging with. When the user is actively using the app, we wanna show the notification location inside the app itself. We don't want it to come from some external source, which would be distracting. So to do that, we inject the messaging service and first get permission. And then we set up the receive message function and then set a variable on the component to that behavior subject. Again, a behavior subject is just an observable so we can unwrap it in the template with the async pipe. So here we're handling the notification in Angular and it should look something like this. Notice the message appears directly in our Angular app and not coming from the external browser or operating system. If the app were closed at the time this message was sent, the service worker would take over and send the message to the external browser or operating system. Now that we know how to receive messages, we need a way to send them, which I'm going to do with a Firebase Cloud function. If you don't want to deploy a Cloud function, check out the link in the scription where I provide a kernel command to send push messages over HTTP. But in most cases, you're going to be sending push notifications when something happens in your database, so it's a perfect fit for Firebase Cloud Functions. In this example, we're going to create a function called fcm send and it's going to run during the on create trigger in the database. So anytime new data is added to the messages for a given user, this function will run. So we'll define a variable called payload and that's the actual message that's going to be seen by the user. From there we'll tap into the admin database and get the token for that user. So we'll chain together a couple promises and then once we have the actual token, we can send that to the Firebase Messaging Library. We call send to device and send it the token as well as the payload or the message. This is what will actually trigger the message to be sent to that device. And that's pretty much it. Pretty simple Cloud Function. Go ahead and deploy the function and you should be ready to start sending messages to your users. As you can see here, we update some data on the messages node, and the user is automatically updated with that push notification. If this video helped you please like and subscribe. And if you're serious about Angular and Firebase consider becoming a pro member at angularfirebase.com where you'll get a free copy of my book, The Angular Firebase Survival Guide. Thanks for watching and I'll talk to you soon.
The speaker explains how the reminded message on the Angular app works, including the use of cloud notifications and the use of apers-than-per session (PPS) to handle requests. The process involves creating a worker, importting an SDK, setting a variable, and updating the token in the database. The speaker also explains how to send messages to users and suggests becoming a pro member on the angular appointed to support Angular and Azure.