Web Push Notifications - End to End implementation

Поделиться
HTML-код
  • Опубликовано: 21 окт 2024

Комментарии • 196

  • @SmudgetheBeagle
    @SmudgetheBeagle 3 года назад +7

    Thanks

  • @jimbo-dev
    @jimbo-dev 4 года назад +48

    I saw so many tutorials suggesting that web push should be implemented trough firebase or some other third party service, so thank you so much the introduction to this topic! This was way clearer than the Chrome developers guide👌👌👌

  • @BillCarlson
    @BillCarlson Год назад +3

    Thanks for this! While your setup wasn't exactly what I was using - it was all of the right pieces that I needed to set up to get push notifications working for my business. THANKS!

    • @Ashotofcode
      @Ashotofcode  Год назад +1

      Wow thanks Bill!! 🙂 Great to hear this helped out. Cheers Mark

  • @BlueyMcPhluey
    @BlueyMcPhluey 3 года назад +3

    first half was just what I needed, nice and bare bones, straight to the point

    • @Ashotofcode
      @Ashotofcode  3 года назад

      Thanks Josh glad it was helpful :-)

  • @seethalakshmip7007
    @seethalakshmip7007 3 года назад +7

    Haven't signed in for youtube for a long time. Just done it to upvote this video and subscribe... You are rocking..

    • @Ashotofcode
      @Ashotofcode  3 года назад

      Thanks Seetha, glad it was useful for you😃

  • @yungbeong7664
    @yungbeong7664 2 года назад +4

    Really clean, straight to the point. 🔥

    • @Ashotofcode
      @Ashotofcode  2 года назад

      Thanks! glad it was useful, Cheers Mark

  • @ivanfranciscoj
    @ivanfranciscoj 4 года назад +6

    Best (and well explained) web push tutorial ever, thank you

    • @Ashotofcode
      @Ashotofcode  4 года назад

      Thanks Ivan, glad it was helpful 👍

  • @chandragie
    @chandragie 3 года назад +1

    Watching in 2021 and still great. Thanks for this very simple and informative example!

    • @Ashotofcode
      @Ashotofcode  3 года назад

      Glad it was helpful Chandra :-)

  • @khanthmuu6364
    @khanthmuu6364 Год назад +1

    It really helps me understand about web push API. Thanks!

  • @bArraxas
    @bArraxas 4 года назад +4

    Great tutorial, thx for the video !
    On firefox as you had ignored the first prompt he didn't ask you again. At place of pop again firefox shake a message icon on right of lock icon in url bar ;-)

    • @Ashotofcode
      @Ashotofcode  4 года назад +1

      Thanks good spot😀👍😀

  • @ytanna93
    @ytanna93 4 года назад +9

    I think at 16:45 - the little ion next to the url had a little vibrate. might indicate the firefox was blocking it

    • @Ashotofcode
      @Ashotofcode  4 года назад

      Good spot thanks - the permission alert is a bit more subtle in Firefox and missed it there

    • @careerguru5207
      @careerguru5207 4 года назад

      Yea I saw that

  • @faustaleonardo
    @faustaleonardo 4 года назад +2

    Amazing. Thank you and keep up the good work. I am sure you channel will be keep growing up :)

  • @shads811
    @shads811 3 года назад +2

    Hi thank you for this great tutorial. I was just wondering if there is a way insert the notification message on the web page directly, for instance, writing the notification content in a block of the client webpage ?

    • @Ashotofcode
      @Ashotofcode  2 года назад +2

      Hi Chadi, you probably could, but we'll be on a different thread when receiving the message, so would need to post it to the page, which it turn might not even be open.. I would think if looking to show something on the page then a tech like SignalR might be better. Good q though thanks :-)

    • @shads811
      @shads811 2 года назад +1

      @@Ashotofcode I see thank you for your answer ! I actually figured about « Service Worker » technology that is used and opened by the navigator on a different thread. The service workers listen to any notifications and forward this notification to the navigator

  • @ali-cv2ep
    @ali-cv2ep 8 месяцев назад +1

    You saved me a lot of time, thank you

    • @Ashotofcode
      @Ashotofcode  8 месяцев назад

      You are welcome! Cheers Mark

  • @alexandrefossatifilho558
    @alexandrefossatifilho558 4 года назад +4

    right to the point, excellent video! thank you

  • @ash-faque
    @ash-faque 3 года назад +2

    Firefox shows a little notification icon next to the lockpad on the address bar, naughty Firefox

    • @Ashotofcode
      @Ashotofcode  3 года назад

      Good spot thanks! Cheers Mark

  • @angelbythewings
    @angelbythewings 4 года назад +1

    awesome video, btw was your cpu overclocking this entire time ?

    • @Ashotofcode
      @Ashotofcode  4 года назад +1

      Thanks Shanur, probably was yep! OBS takes its toll, need me some Zen 3 I reckon 😃

  • @Lyfhaxx
    @Lyfhaxx 2 года назад +1

    Hey i tried it but the notification just won't show up on chrome, everything seems to be working fine. But the notification just wouldn't show

    • @riiadada5283
      @riiadada5283 Год назад

      here is the solution google this , you will find the answer in stackoverflow , "404 error when trying to register serviceWorker "

  • @webdeveloper2528
    @webdeveloper2528 2 года назад +2

    6:30 you directly passed the public key into the applicationServerKey but I saw others pass it through a urlBase64ToUint8Array function what is the difference?

    • @Ashotofcode
      @Ashotofcode  2 года назад

      Hiya - I think maybe as I just pasted it in it worked ok - but to actually pass it back from the client to server in real world scenario it might need encoding. Been a while since looked at this though afraid. Cheers Mark

  • @Judd2000
    @Judd2000 5 месяцев назад +1

    Excellent tutorial!

  • @mohammadfarhan6247
    @mohammadfarhan6247 4 года назад +2

    Excellent demonstration. thank you

  • @ua-today
    @ua-today Год назад +1

    In Firefox Nightly you may see push icon shaking (left from url field), when you click subscribe.

    • @Ashotofcode
      @Ashotofcode  Год назад

      Ah yep seen that since - good spot 🙂

  • @SamuelHauptmannvanDam
    @SamuelHauptmannvanDam Год назад +1

    But will this work if you then close the browser? How open does the "app" have to be? If I have a PWA, in the background on Android or iOS, will it pop up?

    • @Ashotofcode
      @Ashotofcode  Год назад

      Hiya, it will work with the browser closed, as long as you have it running in the service tray on windows, which Chrome will do by default. On mobile it should always be running in the background. Cheers Mark

  • @devinboyd8883
    @devinboyd8883 2 года назад +2

    Would it be possible to automate the node push to run at a scheduled time, like for a reminder?

    • @Ashotofcode
      @Ashotofcode  2 года назад

      Hi Devon, for sure - Azure functions, AWS Lambda these can kick off node apps for us on a schedule. Cheers Mark 🙂.

    • @samabhishek
      @samabhishek 8 месяцев назад

      @@Ashotofcode i need to push notifications for a reminder website at a scheduled time .i didn't get you what you were saying in the msg

  • @zipanamera8990
    @zipanamera8990 2 года назад +2

    Is it possible to shedule the Push notifications? So a user can choose on the website a date and on this date he should get a Push notification like a todolist reminder.

    • @Ashotofcode
      @Ashotofcode  2 года назад +1

      Hiya - possible I think yes - you'd need to store the schedule alongside the push details via an API call when the user enabled notifications, then push to just this user at that time. Sounds good :-)

    • @zipanamera8990
      @zipanamera8990 2 года назад

      @@Ashotofcode Hey, but how would this work exactly I do not find much in the internet. I already send the selected date in the push message, but now I don't know how to display it on this date, it always shows directly the push.

    • @zipanamera8990
      @zipanamera8990 2 года назад

      Is it possible to show me that quick because i think it is not difficult but i do not find something simillar in the internet and my knowhow about that is not very good. Thank you :)

  • @kodyfied5164
    @kodyfied5164 3 года назад +1

    Can this be used in a web chat application to notify the client that a new message was waiting to be retrieved? Currently my chat clients has to constantly pool the server for new messages but this uses up a lot of resources. I would like to have the server send a push to the clients each time there is a new message... that way the client will run the query only when there is a message waiting for it at the server. Thank you.

  • @anujers8120
    @anujers8120 Год назад +1

    Can we get web push notification in background while we not using the app?

    • @Ashotofcode
      @Ashotofcode  Год назад

      hiya - yes no need to have the app open. As long as the browser itself is running (and it does in the background these days, at least Chrome, Edge do as I 'm aware) then the notification will appear.

  • @MrRhysstevens
    @MrRhysstevens 5 лет назад +4

    Nice one, would be great if you can follow this on to make it complete. PS did Firefox have a little speech bubble near the beginning of the url

    • @Ashotofcode
      @Ashotofcode  5 лет назад +4

      Hi Rhys, good spot thanks yes! just tried again in Firefox nightly and it does a little animation on the url icon, and then you need to click it yourself in order to display the 'allow/deny' dialog box. Looks like this is the way they are going in order to reduce the annoyance that some of these requests can have. I'll try to do a part 2 with the API and database implemented I reckon yep. Cheers

  • @juanmamani2110
    @juanmamani2110 3 года назад +1

    Thanks for sharing!

    • @Ashotofcode
      @Ashotofcode  3 года назад

      Thanks for watching Juan :-)

  • @SourabhZanwar
    @SourabhZanwar 3 года назад +1

    What did you do at 11:51 to format the JSON for sub? TIA

    • @Ashotofcode
      @Ashotofcode  3 года назад

      That's the 'Prettier' vscode plugin I think there Sourabh

  • @shneornagar6147
    @shneornagar6147 3 года назад +1

    works for me.
    thanks!!

    • @Ashotofcode
      @Ashotofcode  3 года назад

      Nice thanks Shneor - glad it was helpful :-)

  • @anuragverma9519
    @anuragverma9519 3 года назад +1

    explained clearly

    • @Ashotofcode
      @Ashotofcode  3 года назад

      Thanks Anurag, glad it was useful :-)

  • @SportTechNomad
    @SportTechNomad 4 года назад +2

    i think you missed the message by not looking at the url bar, a message icon appears where you have to click i guess?

  • @dacianvictorable
    @dacianvictorable 6 месяцев назад

    Is this kind of notifications work also on mobile browsers? (android & ios)

  • @Magistrado1914
    @Magistrado1914 4 года назад +2

    Excellent tutorial
    25/06/2020

  • @williammasferrer9067
    @williammasferrer9067 2 года назад +1

    U re AWESOME!!!

    • @Ashotofcode
      @Ashotofcode  2 года назад

      Thanks William, glad it was helpful, Cheers Mark 😀

  • @JadeclonOfficial
    @JadeclonOfficial 3 года назад +1

    Do I have to push the notifications from the client or the server side?

    • @Ashotofcode
      @Ashotofcode  3 года назад

      Server side yep - Cheers Mark

  • @hirisraharjo
    @hirisraharjo 3 года назад +1

    Very informative video! But is it possible to use it without service worker?

    • @Ashotofcode
      @Ashotofcode  3 года назад

      Hi HArris, unfortunately not, we need something running in the background to receive the message and that is the service worker, otherwise you always need to have the webpage open. Cheers Mark

  • @ademolasegun4250
    @ademolasegun4250 4 года назад +1

    Thanks for the tutorial, Nice One but pls which software did you use to make Video?

    • @Ashotofcode
      @Ashotofcode  4 года назад

      Thanks Adewale, I use OBS Studio these days, it's pretty good :-)

    • @ademolasegun4250
      @ademolasegun4250 4 года назад

      @@Ashotofcode Thanks for the reply

  • @sergiumare7259
    @sergiumare7259 4 года назад +1

    Does web push trigger when the browser is closed? I'm interested in case of a Progressive web app, in an IOS/ android environment?

    • @Ashotofcode
      @Ashotofcode  4 года назад

      Hiya, no it won't we'll need the browser running, but not the website itself.

  • @SteveWilding
    @SteveWilding 2 года назад

    Lost me on step 1, so I couldn't follow along with anything else. 'npm' is not recognized as an internal or external command,
    operable program or batch file.

  • @lwiimbokasweshi
    @lwiimbokasweshi 2 месяца назад +1

    excellent

  • @skrozzz
    @skrozzz 3 года назад +1

    What if we want to use Chrome(PC, Android) internal
    service worker with Web-push? Thanks

    • @Ashotofcode
      @Ashotofcode  3 года назад

      That's another video I think! Cheers Mark

  • @dhanielr
    @dhanielr 3 года назад +2

    Nice! Is this work on Safari?

    • @Ashotofcode
      @Ashotofcode  3 года назад

      Thanks - unfortunately it will not afraid..

    • @thanasisathanasi4965
      @thanasisathanasi4965 2 года назад

      @@Ashotofcode Why it does not work on safari?

  • @john-blair
    @john-blair 4 года назад +1

    I see some implementations take the VAPID public key and convert it to a Uint8Array to get the subscription - do you know which approach is correct?

    • @Ashotofcode
      @Ashotofcode  4 года назад +2

      Hi Umbraco, I do recall seeing this conversion taking place too when checking this out, I'm not sure why though afraid, didn't need it for my implementation though for sure. Cheers Mark

    • @john-blair
      @john-blair 4 года назад +1

      @@Ashotofcode FYI I did some research and converting to Unit8Array is not necessary - you can assign a Base 64 value directly!

  • @markrussellfilaroski5035
    @markrussellfilaroski5035 4 года назад +1

    What program are you using to write code? where it auto-populates? and thanks for sharing

    • @Ashotofcode
      @Ashotofcode  4 года назад

      Hi Mark, 'Visual Studio Code' is the editor here, and super nice it is :-) some of the auto completion is using this extension [Visual Studio IntelliCode] it learns from what you've typed, and as that was at least the 4th take on the video it had some good data! so might not be as good for initial completions on new code. Thanks for watching by the way, hope it was useful.

  • @MrGigi-dz9cv
    @MrGigi-dz9cv 3 года назад +1

    I can hear your computer fan from here ... 😀😀😀😀

  • @mariusbechtold3698
    @mariusbechtold3698 4 года назад +1

    Thank you! Would this also work on an android and ios device?

    • @Ashotofcode
      @Ashotofcode  4 года назад +1

      Hi Marius - will work fine on android yes, just needs to be in a browser that supports service worker, like chrome. ios.. not so sure there I'll take a look for sure. Cheers Mark

    • @mariusbechtold3698
      @mariusbechtold3698 4 года назад

      Thank you for answering. Please let me know if you find out :)

  • @hakanaki
    @hakanaki 3 года назад +1

    How do you send notifications to a specific user/browser ??

    • @Ashotofcode
      @Ashotofcode  3 года назад +1

      hiya - not really possible to identify the users with web push afraid. It's more of a black box distribution list. You could pick one out from the DB but its all annonymous data really. Good question though thanks - cheers Mark

    • @hakanaki
      @hakanaki 3 года назад +2

      @@Ashotofcode thank you for taking the time to reply, I really appreciate it. But I have one more question 😃.
      How to I direct a user to a page if they click on the notification 🤔

    • @Ashotofcode
      @Ashotofcode  3 года назад +1

      @@hakanaki new video on this coming soon :-) but tldr you can specify an action in the options that are sent as part of the webpush payload and that action can be a URL. Some good details in here: developers.google.com/web/ilt/pwa/introduction-to-push-notifications

  • @elmarhasanov735
    @elmarhasanov735 4 года назад +1

    Hello. how many k notifications would be sent per second with this method?

    • @Ashotofcode
      @Ashotofcode  4 года назад +1

      Good question - I'm not sure though afraid..

    • @elmarhasanov735
      @elmarhasanov735 4 года назад +1

      @@Ashotofcode we are looking for an expert who can help us with this)

  • @fabianoandrade9644
    @fabianoandrade9644 2 года назад +1

    no longer works in chrome

  • @bloggingmalls9886
    @bloggingmalls9886 3 года назад +1

    Hello, if you have a subscriber to your web push notification and at the time you send the notification the said user is not online and or not currently on the web page how can the user receive the notification?

    • @Ashotofcode
      @Ashotofcode  3 года назад +1

      Hi - good question :-) There is some queuing ability it seems for sure. Check this article out: developers.google.com/web/fundamentals/push-notifications/how-push-works#:~:text=A%20push%20service%20receives%20a,developers%20have%20no%20control%20over.

    • @bloggingmalls9886
      @bloggingmalls9886 3 года назад +1

      @@Ashotofcode okay thanks for the reply.... I was thinking you will need to do some extra stuff for the queue to take place.

  • @yanisbenslimane3106
    @yanisbenslimane3106 3 года назад +1

    Good video i love it, thanks.
    ps : Mozilla show you the permission icon on the URL ( to the left of https ) :D

    • @Ashotofcode
      @Ashotofcode  3 года назад

      Nice glad you found useful, yep the url good spot ta 😀 cheers mark

  • @anujers8120
    @anujers8120 Год назад

    I am using MySQL database and i have subscription stored in database but when I disable notification then I get an error in my server that subscription has expired or no longer valid. Even I store the subscription in database. How can I avoid such error? Please guide me😊

  • @enviromanager
    @enviromanager Год назад

    is it works also for iphone safari browser ?

  • @aiseknewton
    @aiseknewton 4 года назад +1

    im facing problem with the service worker. when i deploy it, i got an error "Uncaught (in promise) TypeError: Failed to register a ServiceWorker" do you know anything about this?

    • @Ashotofcode
      @Ashotofcode  4 года назад +1

      Hi Isaac, could be a lot of things I'm afriad :-( I would see if you can get some more details from the exception on the innerException, might be simply the service worker file path is incorrect. Cheers Mark

  • @tomaselke3670
    @tomaselke3670 3 года назад +1

    Excellent video, but I'm sitting here internally screaming "I THINK THE PERMISSION REQUEST POPUP IS SHOWING IN THE URL BAR JUST LEFT OF 'HTTPS' WITH A LITTLE MESSAGE ICON!!!!!"

    • @Ashotofcode
      @Ashotofcode  3 года назад

      Thanks glad was useful, the popup yep, will know where to look now for sure 😀

  • @aayushagarwal979
    @aayushagarwal979 3 года назад

    I am using firebase notification, did the same for adding buttons.But the notification is only showing the text and not the action buttons... Here is the code snippet :
    self.addEventListener('push', function (event) {
    console.log('Push Notification Received.');
    var eventData = event.data.text();
    obj = JSON.parse(eventData); //Parse the received JSON object.
    notifyPayload = obj;
    var options = {
    body: obj.data.body,
    icon: obj.data.icon,
    actions: [
    {
    action: 'coffee-action',
    title: 'Coffee',
    icon: ''
    },
    {
    action: 'doughnut-action',
    title: 'Doughnut',
    icon: ''
    }]
    };
    event.waitUntil(self.registration.showNotification("Hello world", options));


    });

  • @TazBo-wd2ig
    @TazBo-wd2ig Год назад +1

    Can you send push notifications to individual people

    • @Ashotofcode
      @Ashotofcode  Год назад

      Kinda yes - would need the user to login or provide some ID say their email in order that we can associate the push details with the userid. So removes the anonymity and ease of use the solution we have here, but can be done yep. Cheers Mark

    • @TazBo-wd2ig
      @TazBo-wd2ig Год назад

      @@Ashotofcode can you push it to a mobile number? Let’s say I have a booking system and I want to remind clients of a treatment they have today.

  • @sunleangyim2468
    @sunleangyim2468 3 года назад +1

    There is no sw.js in the source can you help me solve this problem ?

    • @Ashotofcode
      @Ashotofcode  3 года назад

      I'll have a check for sure. Cheers Mark

  • @Zeeye
    @Zeeye 3 года назад

    "nhandled Rejection (InvalidCharacterError): Failed to execute 'subscribe' on 'PushManager': The provided applicationServerKey is not encoded as base64url without padding."

  • @realifedev4124
    @realifedev4124 3 года назад +1

    Can I get a link to the GitHub repo? I want to match your source code with mine.
    Thanks.

    • @Ashotofcode
      @Ashotofcode  3 года назад

      Sorry yes thought I'd added to the description but was not there. Have added now (although so long ago not sure if the correct one afraid!)
      github.com/MarkJamesHoward/push

  • @abhishekgautam2393
    @abhishekgautam2393 4 года назад

    in the first few seconds, what did you type on the cmd at the end to go to visual studio?

    • @Ashotofcode
      @Ashotofcode  4 года назад

      Hi Sagar, 'Code .' is the command to run, it will open VSCode and use the current folder for the project because we specify the 'dot', cheers Mark

    • @tapasvashi6822
      @tapasvashi6822 4 года назад

      Code . is the shortcut to open that project directly in Visual Code.
      Thanks

  • @andresfelipemunoznaranjo9784
    @andresfelipemunoznaranjo9784 3 года назад +1

    is it possible to make it sound?

    • @Ashotofcode
      @Ashotofcode  3 года назад

      hiya - would be dependant on the Operating System I think - in Windows I don't think there is an option, and we would not have permission to set this anyhow, would be the end user only I think. Cheers Mark

  • @Zeeye
    @Zeeye 3 года назад

    Why did you not get the base64url error...

  • @ask4144
    @ask4144 Год назад +1

    the problem:
    you write sendNotification () in the sw code instead of showNotification().
    thank you for the video

  • @bestincodepoint6677
    @bestincodepoint6677 4 года назад

    When I tried to communicate with firebase through my web api(c#) getting error :-The remote server returned an error: (401) Unauthorized..Let me know the reason.

  • @sergeyonufrienko4977
    @sergeyonufrienko4977 4 года назад +1

    Thanks a lot!

  • @matthiasmuller7677
    @matthiasmuller7677 3 года назад +1

    Why is it not possible to do it on localhost?

    • @Ashotofcode
      @Ashotofcode  3 года назад +1

      That I can't recall sorry - been to long afraid :-)

  • @Mohedfanah
    @Mohedfanah 3 года назад +1

    Does this work android mobile chrome or other browsers

    • @Ashotofcode
      @Ashotofcode  3 года назад

      Hi Mohamed, this will work on android chrome for sure yes, I think others too yes. Cheers Mark

  • @chome4
    @chome4 4 года назад +1

    How can you implement this to notify someone of the update of a specific website they've visited in the past?

    • @Ashotofcode
      @Ashotofcode  4 года назад

      Hiya - you could pass the website url in the push notification text I think?

  • @trocomerlo
    @trocomerlo 4 года назад +1

    Nice content. The fan background noise though...

    • @Ashotofcode
      @Ashotofcode  4 года назад +1

      Yeah sorry about that - sorted for the latest videos with a 150mm quiet fan :-)

  • @krepkovmeste
    @krepkovmeste 2 года назад

    show please, how to send gps coordinates in background

  • @ParthAkbari
    @ParthAkbari 4 года назад +1

    Cool dude. Do u have demo on PWA web app

    • @Ashotofcode
      @Ashotofcode  4 года назад +1

      Hi Parth, thanks, glad it was helpful, I've not got a full PWA video, but have one here on service workers ruclips.net/video/zJ9syruvx8w/видео.html cheers Mark

    • @ParthAkbari
      @ParthAkbari 4 года назад

      I am receiving error 403 (webpush.webpushexception: received unexpected response code) after sending one notification to use on mobile. I have developed scheduler to send notification to user at every 40 min

  • @john-blair
    @john-blair 4 года назад

    Thanks for video. I expected the notification to be "test message" rather than "Hello world!" - so i got the showNotification rather than the sendNotification - why?
    fyi your sw.js code has sendNotification initially instead of showNotification

    • @Ashotofcode
      @Ashotofcode  4 года назад +1

      Hi Umbraco, I got stuck at that point and copied the push part from the blog I think, that's when it changes from the 'test message' that I entered to the 'hello world' used in the blog. Cheers Mark 😀

    • @john-blair
      @john-blair 4 года назад

      @@Ashotofcode Thanks for the code snippets. I got my implementation working on the latest version of Umbraco and did a tutorial of getting it working with .net johnblair.azurewebsites.net/sample-pages/mobile-notifications/
      ruclips.net/video/BSpvDZ7yT7s/видео.html

  • @NimaNaraghi
    @NimaNaraghi 4 года назад +5

    The internet access and watching videos are expensive in many countries. It is good to cut the parts that are not relevant. Cheers.

  • @Script_Sage
    @Script_Sage 4 года назад +1

    Does it notify user when data change?

    • @Ashotofcode
      @Ashotofcode  4 года назад

      Not automatically afraid. You'd need to detect the change and fire the notification off

    • @KONRADSOARES
      @KONRADSOARES 4 года назад

      I think you can check something here.
      nodemasters.wordpress.com/2020/05/25/web-push-notifications-to-monitoring-application-thresholds/

  • @AbhishekSingh-ww9kn
    @AbhishekSingh-ww9kn 4 года назад

    Pretty great stuff

  • @aakashgautam2200
    @aakashgautam2200 4 года назад +1

    does web push has any way i can send notification to many subscribers at once or do i need to store all subscribers in database and send notification by looping on the data whenever something happens in the system for example a new item is added .

    • @Ashotofcode
      @Ashotofcode  4 года назад

      It's up to us to manage the subscribers list in a database yes.. video coming on this later today!

    • @upsellfxlive
      @upsellfxlive 4 года назад +1

      @@Ashotofcode That would be awesome! When will this video be up?

    • @Ashotofcode
      @Ashotofcode  4 года назад

      up now :-)

    • @kimmerj
      @kimmerj 3 года назад

      @@Ashotofcode Hello can you send me the link on how to send notification to many subscribers ? Thanks yo!

  • @JamieTransNyc
    @JamieTransNyc Год назад +1

    @16:40 In Firefox... you can see the "lock" jumping around on the URL.... it wants you to click on the lock to bring up a dialog which will allow you to enable notifications for Firefox. This happens in Chrome sometimes also. It depends on what your default security settings are set for the browser.

  • @kaverschik-80
    @kaverschik-80 4 года назад +1

    Good example, thank you. But starting at 9:18 it's a kind of flickering magic. :)

    • @Ashotofcode
      @Ashotofcode  4 года назад

      Hi Micha, watched it back and you are correct, does go a little full on there! will keep in mind for future ones thanks

  • @anowarulhassan5117
    @anowarulhassan5117 10 месяцев назад

    Can you make a new fresh video on it by using MERN

  • @konradstepien9116
    @konradstepien9116 4 года назад

    (index):27 Uncaught (in promise) DOMException: Registration failed - push service not available
    subscribe @ (index):27
    async function (async)
    subscribe @ (index):20
    onclick @ (index):11
    Did you have something similar? I don't know how to resolve it.

    • @Ashotofcode
      @Ashotofcode  4 года назад

      Hi Konrad afraid I've not seen this one myself. Can only say give Google a go on this one - let me know if you find the reason!

    • @konradstepien9116
      @konradstepien9116 4 года назад +1

      @@Ashotofcode hi, I found the solution. I need to use `urlBase64ToUint8Array(base64String)`function which is in the GitHub link provided.

    • @john-blair
      @john-blair 4 года назад

      @@konradstepien9116 Could you tell me where you used urlBase64ToUint8Array? Was it for applicationServerKey in the call to subscribe? Thanks

  • @alsath2574
    @alsath2574 4 месяца назад +1

    👍

  • @shivapalvlogs9662
    @shivapalvlogs9662 4 года назад

    error: Vapid public key should be 65 bytes long when decoded.

  • @kimmerj
    @kimmerj 3 года назад

    Can you send this to many user ? How ?

    • @Ashotofcode
      @Ashotofcode  3 года назад

      Hi Kim, yes but only by making the call multiple times, there is no group push as such. cheers Mark

  • @thanasisathanasi4965
    @thanasisathanasi4965 2 года назад

    Why this is not working on safari?

    • @Ashotofcode
      @Ashotofcode  2 года назад +1

      I need to look into some more - but unfortunately I think Safari has gone off on its own here and does not use ServiceWorkers for Web Push. Good point raised thanks😀

    • @thanasisathanasi4965
      @thanasisathanasi4965 2 года назад

      @@Ashotofcode Thank you.

  • @shivapalvlogs9662
    @shivapalvlogs9662 4 года назад

    Vapid public key should be 65 bytes long when decoded.

  • @ashutoshmishra5110
    @ashutoshmishra5110 4 года назад

    when i do this... my pushmanger returns { } ...

  • @rajashekhar433
    @rajashekhar433 4 года назад

    looking for workbox

  • @mathis7138
    @mathis7138 4 года назад

    (node:13083) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Request path contains unescaped characters
    Not even google has an answer :(

  • @Zeeye
    @Zeeye 3 года назад

    Also: node push.js
    (node:14757) UnhandledPromiseRejectionWarning: TypeError [ERR_UNESCAPED_CHARACTERS]: Request path contains unescaped characters
    at new ClientRequest (_http_client.js:151:13)
    at Object.request (https.js:312:10)
    at /Users/sebastiaanlangeveld/prive/cryptosignal.me-back/node_modules/web-push/src/web-push-lib.js:338:33
    at new Promise ()
    at Object.WebPushLib.sendNotification (/Users/sebastiaanlangeveld/prive/cryptosignal.me-back/node_modules/web-push/src/web-push-lib.js:315:12)
    at Object. (/Users/sebastiaanlangeveld/prive/cryptosignal.me-back/push.js:15:6)
    at Module._compile (internal/modules/cjs/loader.js:1256:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1277:10)
    at Module.load (internal/modules/cjs/loader.js:1105:32)
    at Function.Module._load (internal/modules/cjs/loader.js:967:14)
    (Use `node --trace-warnings ...` to show where the warning was created)
    (node:14757) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag `--unhandled-rejections=strict` (see nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1)
    (node:14757) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

  • @kepamuk1
    @kepamuk1 Год назад

    don't work

  • @classicguy7813
    @classicguy7813 3 года назад +1

    Doe it also work with PWA on heroku Sir, may I remind you are remarkABLEE!EEEEEE

    • @Ashotofcode
      @Ashotofcode  3 года назад +1

      Hi Okan, that I'm not sure, will try to take a look :-)

  • @unomas9686
    @unomas9686 3 года назад

    ни х... не понял как это работает

  • @hosseinbiniaz9379
    @hosseinbiniaz9379 2 года назад +1

    good stuff support support

    • @Ashotofcode
      @Ashotofcode  2 года назад

      Much appreciated Hossein 🙂Cheers Mark