Sending Desktop Notifications from Nicegui

Nicegui has their own notification concept where I can send notifications into the web page. This is interesting and helpful, but my Pomodoro app is a use case where this is not enough: I want to start my timer, then jump to some other tab in my browser; the Pomodoro timer is still running but not visible any more.

Additionally, I find the built-in notifications are not very visible; they might be overlooked easily if I am not directly waiting for them. So I needed another solution.

Thankfully, all big browsers (or at least, I tested with Firefox and some Chromium-based ones), support the concept of Desktop notifications that I can send and that will appear outside of the browser. I just had to find out how.

Setup: Ask if I am allowed to send notifications

Before sending notifications, you have to ask your browser if you are allowed to do so. This is not too hard:

if (Notification.permission !== "granted") {
    Notification.requestPermission();
}

You need to execute this code when loading your web page. In Nicegui, I did the following:

ui.add_body_html("""
    <script>
        window.onload = function() {
            if (Notification.permission !== "granted")
                Notification.requestPermission();
        }
    </script>
""")

Depending on your browser, this might have to be done only once or every time you re-open the browser… Just add this code snippet to your page and you are fine.

Sending a notification

In a basic concept, this is even simpler:

ui.run_javascript('new Notification("Some title", "Hello world")')

That’s all!