馃攳
How To Send Push Notifications With JavaScript - YouTube
Channel: unknown
[0]
in today's video i'm going to show you
[1]
how you can send notifications to your
[3]
phone or to your browser and all this is
[5]
using built-in client-side javascript
[7]
and it's super easy
[9]
[Music]
[12]
welcome back to web dev simplified my
[14]
name's kyle and my job is to simplify
[16]
the web for you so you can start
[17]
building your dream project sooner and
[19]
today we're talking all about push
[20]
notifications which are built into the
[22]
browser now to get started i have a
[23]
simple script page that i'm loading into
[25]
my html and a single button that i can
[27]
click on and then in my javascript i
[29]
just have that button being selected and
[30]
we have an add event listener for the
[32]
click so if i click on the button for
[34]
example i can alert the text hi and when
[36]
i click you can see it alerts that text
[38]
height super straightforward stuff now
[40]
what i'm going to be using this button
[41]
for is to demonstrate how push
[42]
notifications work in the browser and
[44]
push notifications are all built around
[46]
this notification object this
[48]
notification object allows you to do
[50]
everything you need to do with push
[51]
notifications so in order to send push
[53]
notifications you need to request
[55]
permission from the user you can't just
[57]
send notifications without them allowing
[59]
you explicit permission to do so so we
[61]
can say request permission inside of
[63]
here and this is actually a promise that
[65]
it returns so we can just say that then
[66]
and that's going to give our permission
[68]
level back to us so we can just say
[70]
alert perm to alert what our permission
[72]
is so now when i click on this button
[73]
you can see it's saying denied right now
[75]
and that's because i've explicitly
[77]
denied notifications if i click reset
[78]
here that'll reset that for me and allow
[81]
my reload my page now if i click on this
[83]
you can see it's asking me hey would you
[84]
like to show notifications for this your
[87]
page do i have blouse or do i block if i
[89]
say block again it'll tell me denied but
[91]
if i come back in here and reset this
[93]
and i do a refresh again and i click and
[95]
i actually say allow this time now it's
[97]
going to say that my permission is
[98]
granted i can actually do push
[100]
notifications so how exactly do you use
[102]
push notifications well all you need to
[104]
do is create a notification using this
[106]
notification object so i'll get rid of
[108]
that alert for now
[110]
and i'll just do a simple check to say
[111]
if our permission is equal to granted
[114]
which means that we have allowed this
[115]
then what i want to do is i want to send
[117]
a new notification and to do that we
[119]
just create a new notification object
[121]
and this is going to take a title for
[122]
example we'll just say example
[124]
notification
[126]
now if i save this and i click the
[127]
button again and as you can see this
[128]
just has that text example notification
[130]
inside of it and i have an x button that
[132]
i can close out of that notification
[133]
with this is the most basic way to
[135]
create notifications and this is going
[137]
to work on your phone as well as on your
[138]
computer and is super handy for sending
[140]
out notifications when things happen but
[142]
you can obviously get quite a bit more
[144]
involved so let's come in here and
[145]
there's a second options argument you
[147]
can pass and inside of here as you can
[148]
see there are tons of different options
[150]
you can pass i'm going to cover all the
[151]
different main options that you need to
[153]
worry about because some of them are not
[154]
really supported yet or they're
[155]
experimental for example the actions and
[157]
the badge feature those are both
[159]
experimental features not really
[160]
supported in any browsers except for
[162]
maybe chrome but the body feature is
[164]
really important for example i could say
[165]
this is more text and now if i click the
[168]
button here you're gonna see it says
[170]
example notification as the title oops
[172]
and it also says this is more text and
[174]
when i actually click on this
[175]
notification like hold down on it or you
[176]
can see i can actually block the
[178]
notifications if i want and same thing
[179]
if i click the settings icon up here so
[181]
there's a lot of different ways to
[182]
interact with this but for now i'm just
[183]
going to close out of it so the body
[184]
allows you to add more information to
[186]
the notification if we come further you
[188]
can see that we have this data attribute
[190]
data is just custom data you add to a
[192]
notification that you could use later on
[194]
so let's just put in some data here that
[196]
says
[197]
hello world it's just a custom object it
[199]
can be whatever you want
[201]
and we can create this notif object this
[203]
is just our notification we'll call it
[205]
notification
[206]
we're going to take that we can just say
[208]
notification dot data and we can
[211]
actually access that data so anytime we
[212]
access our notification we can get this
[214]
data property to access that
[215]
notification and with notifications you
[217]
can actually add event listeners so for
[219]
example i can add an event listener for
[220]
whenever i close the notification this
[222]
is going to pass an event inside here
[224]
and this event is just my notification
[226]
and for now i'm just going to console
[228]
actually we'll do an alert of e and
[230]
we're going to do ah let's just
[231]
console.log it console.log e just like
[233]
that so now when i click and i close out
[235]
of this notification it'll log that
[237]
event into our console so if we open up
[239]
our console you can see we have our
[240]
event and inside of this event we have
[242]
our target which is our notification
[243]
that has that custom data inside of it
[245]
as you can see here that hello world
[246]
data that we saved on our notification
[248]
so this is a really good way to pass
[250]
data around if you need to like do
[252]
something when someone closes a
[253]
notification or clicks on it because as
[255]
you can see we have a bunch of different
[256]
events for example we have close we have
[258]
click that we can do we also have error
[260]
and show so show is going to be when the
[262]
notification shows click is going to be
[264]
when they click anywhere in the
[265]
notification close is going to be when
[266]
they close it an error this is really
[268]
important for example someone denied
[270]
notifications for you so we can have
[272]
this error here and i'll just
[273]
oops alert error
[276]
so for now if i click this
[278]
it's never going to alert error because
[279]
everything's working is fine but if i
[281]
come in here and i actually deny the
[282]
permission for notifications and i just
[284]
refresh my page and now i click it's
[286]
going to actually be an error when it
[288]
tries to send this notification so if i
[289]
just move this outside of our permission
[291]
section and i try to send a notification
[293]
when i don't have permission you're
[294]
going to see it logs out error because
[295]
it's not allowing me to send that
[297]
notification so it's detecting that as
[299]
an error let's just move this code back
[300]
to what we had before and i'm going to
[302]
change my permission to allow
[303]
notifications due to that refresh so
[305]
that way my notification shows up down
[307]
here so there's a few other properties i
[308]
want to talk about if we come into here
[310]
we can see that we have an icon property
[312]
the icon property allows us just to set
[314]
a logo or an icon so i have this icon
[316]
called logo centered so i'm just going
[317]
to come in here i'm going to say logo
[320]
centered
[321]
dot png and now when i click on this you
[323]
can see we get this web dev simplified
[325]
logo in the right hand side which is
[326]
what that logo is representing so this
[328]
allows you to put a little icon on your
[330]
notifications which is cool now kind of
[331]
the final different thing i want to talk
[333]
about here before i start to go into an
[334]
example is the tag attribute because all
[337]
these other attributes that you see
[338]
they're pretty much all unsupported or
[340]
only supported in some browser so i
[342]
don't really want to cover them because
[343]
they could change or they don't really
[344]
work that well and most of them are
[345]
pretty self-explanatory like silent
[347]
makes it make no sound vibrate makes it
[349]
so it'll vibrate your phone and so on
[350]
but the tag property is really cool this
[352]
is like a unique id that you can give it
[354]
for example i can call this the welcome
[358]
message for example and now when i try
[360]
to click to create a notification if i
[362]
create a notification with the same tag
[364]
it'll actually overwrite that
[365]
notification so for now i'm going to
[366]
comment this out i'm going to show you
[367]
what this looks like without the tag so
[369]
when i click here it makes a
[370]
notification i click again it makes
[372]
another and another and another and
[373]
another they're just essentially going
[374]
to stack on each other up to a maximum
[376]
of three it looks like that it can show
[377]
at one time and you can see those other
[379]
notifications are popping in if i close
[380]
out of all these and i put the tag back
[382]
in now when i click on this you can see
[384]
it shows the notification when i click
[386]
on it again it just overwrites the
[388]
existing notification no matter how many
[389]
times i click it's overwriting that one
[391]
notification now if i change my body
[393]
here to be something like math.random
[395]
which will just give us a random number
[397]
between zero and one
[398]
now you're going to see the real power
[400]
of this if i just close out of this i
[401]
click you can see that we have a random
[403]
number 0.399 click on it again now we
[405]
get 0.088 click on it again and you can
[408]
see it's just updating that notification
[410]
while without the tag property it's
[412]
creating a brand new notification every
[414]
time and they're just stacking one on
[415]
top of the other so this tag property is
[417]
really cool if you want to overwrite a
[419]
current notification with new
[421]
information inside of it for example if
[422]
you're messaging back and forth with
[424]
someone and they reply you may want to
[426]
put their reply in that section and if
[427]
they add a new message you may want to
[429]
put that new message also inside of the
[431]
body of your notification
[434]
so now i kind of want to talk about a
[435]
little bit of an example this is an
[436]
example i would never recommend you
[438]
doing on a real site because it's super
[439]
annoying but it's a good example of what
[441]
a notification can do
[443]
i want to add an event listener to my
[444]
body here it's going to be called the
[446]
visibility changed event and all this
[448]
does is detect whenever you lose focus
[450]
on your page and you for example hide
[452]
your page so whenever we hide our page
[455]
so if our document.visibilitystate
[458]
is equal to hidden that means we are no
[460]
longer on the page i want to send a
[461]
notification asking the user to come
[463]
back so inside here i can just say new
[465]
notification
[467]
and i can just say come back
[469]
please there we go and let's just put a
[471]
body inside here the body will just say
[474]
please there we go
[476]
and we'll also give it a tag
[478]
of come back that way if we ever do
[481]
create a new notification it'll
[482]
overwrite the existing one for that
[484]
comeback tag now we can just save that
[486]
real quick and whenever i actually lose
[488]
focus on this page so for example if i
[490]
just go to a new tab here you can see
[492]
i've lost focus and now you can see it
[493]
says come back please right here and
[495]
then when i come back it's obviously not
[496]
getting rid of this yet but we want to
[498]
actually make it get rid of that
[499]
notification so i'm going to say that
[500]
this is going to be a notification we're
[502]
going to save that inside of a variable
[504]
notification is equal to
[507]
nothing to start with and then here i'm
[508]
going to say notification is equal to
[510]
this now eventually that notification
[512]
will disappear on its own when the user
[514]
comes back to the page this is going to
[516]
trigger again because the visibility
[517]
changes from invisible to visible and
[519]
this else statement right here will run
[521]
and we can call notification.close and
[523]
it'll close out of our notification so
[525]
if we lose focus you can see the
[527]
notification pops up when we come back
[528]
it's going to automatically close itself
[530]
which is really cool now we can take
[532]
this a step further actually and
[533]
continually update this notification to
[535]
let the user know how long they've been
[537]
away from our page because we don't want
[539]
them to be gone for very long
[540]
so let's create another variable called
[542]
interval and this interval is going to
[544]
be because we're going to set an
[545]
interval that constantly updates our
[546]
notification so set interval
[550]
and inside this set interval we're going
[551]
to run a function let's just run it
[552]
every 100 milliseconds and we're going
[555]
to create a brand new notification and
[557]
we're just going to constantly be
[558]
setting that value here now we already
[560]
have our tag set up but in the body i
[561]
wanted to say something along the lines
[563]
of
[564]
you have been gone for x seconds i want
[568]
to fill in this x variable right here
[570]
with the actual number of seconds since
[571]
last time they were on the page so a
[573]
pretty easy way to do that for us is we
[575]
can actually create a variable for when
[577]
they left and that's just going to be a
[578]
new date like this
[580]
and then what we can do inside of here
[582]
is we can say we want to get the current
[584]
date minus the time that they left and
[586]
this is going to be in milliseconds so
[589]
we need to wrap this in parentheses
[592]
divide it by a thousand and then we want
[594]
to just round that so we'll say
[595]
math.round
[596]
that value that way it's a round value
[600]
there we go so now it should say you've
[602]
been gone for one second two seconds
[603]
three second four second and so on so if
[605]
we leave the page you can see
[608]
it says come back please you've been
[609]
gone for two three four five six and so
[612]
on it's just constantly counting up and
[614]
we come back here it's going to close
[615]
but you'll notice it re-pops back up and
[617]
that's because our interval hasn't been
[618]
cleared yet so we can just save our
[620]
interval
[621]
like this and then down here we can say
[623]
clear interval of our interval just like
[626]
that we can also make sure we do a
[628]
simple if so if we have an interval
[631]
whoops interval then we're going to
[633]
clear it
[634]
and if we have a notification then we're
[637]
going to close it just to make sure we
[639]
have all that working now if i refresh
[640]
my page real quick close out of all my
[642]
notifications leave the page it's going
[644]
to pop up that message for us you've
[646]
been gone when i come back it disappears
[648]
and that's perfect now the biggest key
[650]
to these push notifications though is
[651]
that you need to make sure you ask for
[653]
permission first with the request
[654]
permission function and this request
[656]
permission function should only run
[658]
whenever a user actually interacts with
[660]
your page to ask for permission so for
[661]
example clicking a button or checking a
[663]
notification setting that says i would
[665]
like to receive notifications this is
[667]
because you don't want to spam people
[668]
with notifications that don't want them
[670]
so they want you to actually have some
[671]
type of user interaction before you call
[673]
this request notification function here
[675]
otherwise it's just going to work just
[677]
fine you just create a new notification
[678]
and it'll automatically send it to the
[680]
user for you
[681]
and that's all there is to the
[682]
notification api it's a really simple
[685]
api but it has a lot of power behind it
[687]
and if you want to learn about more
[688]
simple apis that are incredibly powerful
[690]
i have tons of javascript videos on them
[692]
i'll link a couple of them right over
[693]
here with that said thank you very much
[695]
for watching and have a good day
Most Recent Videos:
You can go back to the homepage right here: Homepage