Browser Notifications for Flow

Browser Notifications for Flow apps

View larger

Close

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;
    }

Links

• Source code
• Forum thread

Compatibility