Stimulus - Inter-Tab Communication

Premise

This week’s challenge is part Stimulus exercise, part exploration of a more exotic, but actually quite established browser API - the Broadcast Channel API. It’s an excellent choice for sending low-importance notifications from one browser tab or window to another without having to resort to Websockets. We’ll look at updating some input elements and sending a toast message from one tab to the other.

Here’s a sneak peek:

Challenge

Today’s example is a family chore manager: Chores can be assigned to a family member, and set to done. For your convenience, the markup is already laid here:

Conceive a Stimulus controller to notify other browser tabs of changes:

• Show a toast when an assignment changes or a task is marked done
• Change the button’s state in the other browser tab if marked done in this one

Hints:

• Use one BroadcastChannel for assignments and one for marking tasks done
• Use the <template> provided in the HTML to clone and insert a toast. Look at the shoelace guide.

Caveats

Note that this API is strictly for inter-tab/-window communication on the same machine.

Teaser

How could the managing of done be made more declarative?