haishanh / yacd

Yet Another Clash Dashboard
http://yacd.haishan.me
MIT License
4.16k stars 736 forks source link

Fix: Handle tab page freeze events properly #775

Closed xWTF closed 1 year ago

xWTF commented 1 year ago

Problem

Modern web browsers comes with "memory-saving" features such as Edge Sleeping tabs, to suspend tabs when not in use. However, the WebSocket connection is preserved during page sleep. Edge caches the incoming messages from clash, but won't process them until the page is resumed. If you leave the tab sleeping for a day or longer, there will be tons of messages to process on resume, and you can see yacd takes forever to process them (for example, the traffic graph keeps updating like crazy), which requires a hard reload to fix.

Solution

Since we have Page Lifecycle API and freeze / resume events, we can disconnect the WebSocket when page is suspended, and reconnect it when the page is resumed. This makes perfect sense since we won't need any data update from clash when the yacd tab is hidden for a long time (in my setup it's 1 hour), and we can always see the latest data on page resumption.

This PR also clears the traffic graph on resumption, to make sure the graph presents the latest data.

Note

To test this PR, you may navigate to chrome://discards/ and click the [Sleep] link to put tabs into sleep, which greatly simplifies the debugging process. DevTools will prevent the page from sleeping, the only debugging method I've found is to use console.log ¯\_(ツ)_/¯.

vercel[bot] commented 1 year ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
yacd ✅ Ready (Inspect) Visit Preview 💬 Add feedback May 25, 2023 1:59am
haishanh commented 1 year ago

TIL!, thanks for the fix!