Skip to content
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

Add section about browser tabs sleeping #22773

Merged
merged 10 commits into from
Jul 28, 2021
42 changes: 41 additions & 1 deletion aspnetcore/signalr/javascript-client.md
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,47 @@ The following code demonstrates a typical manual reconnection approach:

[!code-javascript[](javascript-client/samples/3.x/SignalRChat/wwwroot/chat.js?range=30-42)]

A real-world implementation would use an exponential back-off or retry a specified number of times before giving up.
Production implementations typically use an exponential back-off or retry a specified number of times.

BrennanConroy marked this conversation as resolved.
Show resolved Hide resolved
<!-- This heading is used by code in the SignalR Typescript client, do not rename or remove without considering the impacts there -->
BrennanConroy marked this conversation as resolved.
Show resolved Hide resolved

<h2 id="bsleep">Browser sleeping tab</h2>
Copy link
Member Author

@BrennanConroy BrennanConroy Jul 28, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Rick-Anderson @guardrex Can you give this a quick final once over and then I'll merge

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I defer to @Rick-Anderson on this. I only use this when I must; and I think with version by file now 🎉, it will only be needed in Blazor docs that use a WASM/Server pivot with duplicate headings.


Some browsers have a tab freezing or sleeping feature to reduce computer resource usage for inactive tabs. This can cause SignalR connections to close and may result in an unwanted user experience. Browsers use heuristics to figure out if a tab should be put to sleep, such as:

* Playing audio
* Holding a web lock
* Holding an `IndexedDB` lock
* Being connected to a USB device
* Capturing video or audio
* Being mirrored
* Capturing a window or display

> [!NOTE]
> These heuristics may change over time or differ between browsers. Check your support matrix and figure out what method works best for your scenarios.

To avoid putting an app to sleep, the app should trigger one of the heuristics that the browser uses.

The following code example shows how to use a [Web Lock](https://developer.mozilla.org/docs/Web/API/Web_Locks_API) to keep a tab awake and avoid an unexpected connection closure.

BrennanConroy marked this conversation as resolved.
Show resolved Hide resolved
```javascript
var lockResolver;
if (navigator && navigator.locks && navigator.locks.request) {
const promise = new Promise((res) => {
lockResolver = res;
});

navigator.locks.request('unique_lock_name', { mode: "shared" }, () => {
return promise;
});
}
```

BrennanConroy marked this conversation as resolved.
Show resolved Hide resolved
For the preceding code example:

* Web Locks are experimental. The conditional check confirms that the browser supports Web Locks.
* The promise resolver (`lockResolver`) is stored so that the lock can be released when it's acceptable for the tab to sleep.
* When closing the connection, the lock is released by calling `lockResolver()`. When the lock is released, the tab is allowed to sleep.

## Additional resources
BrennanConroy marked this conversation as resolved.
Show resolved Hide resolved

Expand Down