Great video. Thanks for taking the time to put this together. Very detailed and to the point
@punithvs2384 Жыл бұрын
Thank you for creating such a well defined tutorial.
@ravikumarreddykapa4948 Жыл бұрын
Great explanation and very helpful. I have one requirement though, can we send notification based on the Role of the application. Example: Admin will get all the information where as normal user will get only specific information.
@pkovelan53 жыл бұрын
Thanks for this great resource
@anujchaturvedi62963 жыл бұрын
Thank You!
@AldenAranjo3 жыл бұрын
Amazing. More like this 👍
@flawlessYT-zn6vm Жыл бұрын
Hi. Just wondering have you tried this on safari 16 or on a PWA installed on iOS 16.4? I’ve a similar implementation created which works fine for notifications to chrome, edge and Firefox but fails for Safari with a 403 and reason BadJwtToken. Have you experienced anything like this?
@vaadinofficial Жыл бұрын
I haven’t had thre chance yet, but it’s on my todo list
@kenbirch9080 Жыл бұрын
@@vaadinofficial any update on IOS notifications being supported?
@vaadinofficial Жыл бұрын
iOS uses the web push standard, so there is nothing additional needed from our end. The BadJwtToken error mentioned above is because Safari and Firefox require a subject claim in the JWT although it is optional in the spec. On iOS you also need to have the app installed to home screen for the push notifications to work. Here's a demo I'm working if you want to check out the code: github.com/marcushellberg/vaadin-flow-web-push-notifications
@kenbirch9080 Жыл бұрын
@@vaadinofficial thanks for the prompt response...love Vaadin products... I will check this out tomorrow
@kenbirch9080 Жыл бұрын
As info when I upgraded my app to 23.3.6 these typescript errors were resolved.
@ricardolegorreta2479 Жыл бұрын
Marcus, we are using the web push notification and our Customer love it!!. But now we want to use the same functionality for Hilla React 2.2 and I was trying some how to get de 'sw.ts' service worker and there is no way that I see my source sw.ts file (so I cannot be a listener for the 'push' events). Any idea how can I make work push notifications for Hilla React?
@vaadinofficial Жыл бұрын
Does your Application.java file have @PWA annotation? That's needed for the service worker to get generated.
@ricardolegorreta2479 Жыл бұрын
Yes, I added de @PWA annotation but the sw.ts is not generated. In the chrome developer tools It show a sw.ts file oustside vaadin directory and I don´t where it come from. I will check again the @PWA since in your opinion it should work with hilla react. 2.2
@ricardolegorreta2479 Жыл бұрын
After many errors, finally I make it work!. (errors in my sw.ts file and the @PWA ended with more than one sw.ts, but it was my mistakes). Thanks for your help Markus.
@leolima85853 жыл бұрын
I met your channel today, can someone help me? Is he explaining that the person receives a firebase notification only from those who followed him?
@menakar5765 Жыл бұрын
Hi, I have implemented the webpush in angular with swpush and in spring boot, I am using the same dependencies as you showed. And, I have handled only subscription and unsubscription from front end, for sending notification, I am handling it from Backend itself and it is working. My question is I have passed title and body to my message, but facing issues in passing url. Whenever the message is clicked, it should be redirected to the given url. Do you have any suggestions for me to fix this?
@Obcy78 Жыл бұрын
It could be something like that : self.addEventListener("notificationclick", (e) => { e.notification.close(); var url = e.notification.url?? self.location.origin; return self.clients.openWindow(url); });
@oz94102 жыл бұрын
Can I use this library also for React ? When yes, how do I pass the "Create Endpoint.." part?
@vaadinofficial2 жыл бұрын
Yes. If you use React, you would probably use a REST endpoint of some kind instead.
@ВладимирАпарин-ц5е2 жыл бұрын
If you run this app from fat jar, not any problems with bouncy castle provider?
@vaadinofficial2 жыл бұрын
Running the fat jar works for me. What issues are you seeing?
@ВладимирАпарин-ц5е2 жыл бұрын
@@vaadinofficial java.security.InvalidKeyException: Not an EC key: ECDH at jdk.crypto.ec/sun.security.ec.ECKeyFactory.checkKey(ECKeyFactory.java:122) at jdk.crypto.ec/sun.security.ec.ECKeyFactory.toECKey(ECKeyFactory.java:91)
@fastmotion20493 жыл бұрын
Thanks for that awesome video! Can i build this with java only or do i need to use typescript for the client side part?
@vaadinofficial3 жыл бұрын
You need to have the browser part in either TypeScript or JavaScript because it builds on browser APIs and those only work with JS. I'm hoping we can get some helpers built into Vaadin in the future to make this easier also from Flow apps without needing any custom TS.
@fastmotion20493 жыл бұрын
@@vaadinofficial sounds good :) for now ill just use TS
@AldenAranjo3 жыл бұрын
@@vaadinofficial Vaadin flow please
@ricardolegorreta24792 жыл бұрын
@@AldenAranjo Any news to use this excellent example with Vaadin Flow?
@ricardolegorreta24792 жыл бұрын
I could solved for Vaadin flow!!. Using a LitTemplate and put the TS code in it. A little work to know how to communicate between Client and Server but once I understood everything worked fine. Thanks for this video
@ricardolegorreta24792 жыл бұрын
Your example worked for me ok. But when I try to upgrade it to hilla 1.0.8 is sends a lot of Typescript errors because the service worker file sw.ts. Any idea what I'm doing wrong?
@vaadinofficial2 жыл бұрын
Hey. Sounds like I need to update the project to Hilla. My guess is that the serviceworker generated by the newer version is different. You might need to copy over a newly generated version from the target folder and move over the push handling code there.
@ricardolegorreta24792 жыл бұрын
@@vaadinofficial Thank's for your answer. I love your example. How can I get the new generates version for sw.ts. How can I get it?
@vaadinofficial2 жыл бұрын
Seems there is an issue with Vite support. Try disabling the vite build in src/main/resources/vaadin-featureflags.properties
@vaadinofficial2 жыл бұрын
I updated the project in GH github.com/marcushellberg/hilla-push-notifications
@ricardolegorreta24792 жыл бұрын
@@vaadinofficial Thank you very much for your answer. I disabled vite and now it´s working!!
@christopherclaus60662 жыл бұрын
Thanks for this great video. I have some trouble with "Opening or focusing the application window on notification click" and using the sw.ts serviceworker script from /target as template. There is an error: ERROR in frontend/sw.ts:36:48 TS2345: Argument of type '(context: RouteHandlerCallbackOptions) => Promise' is not assignable to parameter of type 'RouteHandler'. Type '(context: RouteHandlerCallbackOptions) => Promise' is not assignable to type 'RouteHandlerCallback'. Type 'Promise' is not assignable to type 'Promise'. at line const navigationFallback = new NavigationRoute(async (context: RouteHandlerCallbackOptions) => { const serveResourceFromCache = async () => { I´m using vaadin@22.0.12 with flow. Do you have any tip?
@vaadinofficial2 жыл бұрын
Try updating to 23 and copying over a fresh sw.js as a starting point (target/sw.ts -> frontend/sw.ts)
@christopherclaus60662 жыл бұрын
@@vaadinofficial Unfortunately no change
@romulfobos52195 ай бұрын
Спасибо!
@manuthomas49362 жыл бұрын
Thank you
@ВладимирАпарин-ц5е2 жыл бұрын
it work on mobile browsers?
@marcushellberg132 жыл бұрын
Yes, currently on Android. iOS should be getting support in an upcoming version, they are working on it.
@kimmerj3 жыл бұрын
Can I send it to a specific group of users ?
@vaadinofficial3 жыл бұрын
Each user needs to sign up for notifications on their own. If you store the subscription with the user, you can then send out notifications depending to any group of users you choose
@kimmerj3 жыл бұрын
@@vaadinofficial it seems that my users already subscribed but this error is appearing (failed to load resource : net: : ERR_NAME_NOT_RESOLVED) we have the same public Key . Can you help me ? Thank you!
@loveking92683 жыл бұрын
Thx, couldn't resolve com.vaadin.flow.server.connect.Endpoint; com.vaadin.flow.server.connect.auth.AnonymousAllowed; here is gradle script to import [group: 'com.vaadin', name: 'flow-server', version: '19.0.9']
@vaadinofficial3 жыл бұрын
Those are part of Vaadin Fusion. You can import the whole "vaadin" dependency instead of only flow-server
@loveking92683 жыл бұрын
@@vaadinofficial thank you , now navigator.serviceWorker.getRegistration() is undefined for chrome. i am using jquery