How to set up web push notifications in Vaadin Flow

Docs
1

This topic is the discussion thread for the Vaadin documentation page How to set up web push notifications in Vaadin Flow.

Questions, feedback, and comments are welcome here.

2

can somebody provide the proper dependencies please?

3

Andres, thanks for asking! What dependency you have issues with? `com.vaadin:flow-webpush` is a valid name. Could you give an error message if the problem is still present on your side?

4

I've updated versions in CRM tutorial https://github.com/vaadin/flow-crm-tutorial/tree/feature/webpush and main branch here in this starter https://github.com/vaadin/base-starter-flow-webpush.

5

Awesome! Works perfectly

6

We're using this functionality and are happy with it.


At the moment only title and body are supported in the notification for the service worker.

We want however to be able to supply an image and or URL.

Is it therefore possibly to enhance/extend the WebPushMessage() to include all options that are possible for webpush notifications?

7

Created an enhancement ticket: https://github.com/vaadin/flow/issues/20285


8

Please follow this pull request and leave a comment, if you have any suggestions about API.

9

HI Mikhail,

Very happy you took this on as feature request.

Can you indicate when this feature will be available and in what release? We're still on 24.4.x.


Many thanks.

Patrick


10

Hi Patrick,

It will be included into Vaadin 24.6 release, which is planned for December this year (GA) and for November in Beta. Please follow 24.6 alpha and beta releases https://github.com/vaadin/platform/releases to test it and give us a feedback.

Thanks.

11

\u0000

The Safari web browser needs the web push notification features enabled. To do this, go to Settings \u203A Safari \u203A Advanced \u203A Experimental Features. There you can enable Notifications and Push API.

The quote is on "iOS" section. I can’t find such setting, but it also says above that the app needs to be installed for them to work (which from my experience is everything that is needed) \uD83E\uDD14 I wonder if this is (outdated) info related to desktop Safari?