feat: skip pinging the server when the tab is not shown

[sapphi-red]

Description

This PR makes @vite/client to skip pinging the server when the tab is not shown.
By doing this, we can reduce non-necessary pings (#5228) and thus reduce the logs output in browser console (#12693).

close #5228
close #12693
similar to #6791

Additional context

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines and follow the PR Title Convention.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[bluwy]

Nice! I like this change. Looks like we still support safari14, which visibilitychange event is only supported since 14.1, but the worst case is that the visibilitychange wait promise never resolves, and I don't think it's a big problem.

[sapphi-red]

Oh, I didn't notice that. It seems Safari 14.0 supports visibilitychange event partially. Safari 14.0 doesn't fire the event when navigating away. But that's fine for this usecase.
https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event#browser_compatibility

[patak-dev]

This will register a new event handler for visibilitychange every second while the visibility doesn't change (then resolve all of them at the same time. I think it would be good to create a single waitForWindowShow promise and use it here until it resolves.

[sapphi-red]

Good catch! I fixed this 👍

[bluwy]

I didn't notice this too, I thought it would wait for window show altogether before continuing the while loop, maybe we could so a simple await waitForWindowShow() here?

[sapphi-red]

Ah, you're right. I don't know why I wrote it like this 😅

[sapphi-red]

/ecosystem-ci run

[vite-ecosystem-ci]

📝 Ran ecosystem CI: Open

suite	result
astro	✅ success
histoire	❌ failure
iles	✅ success
ladle	✅ success
laravel	✅ success
marko	✅ success
nuxt	❌ failure
previewjs	❌ failure
qwik	✅ success
rakkas	✅ success
sveltekit	✅ success
vite-plugin-ssr	❌ failure
vite-plugin-react	✅ success
vite-plugin-react-pages	✅ success
vite-plugin-react-swc	✅ success
vite-plugin-svelte	❌ failure
vite-plugin-vue	✅ success
vite-setup-catalogue	✅ success
vitepress	✅ success
vitest	✅ success
windicss	✅ success