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👌👌👌
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!
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 ;-)
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?
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
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.
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.
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.
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 :-)
@@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.
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 :)
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
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
@@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 🤔
@@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
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?
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
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
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
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
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
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?
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.
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
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
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 ?
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 :-)
@@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
"nhandled Rejection (InvalidCharacterError): Failed to execute 'subscribe' on 'PushManager': The provided applicationServerKey is not encoded as base64url without padding."
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
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?
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
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
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.
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😊
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
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 .
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.
@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.
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!!!!!"
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
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 😀
@@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
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.
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😀
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));
(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.
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.
(node:13083) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Request path contains unescaped characters Not even google has an answer :(
![Blox Fruits Dragon Rework Update [Full Stream]](http://i.ytimg.com/vi/EqDAp8udhm0/mqdefault.jpg)
Thanks
You're Welcome Smudge! :-)
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👌👌👌
Thanks Jimi 😀
Me too
I think it is still using firebase.
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!
Wow thanks Bill!! 🙂 Great to hear this helped out. Cheers Mark
Haven't signed in for youtube for a long time. Just done it to upvote this video and subscribe... You are rocking..
Thanks Seetha, glad it was useful for you😃
first half was just what I needed, nice and bare bones, straight to the point
Thanks Josh glad it was helpful :-)
Best (and well explained) web push tutorial ever, thank you
Thanks Ivan, glad it was helpful 👍
Really clean, straight to the point. 🔥
Thanks! glad it was useful, Cheers Mark
It really helps me understand about web push API. Thanks!
You are welcome! Cheers Mark
Watching in 2021 and still great. Thanks for this very simple and informative example!
Glad it was helpful Chandra :-)
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 ;-)
Thanks good spot😀👍😀
I think at 16:45 - the little ion next to the url had a little vibrate. might indicate the firefox was blocking it
Good spot thanks - the permission alert is a bit more subtle in Firefox and missed it there
Yea I saw that
You saved me a lot of time, thank you
You are welcome! Cheers Mark
Amazing. Thank you and keep up the good work. I am sure you channel will be keep growing up :)
right to the point, excellent video! thank you
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?
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
Would it be possible to automate the node push to run at a scheduled time, like for a reminder?
Hi Devon, for sure - Azure functions, AWS Lambda these can kick off node apps for us on a schedule. Cheers Mark 🙂.
@@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
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
here is the solution google this , you will find the answer in stackoverflow , "404 error when trying to register serviceWorker "
Where you get vapid keys?
What did you do at 11:51 to format the JSON for sub? TIA
That's the 'Prettier' vscode plugin I think there Sourabh
Excellent demonstration. thank you
Can we get web push notification in background while we not using the app?
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.
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.
Nice! Is this work on Safari?
Thanks - unfortunately it will not afraid..
@@Ashotofcode Why it does not work on safari?
awesome video, btw was your cpu overclocking this entire time ?
Thanks Shanur, probably was yep! OBS takes its toll, need me some Zen 3 I reckon 😃
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.
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 :-)
@@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.
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 :)
In Firefox Nightly you may see push icon shaking (left from url field), when you click subscribe.
Ah yep seen that since - good spot 🙂
Why did you not get the base64url error...
Excellent tutorial!
Cool Thanks
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
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
Do I have to push the notifications from the client or the server side?
Server side yep - Cheers Mark
i think you missed the message by not looking at the url bar, a message icon appears where you have to click i guess?
Good spot thanks yes!
Firefox shows a little notification icon next to the lockpad on the address bar, naughty Firefox
Good spot thanks! Cheers Mark
I can hear your computer fan from here ... 😀😀😀😀
How do you send notifications to a specific user/browser ??
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
@@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 🤔
@@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
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?
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
Cool dude. Do u have demo on PWA web app
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
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
Can you send push notifications to individual people
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
@@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.
What if we want to use Chrome(PC, Android) internal
service worker with Web-push? Thanks
That's another video I think! Cheers Mark
Very informative video! But is it possible to use it without service worker?
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
is it works also for iphone safari browser ?
There is no sw.js in the source can you help me solve this problem ?
I'll have a check for sure. Cheers Mark
Is this kind of notifications work also on mobile browsers? (android & ios)
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?
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.
@@Ashotofcode okay thanks for the reply.... I was thinking you will need to do some extra stuff for the queue to take place.
is it possible to make it sound?
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
Does web push trigger when the browser is closed? I'm interested in case of a Progressive web app, in an IOS/ android environment?
Hiya, no it won't we'll need the browser running, but not the website itself.
Thanks for the tutorial, Nice One but pls which software did you use to make Video?
Thanks Adewale, I use OBS Studio these days, it's pretty good :-)
@@Ashotofcode Thanks for the reply
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?
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
@@Ashotofcode FYI I did some research and converting to Unit8Array is not necessary - you can assign a Base 64 value directly!
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 ?
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 :-)
@@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
"nhandled Rejection (InvalidCharacterError): Failed to execute 'subscribe' on 'PushManager': The provided applicationServerKey is not encoded as base64url without padding."
Does it notify user when data change?
Not automatically afraid. You'd need to detect the change and fire the notification off
I think you can check something here.
nodemasters.wordpress.com/2020/05/25/web-push-notifications-to-monitoring-application-thresholds/
Can I get a link to the GitHub repo? I want to match your source code with mine.
Thanks.
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
Why is it not possible to do it on localhost?
That I can't recall sorry - been to long afraid :-)
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?
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
Thank you! Would this also work on an android and ios device?
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
Thank you for answering. Please let me know if you find out :)
Does this work android mobile chrome or other browsers
Hi Mohamed, this will work on android chrome for sure yes, I think others too yes. Cheers Mark
How can you implement this to notify someone of the update of a specific website they've visited in the past?
Hiya - you could pass the website url in the push notification text I think?
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.
Hello. how many k notifications would be sent per second with this method?
Good question - I'm not sure though afraid..
@@Ashotofcode we are looking for an expert who can help us with this)
Nice content. The fan background noise though...
Yeah sorry about that - sorted for the latest videos with a 150mm quiet fan :-)
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😊
show please, how to send gps coordinates in background
works for me.
thanks!!
Nice thanks Shneor - glad it was helpful :-)
Excellent tutorial
25/06/2020
Glad it helped 😀
in the first few seconds, what did you type on the cmd at the end to go to visual studio?
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
Code . is the shortcut to open that project directly in Visual Code.
Thanks
U re AWESOME!!!
Thanks William, glad it was helpful, Cheers Mark 😀
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
Thanks for sharing!
Thanks for watching Juan :-)
Good video i love it, thanks.
ps : Mozilla show you the permission icon on the URL ( to the left of https ) :D
Nice glad you found useful, yep the url good spot ta 😀 cheers mark
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 .
It's up to us to manage the subscribers list in a database yes.. video coming on this later today!
@@Ashotofcode That would be awesome! When will this video be up?
up now :-)
@@Ashotofcode Hello can you send me the link on how to send notification to many subscribers ? Thanks yo!
the problem:
you write sendNotification () in the sw code instead of showNotification().
thank you for the video
Ah good spot! Cheers Mark🙂
explained clearly
Thanks Anurag, glad it was useful :-)
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.
error: Vapid public key should be 65 bytes long when decoded.
looking for workbox
Good example, thank you. But starting at 9:18 it's a kind of flickering magic. :)
Hi Micha, watched it back and you are correct, does go a little full on there! will keep in mind for future ones thanks
@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.
Cool good spotting thanks 🙂
Can you make a new fresh video on it by using MERN
Can you send this to many user ? How ?
Hi Kim, yes but only by making the call multiple times, there is no group push as such. cheers Mark
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!!!!!"
Thanks glad was useful, the popup yep, will know where to look now for sure 😀
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
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 😀
@@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
What program are you using to write code? where it auto-populates? and thanks for sharing
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.
The internet access and watching videos are expensive in many countries. It is good to cut the parts that are not relevant. Cheers.
excellent
Thank you! Cheers!
Why this is not working on safari?
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😀
@@Ashotofcode Thank you.
when i do this... my pushmanger returns { } ...
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));
});
(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.
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!
@@Ashotofcode hi, I found the solution. I need to use `urlBase64ToUint8Array(base64String)`function which is in the GitHub link provided.
@@konradstepien9116 Could you tell me where you used urlBase64ToUint8Array? Was it for applicationServerKey in the call to subscribe? Thanks
Vapid public key should be 65 bytes long when decoded.
Pretty great stuff
Thanks Abhishek 😀
Thanks a lot!
no longer works in chrome
Doe it also work with PWA on heroku Sir, may I remind you are remarkABLEE!EEEEEE
Hi Okan, that I'm not sure, will try to take a look :-)
👍
Cheers
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.
(node:13083) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 1): TypeError: Request path contains unescaped characters
Not even google has an answer :(
don't work
ни х... не понял как это работает
Thanks!
good stuff support support
Much appreciated Hossein 🙂Cheers Mark