How to Show Desktop Notifications - JavaScript Notification API Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 พ.ย. 2024

ความคิดเห็น • 103

  • @lrajoo11
    @lrajoo11 3 ปีที่แล้ว +4

    this was truly amazing. everyone is putting up tutorials on remote push notifications but yours is one of precious few on local pop up notifications. thank you!

  • @kingu3774
    @kingu3774 ปีที่แล้ว

    awesome, i have read a lot of tutorials and all guide to install service worker , but all i need is in your video🙏🙏🙏

  • @rauchu5861
    @rauchu5861 ปีที่แล้ว

    when u say api i thought you meant something external this is literally built with just vanillas javascript. thanks! :DDD

  • @Acuce7ibd468j
    @Acuce7ibd468j 2 ปีที่แล้ว +1

    U deserve to be subscribed. Exactly what i need to know. Thank u

  • @eliekazad1617
    @eliekazad1617 4 ปีที่แล้ว +6

    Wow Great tutorial, i spent 2 days trying the JS notification once i got this and it helped me a lots, for me it works only on firefox is there anywhere to implement if for the other browser?
    Thanks dcode!!!

  • @Rassy_
    @Rassy_ 4 ปีที่แล้ว +2

    Incase your notification isn't working: (Most browsers if not all) require that the user themselves allow & initiate notification, so incase you are showing the notification as soon as the DOM is loaded, it won't work, have an element such as a button for the user to click to display notifications

  • @softwebworld935
    @softwebworld935 3 ปีที่แล้ว +1

    Specially thanks for helping me to generate a notification

  • @ritwikyayayay
    @ritwikyayayay 2 ปีที่แล้ว

    Very Helpful Mate

  • @angladephil
    @angladephil 4 ปีที่แล้ว +1

    Thank you for this. Next step = customize the notifications ? (CSS or other Notification.properties ...).

  • @mateusmoreira1963
    @mateusmoreira1963 4 ปีที่แล้ว +2

    Great tutorial man thank you and hi from Rio de Janeiro

    • @dcode-software
      @dcode-software  4 ปีที่แล้ว

      No worries, how's it goin?

    • @mateusmoreira1963
      @mateusmoreira1963 4 ปีที่แล้ว

      @@dcode-software everything is fine , i am coding a lot by the way...

    • @orangefield2308
      @orangefield2308 3 ปีที่แล้ว

      hi, do you have the Source code so I can copy and paste?

  • @castletown999
    @castletown999 ปีที่แล้ว

    Nice job!

  • @moatasemmuhammad1324
    @moatasemmuhammad1324 2 ปีที่แล้ว

    thank bro that is help me a lot ☺️☺️

  • @rfryanfavour4369
    @rfryanfavour4369 2 ปีที่แล้ว

    Thank you so much sir

  • @dfordemo981
    @dfordemo981 4 ปีที่แล้ว +1

    make a new video series on building a website with all features, descriping the functionality in each video and code each section of the website.

  • @simpleprogramming4671
    @simpleprogramming4671 4 ปีที่แล้ว

    Lovely explanation. Thank you so much

  • @osmanaktas77
    @osmanaktas77 2 ปีที่แล้ว

    you are best bro !!!

  • @yaroslav6946
    @yaroslav6946 2 ปีที่แล้ว +1

    nice tutorial, but can you tell how to get https with few lines of js?

  • @HtopSkills
    @HtopSkills 3 ปีที่แล้ว +1

    Good sharing

  • @AaronEstebanSEO
    @AaronEstebanSEO 3 ปีที่แล้ว +1

    How would you send out a new message to those who allowed notifications and have it hit their desktop or mobile device without needing to be on your website?

  • @dfordemo981
    @dfordemo981 4 ปีที่แล้ว

    you code editor is very nicer than i have. tell us the extension names javascript autocompletions and color scheme you are using.

  • @rangabharath4253
    @rangabharath4253 4 ปีที่แล้ว +1

    awesome as always

  • @MatsumotoKael13
    @MatsumotoKael13 3 ปีที่แล้ว

    Nice and simple. Thanks!

  • @Suweyedit
    @Suweyedit 11 หลายเดือนก่อน

    Can i ask if this notification be stacked in Windows Notification?

  • @jonathanduclos1815
    @jonathanduclos1815 3 ปีที่แล้ว

    Should I install some npm package? I'm newbie.

  • @priteshmayekar2707
    @priteshmayekar2707 4 ปีที่แล้ว +1

    HI.. Nice tutorial.
    Its showing no error but no notification popup occurs. Any idea?

  • @vancityexe
    @vancityexe 4 ปีที่แล้ว +1

    wow, super simple and informative! Thanks for sharing. Can I set it to trigger a notification when the page (twtich player) goes from "offline" to "live"?

  • @adil8132
    @adil8132 3 ปีที่แล้ว +1

    Thank you 👍

  • @Someone-xg6sn
    @Someone-xg6sn 2 ปีที่แล้ว

    this is so great but how can i push notification in mobile browser using this js notification ?

  • @pauliusm2735
    @pauliusm2735 ปีที่แล้ว

    Hey long time after vid, but really want to know how to use showTrigger and TimestampTrigger function, cannot for the life of me make them work. Could you point ot the right direction?

  • @КлимСомов-х6с
    @КлимСомов-х6с 2 ปีที่แล้ว

    How can I show notifications at time that I set? For example tomorrow at 12.00am. I want to add some notifications functional to my toDoList app.

  • @Vu_Van_Tiep
    @Vu_Van_Tiep 4 ปีที่แล้ว

    Thank you. i wanted see tourl next

  • @hendevofficial2442
    @hendevofficial2442 4 ปีที่แล้ว +12

    function notif(text,icon,head1,onclick1){
    const permission = Notification.permission;
    if(permission == "default"){
    Notification.requestPermission()
    } else if(permission == "denied"){0
    alert('We cannot display notifs. Please enables notifs.')
    } else if(permission == "granted"){
    const notification = new Notification(head), {
    body: text,
    icon: icon
    }
    notification.onclick = (e) => {
    window.location.href = onclick
    }
    }
    }

  • @theomiddehghan
    @theomiddehghan 4 ปีที่แล้ว +1

    You did well. Thanks mate :)

    • @dcode-software
      @dcode-software  4 ปีที่แล้ว

      No problem!!

    • @orangefield2308
      @orangefield2308 3 ปีที่แล้ว

      hello, do you have the Source code so I can copy and paste?

  • @IoT_store
    @IoT_store 3 ปีที่แล้ว

    WoW your are genius

  • @DeveloperRimon
    @DeveloperRimon 3 ปีที่แล้ว

    Soo helpful video, thank you so much

  • @Siddharth-yi7pg
    @Siddharth-yi7pg 3 ปีที่แล้ว +1

    how to listen the notifications passed to system? somehting url forawrding type please make a tutorial over it

    • @MatthewBlackmon
      @MatthewBlackmon 2 ปีที่แล้ว

      I used activemq websockets over stomp as a event source.

  • @jenricdota
    @jenricdota 4 ปีที่แล้ว +1

    does it work on mobile devices?

  • @karthikeyanrm3446
    @karthikeyanrm3446 3 ปีที่แล้ว

    Since you talked about notification, a small doubt - can a widget application/pop up notification be made using electron with java/spring as back end..please let me know. I would like to create an app which notifies users about as soon as a batch job fails, basically it alerts the user by coming as a pop up in notification tray and also show in desktop widget. Please suggest tech stack or how to implement this. Thanks in advance

  • @joe5260
    @joe5260 4 ปีที่แล้ว

    Thank you mate your great , id love from you to do a tuto about add JSON with notification for send notification without user enter the website and thank a lot

  • @thanigaivelan8394
    @thanigaivelan8394 4 ปีที่แล้ว

    Awesome mate.....it's really useful..😁😁😁😁😁

  • @natolama2494
    @natolama2494 4 ปีที่แล้ว

    it's so helpful thanks

  • @CodingJourney
    @CodingJourney 4 ปีที่แล้ว

    Very nice mate! 😉🙂

  • @CeleMartins1
    @CeleMartins1 3 ปีที่แล้ว +1

    Hey, great video! but do you know how to add notification with audio too?

    • @lofiscide
      @lofiscide 3 ปีที่แล้ว

      What?? Desktop notifications can't include audio.
      Else you can vibrate it by adding a property vibrate: true

  • @abrarmulla1196
    @abrarmulla1196 2 ปีที่แล้ว

    Is theer a way to change the sound of the notification

  • @bryanmayodi613
    @bryanmayodi613 ปีที่แล้ว

    can we schedule these notifications?

  • @Sid-xt3kt
    @Sid-xt3kt ปีที่แล้ว

    Does this work for mac and linux?

  • @PushkarThakar
    @PushkarThakar 4 ปีที่แล้ว

    In may case notification.click does not trigger anymore when browser in foreground. Instead on click it opens root url (hostname) in new tab. Same case if you click notifications in action center win 10. I tested for both Edge and chrome, same issue.
    Any idea what am I missing or it is an issue with new version of browsers.

  • @dogee7409
    @dogee7409 4 ปีที่แล้ว +1

    Thanks!

  • @chome4
    @chome4 4 ปีที่แล้ว +1

    How can you trigger this notification for a specific website/webpage if new content is added? Thanks.

    • @SulemanKhan-nk4lc
      @SulemanKhan-nk4lc 4 ปีที่แล้ว +1

      yes bro same question but did not find any solution

  • @goodluckoriuwa1669
    @goodluckoriuwa1669 2 ปีที่แล้ว

    How can i put image on the body to replace the text? so the image covers the whole body

  • @swatilekha_roy
    @swatilekha_roy 3 ปีที่แล้ว

    Hi is it possible to schedule notifications that pop up even when site is not running? Thanks.

  • @mohammed-i786
    @mohammed-i786 4 ปีที่แล้ว +1

    You did not use the 'event' parameter in the 'onclick' function.

  • @ashutoshmehere5915
    @ashutoshmehere5915 3 ปีที่แล้ว +1

    how to use this code on web n with
    DB

  • @tamas-pamas
    @tamas-pamas 4 ปีที่แล้ว

    Do you have a tutorial with Desktop Notification with ServiceWorker?

  • @oblivion6672
    @oblivion6672 4 ปีที่แล้ว

    Do they get the notification after they live your site?

  • @ichra7com
    @ichra7com 2 ปีที่แล้ว

    No iam granted to pushup, how can i send the msg dynamicaly with php?

  • @ivanchudyk6129
    @ivanchudyk6129 4 ปีที่แล้ว

    Thank you

  • @lonewolfcoding5208
    @lonewolfcoding5208 3 ปีที่แล้ว

    is this works on mobile too?

  • @window.location
    @window.location 4 ปีที่แล้ว +1

    You said it works only on HTTPS but your page shows not secure (http) , i didnt understand

    • @RaushanKumar-gf5fc
      @RaushanKumar-gf5fc 4 ปีที่แล้ว

      @decode pls answer this question.

    • @LG-Moonlight
      @LG-Moonlight 3 ปีที่แล้ว

      Localhost is an exception for this

  • @eng6070
    @eng6070 2 ปีที่แล้ว

    is there any way to close the notification after users click close? thanks ^_^

  • @trollutrollu1897
    @trollutrollu1897 4 ปีที่แล้ว

    awesome tnx

  • @CodingFire
    @CodingFire 3 ปีที่แล้ว

    What is your font please

  • @CoderDmitri
    @CoderDmitri 4 ปีที่แล้ว

    ty

  • @PHARMACAFEchannel
    @PHARMACAFEchannel 3 ปีที่แล้ว

    any method to do this on HTTP websites?

  • @PeenkyOfficial
    @PeenkyOfficial 3 ปีที่แล้ว

    Hi! How do I send the notification to all my users in one time?

    • @kellyguelce2098
      @kellyguelce2098 2 ปีที่แล้ว

      You have to use Push notifications

  • @BoulderPro17
    @BoulderPro17 2 ปีที่แล้ว

    cool

  • @dowelg1071
    @dowelg1071 3 ปีที่แล้ว

    good afternoon, my comment is 1 year late hahaha.. but can i ask if it will work on my online website? not in localhost?

  • @Real.Memeitizer
    @Real.Memeitizer 3 ปีที่แล้ว +2

    im the 400th like

    • @dcode-software
      @dcode-software  3 ปีที่แล้ว +1

      Nice one

    • @Real.Memeitizer
      @Real.Memeitizer 3 ปีที่แล้ว

      @@dcode-software thanks for the heart
      i love doing computer science im only 14 coming 15 and the smartest at computer science in my school

    • @dcode-software
      @dcode-software  3 ปีที่แล้ว

      That's awesome! Keep on working hard mate and continue to learn more things and build projects. Sounds like you've got a bright future ahead of you!

  • @SulemanKhan-nk4lc
    @SulemanKhan-nk4lc 4 ปีที่แล้ว

    can anyone help that how can i send notification to my client whenever i add new content to my website..

    • @HtopSkills
      @HtopSkills 3 ปีที่แล้ว

      You can do this with a few simple lines of code

    • @shamsali2642
      @shamsali2642 3 ปีที่แล้ว

      @@HtopSkills
      If you know how to do it, you can help me

  • @benjamin6938
    @benjamin6938 2 ปีที่แล้ว

    It does not work on MsEdge

  • @JadeclonOfficial
    @JadeclonOfficial 2 ปีที่แล้ว

    Hmm, doesnt works for me, idk why

  • @jhohanmoran5263
    @jhohanmoran5263 ปีที่แล้ว

    ME SIRVEEEEEEEEEEEEEEEEEEE.............LIKEEE

  • @raviraushan5689
    @raviraushan5689 2 ปีที่แล้ว

    4:15

  • @rohittiwari7387
    @rohittiwari7387 ปีที่แล้ว

    where is source code

  • @youcefali7352
    @youcefali7352 4 ปีที่แล้ว

    Doesn't work on google chrome it worked on firefox devlopper

  • @cheasteral7636
    @cheasteral7636 4 ปีที่แล้ว

    Sir can i have your email acc, i have something to consult for regarding push notification for, project purpose only.

  • @soyedmehedihasan7739
    @soyedmehedihasan7739 3 ปีที่แล้ว

    give me code.plz

  • @mdkausarhamid6463
    @mdkausarhamid6463 3 ปีที่แล้ว

    I'm the 777th like !

  • @thechoosen4240
    @thechoosen4240 2 ปีที่แล้ว

    Good job bro JESUS IS COMING SOON;PREPARE

  • @matheussjusttino
    @matheussjusttino 3 ปีที่แล้ว

    Thank you very much

  • @Vu_Van_Tiep
    @Vu_Van_Tiep 4 ปีที่แล้ว +2

    can anyone help that how can i send notification to my client whenever i add new content to my website.

    • @shamsali2642
      @shamsali2642 3 ปีที่แล้ว

      If you know how to do it, you can help me

  • @ErlWable
    @ErlWable 3 ปีที่แล้ว

    Thank You Very Much