hii subrat , I am using angular 5 and service worker is working fine in my browser but while requesting for Subscription browser not providing endPoint,p256dh and auth in console
I am able to receive notification payload but no chrome notification/ chrome banner coming on my machine or my phone, I have deployed in firebase and checked but banner not coming, I can see notification data only in console log.
hi bro sendNotifiation func is nt working in terminal i get "UnhandledPromiseRejectionWarning: WebPushError: Received unexpected response code" due to tis im nt getting my notification
does anyone else have this error? Access to fetch at 'fcm.googleapis.com/fcm/send/c940Z9gKMC4:APA' from origin 'https:/*myweb*.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
If you have a process of your browser running in the background you should get the notification, normally in windows when you close the browser it's kills all the process that may be the reason.
you have hardcoded the value of public key in frontend but public key value changes everytime we run the server..So are we supposed to make a get call to fetch public value from server first??
@@FunOfHeuristic Hey Thanks for the reply.. but i wanted to ask will these private key and public key values change everytime we push a notification or they are generated only one time for single project?
@@FunOfHeuristic if client registers from one system and logins from another system so are we supposed to store clients end points everytime in database??
Hello Sir. I am testing the push web notification on ios safari phone. but it getting an error. but its working on andoroid. ios error - TypeError undfined is not an object ( evaluting t.subscribe)
I have tried SwPush on Angular with your tutorial and it worked. But why don't notifications appear on the smartphone screen? does it only work on the desktop only? I have activated all permissions on the smartphone and have tried to activate notifications but still when doing the app.js node only on the desktop display that appears and not on the cellphone. I hope you reply to this message :)
hi subrat, i am getting the following error while running the app.js file in the server , can you pleas ehelp me here? the error is "Error sending notification, reason: Error: The subscription p256dh value should be 65 bytes long"
Hi subrat, nice content on RUclips till now for push notifications..just wandering how to achieve push notification in angular using spring as backend..I am still want service worker as if application is close i can receive notifications..any idea?
@@FunOfHeuristic thanku so much for responding back...can you please tell me how to target specific user..like by seeing your video its browser dependent like browser have endpoint...but we want to send specific user specific message ..how to achieve that
All push message is to a browser, app or some specific id, so you need to store all the client unique key and either send the notification to all or can ask user to set primary device.
Hi Sir, it will be great if we can do a full circle send notification from UI to save it in db and gets a notification for user in UI as well from push api
Thanks a lot for explaining .. WOuld it be possible to provide an example of receiving notification from JAVA Spring Boot API. I am not a JAVA guy but need a small e.g of Java sidde example of how to push it to the client service worker
@@raif4851 even if you close your browser then there should be some instances of chrome in your process, if that is running then you should get the notification.
@@FunOfHeuristic Unfortunately I could not do this, it works only when browser is open, and i dont know how to do it in react, i couldnt any thing on the internet
Hello @Raif, yes in windows if you close the browser all the process will also be closed, thats the reason you are not able to see the notification. For mac and mobile it's different
Thanks 😊 In my case I'm getting multiLingual_key for notification and then want to translate it in current language. and then I want to show notification to user. Do you know, how can I achieve that?
The text in the notification will appear according to the payload so according to me if you are sending the payload by changing the language then the text will be of that language.
@@FunOfHeuristic My Questions is. I want to show notification after some manipulation ( get translated value inside app components) and then want to show notification. this.swPush.message.subscription((message) => { // Here I'll get notification data, and want to make some changes in data. // and then I want to show notification. After this block of code execute. }) . is it possible? and many thanks for you Response man 🙇♂️🙇♂️
Hi @Sudhanshu Tripathi this is possible but with the push event by the service worker (javaScript) the swPush is a wrapper to that. in vanilla js you can achieve the same.
Hi Subrat, thanks for the great tutorial. Will this work on both Safari app for ios and chrome app for android? I am building an Angular PWA at the current moment.
UnhandledPromiseRejectionWarning: WebPushError: Received unexpected response code at IncomingMessage. (F:\AngularChallenge\FunOFHeroistic\web-push ode_modules\web-push\src\web-push-lib.js:347:20) at IncomingMessage.emit (events.js:205:15) at endReadableNT (_stream_readable.js:1154:12) at processTicksAndRejections (internal/process/task_queues.js:74:11) (node:7756) 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(). (rejection id: 1) in node i am facing this issue , any clue
Please check, the end point should be set to webPush, and check the vapid key as well, and client details (it will be unique for each browser, give your client details)
I will try to make an application which will have all the flow, like saving user with the client details, and sending them notification with other user action.
Hi Subrat, awesome content you have here! Been looking around to find a good solid ngsw swpush tutorial. Do you have any advice on implementing this with firebase? Once again good job on the content and thank you! 😄
hii subrat , I am using angular 5 and service worker is working fine in my browser but while requesting for Subscription browser not providing endPoint,p256dh and auth in console
Excellent about the PWA SWPush.
Thanks for all the pwa..great videos.
Is that possible to make interactive push notification without server worker
I am able to receive notification payload but no chrome notification/ chrome banner coming on my machine or my phone, I have deployed in firebase and checked but banner not coming, I can see notification data only in console log.
hi bro sendNotifiation func is nt working in terminal i get "UnhandledPromiseRejectionWarning: WebPushError: Received unexpected response code" due to tis im nt getting my notification
You are great. You explained each and every topic very clearly. Thanks a lot Sir.
Dude, love your videos, THANK YOU SO MUCH
Where is the part where you have backend sending data the angular service that is listening. is there a curl command or...
In the description you can find the BE repo link, we are using web-push here
does anyone else have this error?
Access to fetch at 'fcm.googleapis.com/fcm/send/c940Z9gKMC4:APA' from origin 'https:/*myweb*.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
Hi, Subeat, have you managed to do the full one with database ?
thanks very much
and please make next video on how to push data in db and fetch from db and call another api while using push notification
We learnt how we uge piost nocitification guys, sanke you. I`ll uge this in my plozect
Hi, i tried to do web push notification in Angular when the browser is closed but its not working. Are you having the same behaviour?
If you have a process of your browser running in the background you should get the notification, normally in windows when you close the browser it's kills all the process that may be the reason.
you have hardcoded the value of public key in frontend but public key value changes everytime we run the server..So are we supposed to make a get call to fetch public value from server first??
Yes you need to update the client key in server (user details) on successful registration in ui.
@@FunOfHeuristic Hey Thanks for the reply.. but i wanted to ask will these private key and public key values change everytime we push a notification or they are generated only one time for single project?
For private and public vapid key can be created once and you can use the same but the client endpoint may change.
@@FunOfHeuristic if client registers from one system and logins from another system so are we supposed to store clients end points everytime in database??
Yes, even if same system but a different browser.
Hello Sir. I am testing the push web notification on ios safari phone. but it getting an error. but its working on andoroid. ios error - TypeError undfined is not an object ( evaluting t.subscribe)
Can you please check with chrome with iOS.
@@FunOfHeuristic Thank sir for reply. but in safari Getting error.
Yes, in iOS safari it is not supported till now.
@@FunOfHeuristicOk thank you Sir. can you show how to add icon for ios PWA app.
@@FunOfHeuristic Its getting same error.
I have tried SwPush on Angular with your tutorial and it worked. But why don't notifications appear on the smartphone screen?
does it only work on the desktop only?
I have activated all permissions on the smartphone and have tried to activate notifications but still when doing the app.js node only on the desktop display that appears and not on the cellphone. I hope you reply to this message :)
Have you hosted your site with https(SSL).
hi subrat, i am getting the following error while running the app.js file in the server , can you pleas ehelp me here? the error is "Error sending notification, reason: Error: The subscription p256dh value should be 65 bytes long"
Please check you are entering the correct client details, p256dh is a client details
@@FunOfHeuristic I am doing that, but still the same issue, i am following you tutorial as it is.
Hey Subrat, you were right! its working!! thanks for the wonderful demo! Please do keep creating content! Awesome Work
Hi subrat, nice content on RUclips till now for push notifications..just wandering how to achieve push notification in angular using spring as backend..I am still want service worker as if application is close i can receive notifications..any idea?
Spring boot has same maven dependency for web-push you can use that, front end side will be remain same
@@FunOfHeuristic thanku so much for responding back...can you please tell me how to target specific user..like by seeing your video its browser dependent like browser have endpoint...but we want to send specific user specific message
..how to achieve that
All push message is to a browser, app or some specific id, so you need to store all the client unique key and either send the notification to all or can ask user to set primary device.
@@FunOfHeuristic thnku so much
please try to make a full video for push notifications including database also..btw nice content bro
Hi Sir, it will be great if we can do a full circle send notification from UI to save it in db and gets a notification for user in UI as well from push api
Hello Wuxin Yang, i Will do this in near future.
Can you please make end to end video on push notifications using firebase in angular
Ya I will 😊
Thanks a lot for explaining .. WOuld it be possible to provide an example of receiving notification from JAVA Spring Boot API. I am not a JAVA guy but need a small e.g of Java sidde example of how to push it to the client service worker
how to get the web-push valid-keys programmatically in component.ts without using command ??????????????? in angular
You should not generate vapid key in ui as it contains private key and which is required to send the notification. It can only be done in be.
UnhandledPromiseRejectionWarning: Error: The subscription p256dh value should be 65 bytes long. ... i am getting this error
Please check your client details and try again.
I am getting the same error and also i am not getting my client values ,can you help?
if i convert angular app to android app the pwa i have used will work on android app or not,please tell me
It will not be a Android app it will be a progressive web app and yes it will work in android.
@@FunOfHeuristic bro my question is i have converted my angular app to android app(.apk) so please tell me its work or not now actually.
@Fun Of Heuristic please reply
Have you used Trusted Web Activity, followed all the steps correctly
is it working when tab is closed or browser is closed? i think i works when only tab is cloesed ?
It will work even if browser is closed.
@@FunOfHeuristici have tried this in react but it didnt work when i closed browser , by the way thanks for answer :)
@@raif4851 even if you close your browser then there should be some instances of chrome in your process, if that is running then you should get the notification.
@@FunOfHeuristic
Unfortunately I could not do this, it works only when browser is open, and i dont know how to do it in react, i couldnt any thing on the internet
Hello @Raif, yes in windows if you close the browser all the process will also be closed, thats the reason you are not able to see the notification. For mac and mobile it's different
Very informative
Thanks 😊
In my case I'm getting multiLingual_key for notification and then want to translate it in current language.
and then I want to show notification to user.
Do you know, how can I achieve that?
The text in the notification will appear according to the payload so according to me if you are sending the payload by changing the language then the text will be of that language.
@@FunOfHeuristic My Questions is.
I want to show notification after some manipulation ( get translated value inside app components) and then want to show notification.
this.swPush.message.subscription((message) => {
// Here I'll get notification data, and want to make some changes in data.
// and then I want to show notification. After this block of code execute.
}) .
is it possible?
and many thanks for you Response man 🙇♂️🙇♂️
Hi @Sudhanshu Tripathi this is possible but with the push event by the service worker (javaScript) the swPush is a wrapper to that. in vanilla js you can achieve the same.
@@FunOfHeuristic thanks a lot🙇♂️🙇♂️
Please show that saving keys of subscription to the database with the express , mongoose and mongo atlas
I will make one video
@@FunOfHeuristic and please include how to send the notification to the specific subscriber only
Is it possible use web push in IOS? I tried and doesn´t work.
It should work as safari support push notification, but user need to allow the push notifications.
@@FunOfHeuristic ok Thanks. I will try
Please make full video on web push notifications server to client client to server
error : Service workers are disabled or not supported by this browser
Which browser you are using, if it's an older one please update.
@@FunOfHeuristic in chrome latest version and M Edge same issue. I'm using Angular 8 and running the application
with ng serve
It will work only in production, so you can strat a http-server in the dist folder/ your application, that's what I am doing in the video.
@@FunOfHeuristic thanks its works
@@FunOfHeuristic have a video to store it on DB in server
Hey Subrat why can't you make production grade application playlist. Take your own time but make a big application
Ya that's a good plan
Hi Subrat, thanks for the great tutorial. Will this work on both Safari app for ios and chrome app for android? I am building an Angular PWA at the current moment.
For safari iOS it's yet to come, but it will work with chrome in iOS and in android it will work 🙂
@@FunOfHeuristic Thanks!
sir make a video to retrieve the data from database
this is amazing
UnhandledPromiseRejectionWarning: WebPushError: Received unexpected response code
at IncomingMessage. (F:\AngularChallenge\FunOFHeroistic\web-push
ode_modules\web-push\src\web-push-lib.js:347:20)
at IncomingMessage.emit (events.js:205:15)
at endReadableNT (_stream_readable.js:1154:12)
at processTicksAndRejections (internal/process/task_queues.js:74:11)
(node:7756) 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(). (rejection id: 1) in node i am facing this issue , any clue
{
name: 'WebPushError',
message: 'Received unexpected response code',
statusCode: 401,
headers: {
'content-type': 'text/plain; charset=utf-8',
'x-content-type-options': 'nosniff',
'x-frame-options': 'SAMEORIGIN',
'x-xss-protection': '0',
date: 'Wed, 26 Aug 2020 09:10:30 GMT',
'content-length': '40',
'alt-svc': 'h3-29=":443"; ma=2592000,h3-27=":443"; ma=2592000,h3-T050=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"',
connection: 'close'
},
body: 'authorization header must be specified.
',
endpoint: 'fcm.googleapis.com/fcm/send/e5AoPi2f7hw:APA91bEct14moB2bVGzqB1Ch2mtMsH7uMoVec1SVfEykt1HBtmGXVBpNuyddc7pq88_-t1mqAdxkrMrrstGXFY3t-6csu71mdQ0HqpLkebEklMdlHeg6uRJ4w72ZrGeShAHB6plsJfPf'
}
{
name: 'WebPushError',
message: 'Received unexpected response code',
statusCode: 401,
headers: {
'content-type': 'text/plain; charset=utf-8',
'x-content-type-options': 'nosniff',
'x-frame-options': 'SAMEORIGIN',
'x-xss-protection': '0',
date: 'Wed, 26 Aug 2020 09:10:30 GMT',
'content-length': '40',
'alt-svc': 'h3-29=":443"; ma=2592000,h3-27=":443"; ma=2592000,h3-T050=":443"; ma=2592000,h3-Q050=":443"; ma=2592000,h3-Q046=":443"; ma=2592000,h3-Q043=":443"; ma=2592000,quic=":443"; ma=2592000; v="46,43"',
connection: 'close'
},
body: 'authorization header must be specified.
',
endpoint: 'fcm.googleapis.com/fcm/send/e5AoPi2f7hw:APA91bEct14moB2bVGzqB1Ch2mtMsH7uMoVec1SVfEykt1HBtmGXVBpNuyddc7pq88_-t1mqAdxkrMrrstGXFY3t-6csu71mdQ0HqpLkebEklMdlHeg6uRJ4w72ZrGeShAHB6plsJfPf'
}
Please check, the end point should be set to webPush, and check the vapid key as well, and client details (it will be unique for each browser, give your client details)
@@FunOfHeuristic Thanks for the video ..... it is working now Great FunofHeuristic..
Hello sir, I liked your video it helped me a lot, if you have further steps of subscription for notifications swpush please give me the link
I will try to make an application which will have all the flow, like saving user with the client details, and sending them notification with other user action.
Hello sir, I am getting error like , webpusherror : received unexpected response code...just after following your steps..can you please help on that
@@sonaiyamonika7229 check your push message payload, what you are sending to the notification.
I am just sending data as you sent
23 89 aa aana I have to say aaaa
Aa
Hi Subrat, awesome content you have here! Been looking around to find a good solid ngsw swpush tutorial. Do you have any advice on implementing this with firebase? Once again good job on the content and thank you! 😄
Thanks, I will try to make video on the same