Support Page Visibility API

[adamchainz]

I wanted to create an element that fetches whenever the tab comes into focus, as detectable with the page visibility API. I tried:

hx-trigger="visibilitychange[visibilityState === 'visible'] from:document"

but this did not seem to work, since document is not a valid CSS selector.

Supporting from:document or similar might be all that's needed to support this API, but it strikes me as something that htmx could abstract a little.

It could be useful to have virtual events for "tab became visible" and "tab became hidden". Then the repetitive filter [visibilityState === 'visible'] could be avoided, and the events could work when allowEval is false.

Also there could be event modifiers for tab visible / tab hidden, so we could specify "poll only while the tab is visible". Polling only while visible would even make a sensible default...

[1cg]

seems like a great idea to me

could be a simple as adding a special case for document here:

htmx/src/htmx.js

Line 292 in c7bde5a

function find(eltOrSelector, selector) {

are you interested in making this change? I can show you how to write tests, etc. for it...

[1cg]

I just added syntax for filtering polls:

40ed7b0

And it looks like the Document.hidden API could be used for this:

https://developer.mozilla.org/en-US/docs/Web/API/Document/hidden

With that, can I close this?

[adamchainz]

That doesn't quite allow making a request as soon as the tab gains focus, which would be useful for infrequently polled items.

Maybe the best solution is a little JS to fire custom events?

[1cg]

OK, I set it up so you can listen from:document now, so you can listen for the visibilitychange event on it, that seems like it would let you specify pretty much what you want

bbf2ae4

[adamchainz]

I can confirm this is working now in 1.5.0, with the syntax: hx-trigger="visibilitychange[document.visibilityState === 'visible'] from:document" 🥳

[jedie]

This this should be added as a example in the docs, isn'it ?

EDIT: In the end i make this:

hx-trigger="every 2s [document.visibilityState === 'visible'], visibilitychange[document.visibilityState === 'visible'] from:document"

See: #821

But i think it's should be easier to setup this, isn't it? Think i will open a new issues for this.

EDIT2: #824