Browser Notifications for Flow
Browser Notifications for Flow apps
This addons allows using Notification API in Flow app, both local and push (via Service Workers).
Why would you want to use (push) notifications in your Vaadin application? Let's say that your application does some long, long processing, in the order of tens of minutes. In that case you don't want to block the UI. Instead you want to do the processing in the background (maybe even on a different machine) and when it's done let the user know that the wait is over and maybe even give them an option to go to the results of processing, decide what to do next etc. You could for example send an email. Or you could also push a notification. With push notification your app doesn't even need to be open in the browser. On a mobile device you will get a notification that will look the same as notification from a native mobile app.
Currently the add-on only allows querying for support of the API in the browser and checking whether user allowed displaying notifications from the origin of the application. The roadmap is following:
- Add a method to actually ask user for permission to display notifications. ✔️
- Add an API to display local notifications. Almost ✔️
- Add a method to subscribe the user to push notifications via W3 standard API (https://w3c.github.io/push-api/)
- (Huge maybe) Implement Java API to send push messages (from your application server). Consider using https://github.com/web-push-libs/webpush-java
- Implement Safari's push notifications
- (Huge maybe) Implement Java API to send push messages to Safari users.
Beware that if you intend to use the addon on any host other than localhost you will need to serve your webapp over HTTPS
Sample code
init() { … notifications = BrowserNotifications.extend(ui); notifications.queryIfSupported().thenAccept(this::acceptSupportState) .thenCompose(aVoid -> notifications.queryPermissionLevel()) .thenCompose(this::acceptPermissionLevel) .thenCompose(event -> notifications.askForPermission()) .thenAccept(this::conditionallyShowNotifierButton); } private CompletableFuture<ClickEvent<Button>> acceptPermissionLevel( BrowserNotifications.PermissionLevel permissionLevel) { CompletableFuture<ClickEvent<Button>> clickPromise = new CompletableFuture<>(); add(new Span("Permission level is now: " + permissionLevel.name())); if (permissionLevel == BrowserNotifications.PermissionLevel.DEFAULT || permissionLevel == BrowserNotifications.PermissionLevel.GRANTED) { add(new Button("Click here to receive notificiations from this website", (ComponentEventListener<ClickEvent<Button>>) event -> clickPromise .complete(event))); } return clickPromise; } private void acceptSupportState(Boolean isSupported) { add(new Span(isSupported ? "Notifications are supported in this browser" : "Notifications are not supported in this browser…")); } private void conditionallyShowNotifierButton( BrowserNotifications.PermissionLevel permissionLevel) { if (permissionLevel == BrowserNotifications.PermissionLevel.GRANTED) { Button button = new Button("Click here to be notified immediately", (ComponentEventListener<ClickEvent<Button>>) event -> { notifications.showNotification("You're now being notified."); System.out.println("Sending notification"); }); add(button); } else { add(new Span("Unfortunately, user agent doesn't allow notifications")); } return; }
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
- Released
- 2018-07-18
- Maturity
- EXPERIMENTAL
- License
- GNU Affero General Public License v3.0
Compatibility
- Framework
- Vaadin 10+
- Browser
- Firefox
- Safari
- Google Chrome
- Android Browser
- Internet Explorer
- Microsoft Edge