As we are bringing in new feature in our existing chat web application which is read receipts, we have implemented the necessary changes. Below point are simple flow of how read receipts works in out chat app.
- We observe visibility of each message using IntersectionObserver.
- Collect all the message ids which are read by the user.
- Make an api call to server to store information and everyone in the chat gets update via pusher webscoket connection.
The main problem we faced while implementing read receipts is the visibility change of browser tab. We listen to visibilitychange event, which is not accurate in most of the times such as, if the application is visible or not, if the window focus is lost for another window, but not the actual visibility on the screen? what about different kinds of visibility lost, like ALT+TAB, WIN/MAC key (start menu / dash), taskbar/dock actions, WIN+L (lock screen), window minimize, window close, tab switching. What about the behaviour on mobile devices?
So I did some google and found a workaround to address this persisting issue Here
Now comes a question, How efficient this solution would be ? How it will affect the performance of my web application ?. Hence I thought of debugging Microsoft teams web applications to see how read receipts is implemented. I tried to see dev-tools, unfortunately nothing worked out for me in order to understand how teams implemented this feature. I looked in to api calls, websokcet even service worker. I hit nowhere. So I now come here to ask how read receipts is implemented by teams web app ?
Tech Stack;
- ReactJs
- Redux
- Pusher for websocket.