Ruby on Rails #100 Browser tab title notifications
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 accessingnotifications#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
Comments
Featured in playlist:
Recommended based on what you are watching now:

Ruby on Rails #108 How to use the Browser Geolocation API with Rails

Rails 7 #121 Turbo Broadcasts CRUD Demystified

Rails 7 E109 Live vistor count. ActionCable, Turbo Broadcasts, Kredis

Ruby on Rails #145 StimulusJS Hotkeys without any external libraries. It just works!
