Skip to content

Add WebSocket Connection best practices note to handle BFCache support #40188

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from

Conversation

gilbertococchi
Copy link

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:

  1. close WebSocket connections via pagehide to make the page eligible for BFCache.

  2. 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

…tics

I wanted to suggest adding a note to help developers using the WebSocket API correctly to avoid negative UX side effecfts.


After having analyzed most of the WebSocket API usage on the Web via HTTP Archive and having found that 99% of the WebSocket API usage is causing BFCache ineligibility on some modern browsers such as Chrome/Chromium based ones.
@gilbertococchi gilbertococchi requested a review from a team as a code owner July 3, 2025 12:27
@gilbertococchi gilbertococchi requested review from wbamberg and removed request for a team July 3, 2025 12:27
@github-actions github-actions bot added Content:WebAPI Web API docs size/s [PR only] 6-50 LoC changed labels Jul 3, 2025
gilbertococchi and others added 3 commits July 3, 2025 14:57
fix typo

Co-authored-by: Barry Pollard <barrypollard@google.com>
Co-authored-by: Barry Pollard <barrypollard@google.com>
improve wording

Co-authored-by: Barry Pollard <barrypollard@google.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
@gilbertococchi gilbertococchi changed the title [First Draft] Add WebSocket Connection best practices note to handle BFCache support Add WebSocket Connection best practices note to handle BFCache support Jul 8, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:WebAPI Web API docs size/s [PR only] 6-50 LoC changed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants