PWA - Push Notification, Service Worker Example

Flow
1

Hello,

I am looking for an example application where I can see[ Progressive Web Apps]
(https://vaadin.com/progressive-web-applications) properties(Push Notification, Working in offline). I looked at the example application the [Vaadin Flow Bakery ]
(https://bakery-flow-spring.app.fi/login) but I did not see those features there.

Does anyone know any example and if not would you suggest me any good approach?

Thanks

2

Hi,

I was looking for exactly the same, an example how to program a PWA using Vaadin 10.
I’ll soon need to develop an app with this capability.

Thanks

3

We are working on tutorials and on adding basic PWA support to our starters. In the meantime, you can register a ServiceWorker through JavaScript. The contents of the ServieWorker itself are not dependent on Vaadin, so you can for instance look at this Google tutorial for adding Push message support: https://developers.google.com/web/fundamentals/codelabs/push-notifications/

Please bear in mind to only trigger the push notification prompt when a user expects it - for instance when they click on a “subscribe to notifications” button in the UI. Showing the prompt immediately on page load can easily lead to poor conversions and unhappy users.

4

Hi Marcus, what is the current state of PWA Push Notifications support in Vaadin? The documentation doesn’t mention anything which leads me to believe it’s basically “do it yourself”.

However, if it’s really a “do it yourself”, is it even possible to achieve? Vaadin will register its own service worker when @PWA is used, which is pretty much a static script. Right, but you can modify the script according to this tutorial: https://vaadin.com/docs/flow/pwa/tutorial-pwa-service-worker.html .

So the only solution is to introduce my own sw.js script which listens for push notifications and notifies the rest of the client-side about them.

5

Unfortunately, it’s all DIY right now.

Currently the best way to do it would be to copy the autogenerated sw.js, add your own push handling there and then use a library like https://github.com/web-push-libs/webpush-java on the server to do the actual push.

6

would it be possible to provide a small example for vaadin 19 ?