Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a cross browser event for activate in the browser?

Is there a cross browser event that can be used to show a message to the user returning to their web page?

For example, a user has ten applications or tabs open. They get a new notification from our app and I show a notification box. When they switch to our tab I want to begin our notification animation.

The activate event is common on desktop applications but so far, on the window, document and body, neither the "activate" or "DOMActivate" do anything when swapping between applications or tabs but the "focus" and "blur" do. This event works but the naming is different and the events that should be doing this are not.

So is the right event to use cross browser or is there another event?

You can test by adding this in the console or page and then swapping between applications or tabs:

window.addEventListener("focus", function(e) {console.log("focused at " + performance.now()) } ) 
window.addEventListener("blur", function(e) {console.log("blurred at " + performance.now()) } )

Update:
In the link to the possible duplicate is a link to the W3 Page Visibility doc here.

It says to use the visibilitychange event to check when the page is visible or hidden like so:

document.addEventListener('visibilitychange', handleVisibilityChange, false);

But there are issues:

The Document of the top level browsing context can be in one of the following visibility states:

hidden The Document is not visible at all on any screen. visible The Document is at least partially visible on at least one screen. This is the same condition under which the hidden attribute is set to false.

So it explains why it's not firing when switching apps. But even when switching apps and the window is completely hidden the event does not trigger (in Firefox).

So at the end of the page is this note:

The Page Visibility API enables developers to know when a Document is visible or in focus. Existing mechanisms, such as the focus and blur events, when attached to the Window object already provide a mechanism to detect when the Document is the active document.

So it would seem to suggest that it's accepted practice to use focus and blur to detect window activation or app switching.

I found this answer that is close to what would be needed to make a cross browser solution but needs focus and blur (at least for Firefox).

Observation:
StackOverflow has a policy against mentioning frameworks or libraries. The answers linked here have upvotes for the "best" answer.

But these can grow outdated. Since yesterday I found mention of two frameworks (polyfills) that attempt to solve this same problem here for visibly and isVis (not creating a link). If this is a question and answer site and a valid answer is, "here is some code that works for me" but "Here is the library I created using the same code that can be kept up to date and maintained on github" is not valid then in my opinion it's missing it's goal.

I know above should probably go to meta and I have but they resist changing the status quo for some reason. Mentioning it here since it's a relevant example.

like image 325
1.21 gigawatts Avatar asked Dec 13 '18 09:12

1.21 gigawatts


People also ask

What are browser native events?

click – when the mouse clicks on an element (touchscreen devices generate it on a tap). contextmenu – when the mouse right-clicks on an element. mouseover / mouseout – when the mouse cursor comes over / leaves an element. mousedown / mouseup – when the mouse button is pressed / released over an element.

What is event on a website?

Events are actions or occurrences that happen in the system you are programming, which the system tells you about so your code can react to them. For example, if the user clicks a button on a webpage, you might want to react to that action by displaying an information box.

What is it called when a person clicks a button on a form displayed by your JavaScript?

You will learn. Trigger a legacy popup when a button is clicked.

How do JavaScript event listeners work?

Event listeners are called only when the event happens in the context of the object they are registered on. That example attaches a handler to the button node. Clicks on the button cause that handler to run, but clicks on the rest of the document do not. Giving a node an onclick attribute has a similar effect.


1 Answers

The Page lifecycle API can be used to listen for visibilitychange events.

[This event triggers] when a user navigates to a new page, switches tabs, closes a tab, minimizes or closes the browser, or switches apps on mobile operating systems. Quote

Current browser support

Reference on MDN

like image 160
Sebastian Speitel Avatar answered Nov 02 '22 17:11

Sebastian Speitel