#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
0
Featured in playlists
![#59 Hotwire Turbo Streams CRUD](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc4MiwicHVyIjoiYmxvYl9pZCJ9fQ==--7b4b94ff669cbcd3485cfcc3f72e9100df7eae48/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#60 Hotwire Turbo Streams Autocomplete Search](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTc1MywicHVyIjoiYmxvYl9pZCJ9fQ==--c95f098cc49b4d72ecb027c13735c1bedf44cb78/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)
![#63 Hotwire Modals (the right way)](https://superails.com/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsiZGF0YSI6MTg2MywicHVyIjoiYmxvYl9pZCJ9fQ==--29f62b39b302aa16a6e6c28453e036aaa724add0/eyJfcmFpbHMiOnsiZGF0YSI6eyJmb3JtYXQiOiJqcGciLCJyZXNpemVfdG9fbGltaXQiOls0MDAsNjAwXX0sInB1ciI6InZhcmlhdGlvbiJ9fQ==--2d7cd3a4d9675c7f4c17dad7856d799792bd3595/maxresdefault.jpg)