#100 Browser tab title notifications

browser api stimulusjs javascript hotwire server side rendering tab notifications turbo broadcasts

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

Sign in to join the conversation