This is the 26th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Writing in the front

Sometimes developers need to know that users are leaving the page. The common approach is to listen for the following three events.

  • pagehide
  • beforeunload
  • unload

However, these events may not be triggered on the phone and the page will simply close. Because a mobile system can simply roll a process into the background and kill it.

  • The user clicks on a system notification and switches to another App.
  • The user enters the task switching window and switches to another App.
  • The user clicks the Home button to switch back to the Home screen.
  • The operating system automatically switches to another App (i.e. receives a phone call).

In all of these cases, the phone will switch the browser process to the background, which may then kill the browser process to save resources.

Previously, the page was switched by the system, and the system cleared the browser process, is not listening. It is also impossible for developers to specify code that will be executed in any case of page uninstallation. To solve this problem, the Page Visibility API was created. In all cases, whether mobile or desktop, the API listens for changes in the visibility of the page.

The significance of this new API is that by monitoring the visibility of a web page, it can predict the uninstallation of a web page, and can also be used to save resources and reduce power consumption. For example, once the user does not look at the web page, the following web behavior can be suspended.

  • Polling the server
  • Web animation
  • The audio or video being played

document.visibilityState

This API adds a new document.visibilityState property to the Document object. This property returns a string representing the current visibility state of the page with three possible values.

  • hidden: The page is completely invisible.
  • visible: At least part of the page is visible.
  • prerender: The page is about to render or is not visible.

Hidden and Visible states are mandatory for all browsers. Prerender status is only available on browsers that support “pre-rendering,” such as Chrome, which renders pages unseen and displays them when the user wants to view them.

The Document. visibilityState property returns Visible whenever the page is visible, even if only one corner is visible. There are only four cases in which hidden is returned.

  • Browser minimization.
  • The browser is not minimized, but the current page switches to the background page.
  • The browser will unload the page.
  • The operating system triggers a screen lock.

As you can see, the four scenarios above cover all the scenarios in which a page can be unmounted. That is, before the page is unloaded, the Document. visibilityState property must be hidden. In fact, this is the main purpose of the API.

Also, earlier versions of the API, with a fourth value of this property unloaded, indicating that the page is unloaded, are now obsolete.

Note that the Document. visibilityState property applies only to the top-level window, and the document.visibilityState property of the embedded

document.hidden

For historical reasons, the API also defines the Document.hidden property. This property is read-only and returns a Boolean value indicating whether the current page is visible.

When the document.visibilityState property returns visible, the document.hidden property returns false; Otherwise, return true.

This property is reserved for historical reasons only and should be used instead of the document.visibilityState property whenever possible.

Visibilitychange event

Whenever the Document. visibilityState property changes, the VisiBilityChange event is triggered. Thus, can monitor the event (through the document. The addEventListener () method or the document. The onvisibilitychange properties), tracking page visible change.

document.addEventListener('visibilitychange', Function () {if (document.visibilityState === 'hidden') {document.title = 'hidden'; If (document.visibilityState === 'visible') {document.title = 'visible'; }});Copy the code

The code above is the most basic use of the Page Visibility API to listen for changes in Visibility.

Here is another example of pausing the video once the page is not visible.

var vidElem = document.getElementById('video-demo'); document.addEventListener('visibilitychange', startStopVideo); function startStopVideo() { if (document.visibilityState === 'hidden') { vidElem.pause(); } else if (document.visibilityState === 'visible') { vidElem.play(); }}Copy the code

Page unload

Here’s how to properly listen for page uninstalls.

Page unloading can be divided into three cases.

  • When the page is visible, the user closes the Tab page or browser window.
  • When the page is visible, the user goes to another page in the current window.
  • When the page is not visible, the user or the system closes the browser window.

In all three cases, the visibilityChange event is triggered. In the first two cases, the event is triggered when the user leaves the page; In the last case, the event is triggered when the page changes from visible to invisible.

As you can see, the VisiBilityChange event is more reliable than pageHide, beforeUnload, and Unload events and fires in all cases (from Visible to Hidden). Therefore, you can only listen for this event and run the code that needs to be run when the page is unloaded without listening for the next three events.

It can even be said that the Unload event does not need to be listened on in any case, before the Unload event has only one case where the user modifs the form and leaves the current page without submitting. On the other hand, if you specify a listener for these two events, the browser will not cache the current page.