feat: use BroadcastChannel to synchronize messages across multiple tabs

[CR4ZED]

Fixes #1443

Changes

• Replaced window.opener.postMessage with BroadcastChannel for better tab synchronization.
• Improved support for scenarios where new tabs are opened with cmd+click or target=_blank, ensuring messages are correctly posted to all tabs.

Events

Did you introduce any new tracking events? No

Experiment

Did you introduce any new experiments?

No

Manual Testing

[!CAUTION] Please make sure existing components are not breaking/affected by this PR

[vercel[bot]]

@CR4ZED is attempting to deploy a commit to the Daily Dev Team on Vercel.

A member of the Team first needs to authorize it.

[CLAassistant]

All committers have signed the CLA.

[CR4ZED]

We really appreciate the initiative. Especially ones that apply good practices. However, this is a sensitive part of the application, we haven't done our own research on this end yet. Quite not sure also when we'd also do due to our priorities. Unless the team are certain with things would still behave as intended, we can't merge this yet. Amazing PR nonetheless 🙏

Thank you for your feedback! I understand this part is sensitive. If you need any help or more information from me, just let me know 🙂

[sshanzel]

We really appreciate the initiative. Especially ones that apply good practices. However, this is a sensitive part of the application, we haven't done our own research on this end yet. Quite not sure also when we'd also do due to our priorities. Unless the team are certain with things would still behave as intended, we can't merge this yet. Amazing PR nonetheless 🙏

Thank you for your feedback! I understand this part is sensitive. If you need any help or more information from me, just let me know 🙂

I don't want to take so much of your time, but if you feel like it, feel free to drop some resources! ❤️

[CR4ZED]

We really appreciate the initiative. Especially ones that apply good practices. However, this is a sensitive part of the application, we haven't done our own research on this end yet. Quite not sure also when we'd also do due to our priorities. Unless the team are certain with things would still behave as intended, we can't merge this yet. Amazing PR nonetheless 🙏

Thank you for your feedback! I understand this part is sensitive. If you need any help or more information from me, just let me know 🙂

I don't want to take so much of your time, but if you feel like it, feel free to drop some resources! ❤️

While debugging the issue, I found that when we call postWindowMessage, it uses window.opener?.postMessage, and I noticed that almost all the links opened had window.opener as null. To keep the tabs in sync, I looked for a solution and discovered the Broadcast Channel API (MDN Documentation). Initially, I planned to use it only for the login event, but as I explored the codebase, I found several other events emitted via window.opener?.postMessage, so I replaced those with the Broadcast Channel API as well.

However, I couldn’t run the app locally to test these changes because it throws this error when I try to start it:

It looks like the client-side is trying to connect to localhost:5000 instead of the Gitpod URL

[sshanzel]

Keeping it draft for now until we get more chance to test this further 🙏

[sshanzel]

Hi @CR4ZED, after careful evaluation, we have realized some missed ends and how critical the changes could be. With that, we really appreciate the effort, but we've decided not to move forward with this one.

Feel free to check our issues page with help-wanted label 🙏

[CR4ZED]

Hi @CR4ZED, after careful evaluation, we have realized some missed ends and how critical the changes could be. With that, we really appreciate the effort, but we've decided not to move forward with this one.

Feel free to check our issues page with help-wanted label 🙏

No worries, thanks for the feedback! I'll check out the help-wanted issues and see where I can help. Thanks!

[SimonRiemertzon]

Nice seeing this development and back and forth. I was the one originally reporting the bug:

https://github.com/dailydotdev/daily/issues/1443#issuecomment-2381342600

I hope you get back to this at some point, because it feels to me that these kind of issues, when user experience is directly affected, are directly translated into potential revenue loss. To speculate a bit, the issues with login might also pose a security risk. Aaaaaand might become larger the longer you wait, which will increase the cost that it will take to rectify at a later date when more code has been tied to faulty login issues.

But I do realize that Im not sitting where you are sitting and have no insight whatsoever in what your priorities lies or in web development as a whole. So I wish you luck and hope this doesn't bite you in the 🍑 in the future. 😉

Thank you for providing a great service.

P.S ...and thank you @CR4ZED for picking this up! This was my first real experience with open source and I liked the way you handled it 🤩

[sshanzel]

@CR4ZED we looked deeper into using the BroadcastChannel API - while we love using modern APIs as they tend to be more reliable and future-proof, the API won't be able to work with our system's setup for testing/preview deployments (due to cross-origin sending of messages). Those deployments are very important for us to ensure things are working as intended. We appreciate the effort you've put into this and that led us to look deeper into it as well.