Web Push Notifications - End to End implementation

[@SmudgetheBeagle]

Thanks

[@Ashotofcode]

You're Welcome Smudge! :-)

[@BillCarlson]

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]

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

[@jimbo-dev]

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👌👌👌

[@Ashotofcode]

Thanks Jimi 😀

[@sanetalking]

Me too

[@imuwaikhom]

I think it is still using firebase.

[@seethalakshmip7007]

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

[@Ashotofcode]

Thanks Seetha, glad it was useful for you😃

[@BlueyMcPhluey]

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

[@Ashotofcode]

Thanks Josh glad it was helpful :-)

[@khanthmuu6364]

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

[@Ashotofcode]

You are welcome! Cheers Mark

[@yungbeong7664]

Really clean, straight to the point. 🔥

[@Ashotofcode]

Thanks! glad it was useful, Cheers Mark

[@ytanna93]

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

[@Ashotofcode]

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

[@everythingtechwithmhlengi]

Yea I saw that

[@webdeveloper2528]

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]

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

[@ivanfranciscoj]

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

[@Ashotofcode]

Thanks Ivan, glad it was helpful 👍

[@SourabhZanwar]

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

[@Ashotofcode]

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

[@ali-cv2ep]

You saved me a lot of time, thank you

[@Ashotofcode]

You are welcome! Cheers Mark

[@chandragie]

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

[@Ashotofcode]

Glad it was helpful Chandra :-)

[@ua-today]

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

[@Ashotofcode]

Ah yep seen that since - good spot 🙂

[@devinboyd8883]

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

[@Ashotofcode]

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

[@samabhishek]

@@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

[@anujers8120]

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

[@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.

[@tmazightcom]

Where you get vapid keys?

[@Lyfhaxx]

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]

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

[@Judd2000]

Excellent tutorial!

[@Ashotofcode]

Cool Thanks

[@bArraxas]

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]

Thanks good spot😀👍😀

[@zipanamera8990]

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]

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]

@@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]

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 :)

[@williammasferrer9067]

U re AWESOME!!!

[@Ashotofcode]

Thanks William, glad it was helpful, Cheers Mark 😀

[@hakanaki]

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

[@Ashotofcode]

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]

@@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]

@@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

[@enviromanager]

is it works also for iphone safari browser ?

[@Zeeye]

Why did you not get the base64url error...

[@juanmamani2110]

Thanks for sharing!

[@Ashotofcode]

Thanks for watching Juan :-)

[@dacianvictorable]

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

[@alexandrefossatifilho558]

right to the point, excellent video! thank you

[@JadeclonOfficial]

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

[@Ashotofcode]

Server side yep - Cheers Mark

[@SamuelHauptmannvanDam]

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]

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

[@kodyfied5164]

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.

[@TazBo-wd2ig]

Can you send push notifications to individual people

[@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]

@@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.

[@andresfelipemunoznaranjo9784]

is it possible to make it sound?

[@Ashotofcode]

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

[@anuragverma9519]

explained clearly

[@Ashotofcode]

Thanks Anurag, glad it was useful :-)

[@shneornagar6147]

works for me. thanks!!

[@Ashotofcode]

Nice thanks Shneor - glad it was helpful :-)

[@skrozzz]

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

[@Ashotofcode]

That's another video I think! Cheers Mark

[@bloggingmalls9886]

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]

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]

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

[@matthiasmuller7677]

Why is it not possible to do it on localhost?

[@Ashotofcode]

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

[@mohammadfarhan6247]

Excellent demonstration. thank you

[@JamieTransNyc]

@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.

[@Ashotofcode]

Cool good spotting thanks 🙂

[@sunleangyim2468]

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

[@Ashotofcode]

I'll have a check for sure. Cheers Mark

[@lwiimbokasweshi]

excellent

[@Ashotofcode]

Thank you! Cheers!

[@MrGigi-dz9cv]

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

[@faustaleonardo]

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

[@Magistrado1914]

Excellent tutorial 25/06/2020

[@Ashotofcode]

Glad it helped 😀

[@ash-faque]

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

[@Ashotofcode]

