Add basic support for notifications to web app (closes #29)

luca0N commented

2025-12-23 23:42:33 +00:00

Owner

Add basic support for notifications to the web client. When a host is
detected while the web page is not focused, the number of unread
notifications increments. The number of unread notifications is
displayed in the host list page title (if any) when the page is not in
focus. The number of unread notifications is reset when the user
focuses on the page once again, removing the counter from the page
title.

Display unread in-app notifications in the host list page title
Play sound effect
Add option to disable in-app notifications
- Have the in-app notification toggle actually have an impact in the UX

Add basic support for notifications to the web client. When a host is detected while the web page is not focused, the number of unread notifications increments. The number of unread notifications is displayed in the host list page title (if any) when the page is not in focus. The number of unread notifications is reset when the user focuses on the page once again, removing the counter from the page title. - [x] Display unread in-app notifications in the host list page title - [x] Play sound effect - [x] Add option to disable in-app notifications - [x] Have the in-app notification toggle actually have an impact in the UX

luca0N added the

Priority

Low

Kind/Feature

labels

2025-12-23 23:42:33 +00:00

luca0N self-assigned this

2025-12-23 23:42:33 +00:00

luca0N added 1 commit

2025-12-23 23:42:33 +00:00

Add basic support for notifications to web app 96a2878fd0

Add basic support for notifications to the web client.  When a host is
detected while the web page is not focused, the number of unread
notifications increments.  The number of unread notifications is
displayed in the host list page title (if any) when the page is not in
focus.  The number of unread notifications is reset when the user
focuses on the page once again, removing the counter from the page
title.

luca0N added this to the v1.0.0 project

2025-12-23 23:42:34 +00:00

luca0N commented

2025-12-23 23:44:43 +00:00

Author

Owner

At this time, there are no options to configure or disable the in-app notifications (as mentioned in the linked issue). If sounds are implemented in the future, the end-user may disable them in their user-agent by disabling the permission to play sounds and music, but the page title still changes, which may be undesirable by some users.

luca0N added 1 commit

2025-12-24 10:40:24 +00:00

Play web app in-app notification sound effect 89addd2325

Add support for playing a sound effect on in-app notifications using
HTMLAudioElement, and create a function for notifying.  This requires
permission from the user-agent.  The sound effect used is taken from the
obsolete `luca0N/Forca` repository.

luca0N added spent time

2025-12-25 23:45:24 +00:00

20 minutes

luca0N commented

2025-12-25 23:46:03 +00:00

Author

Owner

The option to disable in-app notifications can be implemented as a checkbox in a preferences dialog.

luca0N added 1 commit

2025-12-30 22:24:04 +00:00

Add app preferences alert 47e0d04f00

Create a new alert for displaying app preferences, and create the
PreferencesManager class.

The PreferencesManager class acts as a very simple interface to the
localStorage API.

At this time, the only preference that's available to be changed is the
option to toggle in-app notifications.  A future commit will create a
button that will display this preference alert, when pressed.

luca0N commented

2025-12-30 22:27:25 +00:00

Author

Owner

I've noticed a bug while testing under Chromium (Brave, to be specific):

In-app notifications are not being displayed at all. However, when notify() is called, the expected behavior occurs. I believe this might be due to Brave not actually calling the blur event on document, perhaps due to a security/privacy preference. I've tried disabling Brave's Shields on the webpage, but to no avail.

I've noticed a bug while testing under Chromium (Brave, to be specific): In-app notifications are not being displayed at all. However, when [`notify()`](https://git.luca0n.com/luca0N/lanbassador/src/commit/47e0d04f00a20d6080d0383789bf4259a056aa84/client/src/app/host-list.ts#L195) is called, the expected behavior occurs. I believe this might be due to Brave not actually [calling the `blur` event on `document`](https://git.luca0n.com/luca0N/lanbassador/src/commit/47e0d04f00a20d6080d0383789bf4259a056aa84/client/src/app/host-list.ts#L212), perhaps due to a security/privacy preference. I've tried disabling Brave's Shields on the webpage, but to no avail.

luca0N changed title from ~~Add basic support for notifications to web app (closes #29)~~ to WIP: Add basic support for notifications to web app (closes #29)

2025-12-30 22:27:30 +00:00

luca0N commented

2025-12-30 22:30:31 +00:00

Author

Owner

Firefox seems to have autoplay disabled by default, which causes the in-app notification not to play (unless the autoplay permission is manually granted by the user). Brave (Chromium), on the other hand, autoplays without the need of manually granting an equivalent permission.

I don't believe there's a way around this, unless if there's a way to request the autoplay permission on Firefox, but I don't believe that would be necessary because Firefox already displays an autoplay button that lets the user control this.

Regardless, it would be a good idea to write about this in the documentation.

Firefox seems to have autoplay disabled by default, which causes the in-app notification not to play (unless the autoplay permission is manually granted by the user). Brave (Chromium), on the other hand, autoplays without the need of manually granting an equivalent permission. I don't believe there's a way around this, unless if there's a way to request the autoplay permission on Firefox, but I don't believe that would be necessary because Firefox already displays an autoplay button that lets the user control this. Regardless, it would be a good idea to write about this in the documentation.

luca0N commented

2025-12-31 20:22:55 +00:00

Author

Owner

@luca0N wrote in #33 (comment):

Firefox seems to have autoplay disabled by default, which causes the in-app notification not to play (unless the autoplay permission is manually granted by the user). Brave (Chromium), on the other hand, autoplays without the need of manually granting an equivalent permission.

I don't believe there's a way around this, unless if there's a way to request the autoplay permission on Firefox, but I don't believe that would be necessary because Firefox already displays an autoplay button that lets the user control this.

Regardless, it would be a good idea to write about this in the documentation.

During my troubleshooting, I found out that Firefox calls the focus and blur events on both window and document, and Brave called it only on window. Since those events in Firefox are simultaneously called on both window and document, I will just replace where focus and blur are being listened and it should now work in both Firefox and Chromium.

@luca0N wrote in https://git.luca0n.com/luca0N/lanbassador/pulls/33#issuecomment-1165: > Firefox seems to have autoplay disabled by default, which causes the in-app notification not to play (unless the autoplay permission is manually granted by the user). Brave (Chromium), on the other hand, autoplays without the need of manually granting an equivalent permission. > > I don't believe there's a way around this, unless if there's a way to request the autoplay permission on Firefox, but I don't believe that would be necessary because Firefox already displays an autoplay button that lets the user control this. > > Regardless, it would be a good idea to write about this in the documentation. During my troubleshooting, I found out that Firefox calls the `focus` and `blur` events on both `window` and `document`, and Brave called it _only_ on `window`. Since those events in Firefox are simultaneously called on both `window` and `document`, I will just replace where [`focus`](https://git.luca0n.com/luca0N/lanbassador/src/commit/47e0d04f00a20d6080d0383789bf4259a056aa84/client/src/app/host-list.ts#L207) and [`blur`](https://git.luca0n.com/luca0N/lanbassador/src/commit/47e0d04f00a20d6080d0383789bf4259a056aa84/client/src/app/host-list.ts#L212) are being listened and it should now work in both Firefox and Chromium.

luca0N deleted spent time

2025-12-31 20:23:27 +00:00

- 20 minutes

luca0N added 3 commits

2025-12-31 21:17:07 +00:00

Add app preferences button to toolbar 82993f247d

In the app toolbar, add a preferences button that opens the app
preferences dialog, and update the messages files accordingly.

Check notifications preference before notifying 68bac38222

Add support for the PreferencesManager class in `host-list.ts', so that
it checks whether the user has in-app notifications enabled, before it
displays notifications.

Add in-app notifications fix for some user-agents 4ae4d7b122

Fix the in-app notification support for some user-agents.  During
testing, Brave, in particular, did not call the `focus' and `blur'
events in `document'.  The changes in this commit introduce changes so
that these events are listened for in `window' instead, which works with
both Firefox and Brave.

luca0N changed title from ~~WIP: Add basic support for notifications to web app (closes #29)~~ to Add basic support for notifications to web app (closes #29)

2025-12-31 21:17:29 +00:00

luca0N commented

2025-12-31 21:18:36 +00:00

Author

Owner

Since the goal of this pull request was to add basic in-app notifications support, this has already been achieved and this pull request may now be merged. In the future, however, I think it'd be a good idea to make use of the Notifications API¹.

https://developer.mozilla.org/en-US/docs/Web/API/Notification ↩︎

Since the goal of this pull request was to add basic in-app notifications support, this has already been achieved and this pull request may now be merged. In the future, however, I think it'd be a good idea to make use of the Notifications API[^1]. [^1]: https://developer.mozilla.org/en-US/docs/Web/API/Notification

luca0N merged commit a7bc70a586 into dev

2025-12-31 21:18:42 +00:00

luca0N deleted branch dev_client_notifications

2025-12-31 21:18:42 +00:00

luca0N referenced this pull request from a commit

2025-12-31 21:18:44 +00:00

Merge pull request 'Add basic support for notifications to web app (closes #29)' (#33) from dev_client_notifications into dev

Rows
Columns

Add basic support for notifications to web app (closes #29) #33