How to subscribe and send Web Push notifications in Java

[@stucanoe]

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.

[@pkovelan5]

Thanks for this great resource

[@anujchaturvedi6296]

Thank You!

[@AldenAranjo]

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.

[@leolima8585]

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

[@oz9410]

Can I use this library also for React ? When yes, how do I pass the "Create Endpoint.." part?

[@vaadinofficial]

Yes. If you use React, you would probably use a REST endpoint of some kind instead.

[@ВладимирАпарин-ц5е]

If you run this app from fat jar, not any problems with bouncy castle provider?

[@vaadinofficial]

Running the fat jar works for me. What issues are you seeing?

[@ВладимирАпарин-ц5е]

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

[@fastmotion2049]

Thanks for that awesome video! Can i build this with java only or do i need to use typescript for the client side part?

[@vaadinofficial]

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.

[@fastmotion2049]

@@vaadinofficial sounds good :) for now ill just use TS

[@AldenAranjo]

@@vaadinofficial Vaadin flow please

[@ricardolegorreta2479]

@@AldenAranjo Any news to use this excellent example with Vaadin Flow?

[@ricardolegorreta2479]

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

[@ricardolegorreta2479]

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?

[@vaadinofficial]

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.

[@ricardolegorreta2479]

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

[@vaadinofficial]

Seems there is an issue with Vite support. Try disabling the vite build in src/main/resources/vaadin-featureflags.properties

[@vaadinofficial]

I updated the project in GH github.com/marcushellberg/hilla-push-notifications

[@ricardolegorreta2479]

@@vaadinofficial Thank you very much for your answer. I disabled vite and now it´s working!!

[@christopherclaus6066]

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?

[@vaadinofficial]

Try updating to 23 and copying over a fresh sw.js as a starting point (target/sw.ts -> frontend/sw.ts)

[@christopherclaus6066]

@@vaadinofficial Unfortunately no change

[@romulfobos5219]

Спасибо!

[@manuthomas4936]

Thank you

[@ВладимирАпарин-ц5е]

it work on mobile browsers?

[@marcushellberg13]

Yes, currently on Android. iOS should be getting support in an upcoming version, they are working on it.

[@kimmerj]

Can I send it to a specific group of users ?

[@vaadinofficial]

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

[@kimmerj]

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

[@loveking9268]

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

[@vaadinofficial]

Those are part of Vaadin Fusion. You can import the whole "vaadin" dependency instead of only flow-server

[@loveking9268]

@@vaadinofficial thank you , now navigator.serviceWorker.getRegistration() is undefined for chrome. i am using jquery