How to subscribe and send Web Push notifications in Java

In this video, Marcus Hellberg shows you how you can send web push notifications from a Java server. The video shows how to subscribe to notifications in the browser, save the subscription on the server, and use the subscription to send a web push notification.

The video uses a SpringBoot and Lit-based Vaadin Fusion project as an example, but you can use the same library in other environments.

0:00 - Intro
2:26 - How web push notifications work
4:12 - Using the Java WebPush library and setting up VAPID keys
5:29 - Storing subscriptions on the server
5:51 - Sending a web push notification from Java
6:28 - Creating an endpoint for communicating with the browser
7:34 - Subscribing to push notifications in the browser
8:44 - Checking to see if a user already has a subscription
9:20 - Requesting permission to show notifications and subscribing to the push server
13:45 - Handling an incoming push notification in the browser ServiceWorker
14:30 - Opening or focusing the application window on notification click
16:10 - Closing remarks

[stucanoe]

Great video. Thanks for taking the time to put this together. Very detailed and to the point

[punithvs]

Thank you for creating such a well defined tutorial.

[ravikumarreddykapa]

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.

[christopherclaus]

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<unknown>' is not assignable to parameter of type 'RouteHandler'.
Type '(context: RouteHandlerCallbackOptions) => Promise<unknown>' is not assignable to type 'RouteHandlerCallback'.
Type 'Promise<unknown>' is not assignable to type 'Promise<Response>'.
at line
const navigationFallback = new NavigationRoute(async (context: RouteHandlerCallbackOptions) => {
const serveResourceFromCache = async () => {

[The_LittleKing]

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?

[fastmotion]

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

[ricardolegorreta]

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?

[leolima]

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?

[oz]

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

[menakar]

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?

[ricardolegorreta]

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?

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

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

[kimmerj]

Can I send it to a specific group of users ?

[loveking]

Thx, couldn't resolve



here is gradle script to import
[group: 'com.vaadin', name: 'flow-server', version: '19.0.9']