Add WebSocket Connection best practices note to handle BFCache support #40188
+6
−0
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hi, I would like to suggest adding a note to help developers using the WebSocket API correctly to avoid negative UX side effects on sites.
Motivation
After having analyzed most of the WebSocket API usage on the Web via HTTP Archive I've found out that 99% of the WebSocket API usage is causing BFCache ineligibility on some modern browsers such as Chrome/Chromium based ones.
More info about BFCache and why Connections should be handled this way here: https://web.dev/articles/bfcache#close-open-connections
Description
In a nutshell I wasn't able to find developers following these best practices when using WebSocket connections:
close WebSocket connections via pagehide to make the page eligible for BFCache.
restart WebSocket connection via pagehide (event.persisted=true case) when the page is restored from BFCache in order to restart the WebSocket connection to resume functionality.
I would appreciate MDN folks advice and suggestions about how we can all help developers better using this widely used API (approximately 600k Sites are using WebSocket so the impact on UX is quite big).
Additional details
https://web.dev/articles/bfcache#close-open-connections
Related to Issue #700
I am not a technical writer, I would appreciate some support to make it clear if anyone is also supportive to include this note in the WebSocket API MDN article.
Thanks
Gilberto