Directory

← Back

Browser Notifications for Flow

Browser Notifications for Flow apps

Author

Rating

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:

  1. Add a method to actually ask user for permission to display notifications. ✔️
  2. Add an API to display local notifications. Almost ✔️
  3. Add a method to subscribe the user to push notifications via W3 standard API (https://w3c.github.io/push-api/)
  4. (Huge maybe) Implement Java API to send push messages (from your application server). Consider using https://github.com/web-push-libs/webpush-java
  5. Implement Safari's push notifications
  6. (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;
    }

Compatibility

(Loading compatibility data...)

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

Browser Notifications for Flow - Vaadin Add-on Directory

Browser Notifications for Flow apps Browser Notifications for Flow - Vaadin Add-on Directory
Online