# #100 Browser tab title notifications

- URL: https://superails.com/posts/ruby-on-rails-100-browser-tab-title-notifications
- Published: 2022-12-27
- Duration: 16:43
- Access: free
- Topics: stimulusjs, server side rendering, javascript, browser api, tab notifications, turbo broadcasts, hotwire
- Playlists: Just enough Hotwire for Rails developers

Do you like see the "new notifications count" in the LinkedIn browser tab?
In this episode we will update the browser tab title, if the application user has new unsee notifications.
We will use StimulusJS to add a blinking effect.
We will use Turbo Stream Broadcasts to update the notifications count in all browser tabs.
We will also add an "undead" symbol to the application thumbnail.

In the context of StimulusJS, we will leverage setInterval and usage of disconnect().

Improvements you can do yourself:
- Scope notifications per user
- Mark notifications as "seen" when accessing "notifications#show" page/controller
- Broadcast notifications count when notification is deleted or seen

Episode source code: https://github.com/corsego/100-browser-tab-notifications/commit/bc5b318dfa8986b36f50fbd1dda1be6c5c4e1069

Text version: https://blog.corsego.com/browser-tab-title-notifications

0:00 Feature request
0:19 What we will build
1:02 Initial setup
1:35 conditional thumbnails
4:20 conditional notifications count
5:05 StimulusJS - blinking page title
10:40 Broadcast update thumbnail (no page refresh)
15:52 Summary

## Chapters

- 0:00 Feature request
- 0:19 What we will build
- 1:02 Initial setup
- 1:35 conditional thumbnails
- 4:20 conditional notifications count
- 5:05 StimulusJS - blinking page title
- 10:40 Broadcast update thumbnail (no page refresh)
- 15:52 Summary