Good spot thanks! Cheers Mark

[@cricketbeyondlimits]

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

[@Ashotofcode]

Good spot thanks yes!

[@sergiumare7259]

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]

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

[@shads811]

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]

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]

@@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

[@krepkovmeste]

show please, how to send gps coordinates in background

[@ParthAkbari]

Cool dude. Do u have demo on PWA web app

[@Ashotofcode]

Hi Parth, thanks, glad it was helpful, I've not got a full PWA video, but have one here on service workers kzbin.info/www/bejne/sHucpKyoqturbtk cheers Mark

[@ParthAkbari]

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

[@Zeeye]

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

[@dhanielr]

Nice! Is this work on Safari?

[@Ashotofcode]

Thanks - unfortunately it will not afraid..

[@thanasisathanasi4965]

@@Ashotofcode Why it does not work on safari?

[@Script_Sage]

Does it notify user when data change?

[@Ashotofcode]

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

[@KONRADSOARES]

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

[@DesmondAdarkwah]

how do you learn to do this without copying code, like did you read documentation or what did you do or were you taught, i just want to know how you guys learn to know all these technologies because i usually copy code and I don't like that

[@MrRhysstevens]

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]

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

[@realifedev4124]

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

[@Ashotofcode]

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

[@elmarhasanov735]

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

[@Ashotofcode]

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

[@elmarhasanov735]

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

[@Mohedfanah]

Does this work android mobile chrome or other browsers

[@Ashotofcode]

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

[@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😊

[@bestincodepoint6677]

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.

[@john-blair]

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]

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]

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

[@aiseknewton]

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]

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

[@hirisraharjo]

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

[@Ashotofcode]

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

[@mariusbechtold3698]

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

[@Ashotofcode]

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]

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

[@chome4]

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

[@Ashotofcode]

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

[@abhishekgautam2393]

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

[@Ashotofcode]

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]

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

[@SteveWilding]

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.

[@thanasisathanasi4965]

Why this is not working on safari?

[@Ashotofcode]

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]

@@Ashotofcode Thank you.

[@aakashgautam2200]

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]

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

[@upsellfxlive]

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

[@Ashotofcode]

up now :-)

[@kimmerj]

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

[@kimmerj]

Can you send this to many user ? How ?

[@Ashotofcode]

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

[@ademolasegun4250]

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

[@Ashotofcode]

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

[@ademolasegun4250]

@@Ashotofcode Thanks for the reply

[@angelbythewings]

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

[@Ashotofcode]

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

[@konradstepien9116]

(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]

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]

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

[@john-blair]

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

[@rajashekhar433]

looking for workbox

[@shivapalvlogs7]

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

[@anowarulhassan5117]

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

[@aayushagarwal979]

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)); });

[@AbhishekSingh-ww9kn]

Pretty great stuff

[@Ashotofcode]

Thanks Abhishek 😀

[@john-blair]

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]

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]

@@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/ kzbin.info/www/bejne/eITTp3eQbN6HbdU

[@quipitisi]

Nice content. The fan background noise though...

[@Ashotofcode]

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

[@ask4144]

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

[@Ashotofcode]

Ah good spot! Cheers Mark🙂

[@markrussellfilaroski5035]

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

[@Ashotofcode]

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.

[@sergeyonufrienko4977]

Thanks a lot!

[@fabianoandrade9644]

no longer works in chrome

[@NimaNaraghi]

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

[@ashutoshmishra5110]

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

[@kaverschik-80]

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

[@Ashotofcode]

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

[@yanisbenslimane3106]

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

[@Ashotofcode]

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

[@tomaselke3670]

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]

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

[@shivapalvlogs7]

Vapid public key should be 65 bytes long when decoded.

[@alsath2574]

👍

[@Ashotofcode]

Cheers

[@mathis7138]

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

[@Zeeye]

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.

[@classicguy7813]

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

[@Ashotofcode]

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

[@kepamuk1]

don't work

[@unomas9686]

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

[@Ashotofcode]

Thanks!

[@hosseinbiniaz9379]

good stuff support support

[@Ashotofcode]

Much appreciated Hossein 🙂Cheers Mark