W3C

Page Visibility

W3C Working Draft 2 June 2011



This version:
http://www.w3.org/TR/2011/WD-page-visibility-20110602/
Latest version:
http://www.w3.org/TR/page-visibility/
Latest Editor's Draft:
http://dvcs.w3.org/hg/webperf/raw-file/tip/specs/PageVisibility/Overview.html
Editors:
Jatinder Mann (Microsoft Corp.) <> 
Arvind Jain (Google Inc.) <> 

Copyright  © 2011 W3C® (MIT, ERCIM, Keio), All Rights Reserved. W3C liability,  trademark  and document  use rules apply.

Abstract


This specification defines a means for site developers to programmatically determine  the current visibility state of the page in order to develop power and CPU efficient web applications.

Status of this document


This section describes the status of this document at the time of  its publication. Other documents may supersede this document. A list of  current W3C publications and the latest revision of this technical report  can be found in the W3C technical reports  index at http://www.w3.org/TR/.
This is a First Public Working Draft of "Page Visibility".
Please send comments  to public-web-perf@w3.org  (archived)  with [PageVisibility] at the start of the subject line.
This document is produced by  the Web Performance  Working Group. The Web Performance Working Group is part of  the Rich Web Clients  Activity in the  W3C Interaction  Domain.
You can find the latest Editor's Draft of this document in the W3C's Mercurial repository, which is updated on a regular basis.

Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress. 
This document was produced by a group operating under  the 5  February 2004 W3C Patent Policy. W3C maintains  a public list of any patent disclosures made in  connection with the deliverables of the group; that page also  includes instructions for disclosing a patent. An individual who  has actual knowledge of a patent which the individual believes  contains Essential  Claim(s) must disclose the information in accordance  with section  6 of the W3C Patent Policy.
Implementers should be aware that this document is not  stable. Implementers who are not taking part in the discussions  are likely to find the specification changing out from under them in  incompatible ways. Vendors interested in implementing this document  before it eventually reaches the Candidate Recommendation stage should  join the aforementioned mailing lists and take part in the discussions.

Table of Contents



(一)1Introduction
(二)2Conformance requirements
(三)3Terminology
(四)4Page Visibility 

(一)4.1 Introduction
(二)4.2 The DocumentVisibility interface
(三)4.3 The visibilitychange event
  

(五)5References
(六)Acknowledgements

1Introduction


This section is non-normative.
The Page Visibility specification defines a means for site developers to  programmatically determine the current visibility of a document and be notified  of visibility changes. Without knowing the visibility state of a page, a web developer  must design the webpage as if it is always visible. This not only results in higher  machine resource utilization, but it prevents web developers from making runtime decisions based on whether the webpage is visible to the user. Designing web pages with knowledge of the page visibility will allow for improved user experiences and power efficient sites.
With this interface, web applications may chose to alter behavior based on whether they are visible to the user or not. For example, this interface can be used to scale back work when the page is no longer visible. If a web based email client is visible, it may check the server for new mail every few seconds.  When hidden it might scale checking email to every few minutes. This interface can also be used to provide better runtime user experience decisions not related to power management. For example, a puzzle game could be paused when the user no longer has the game visible. Further, this interface can be used by advertisers to not charge for ads that are not visible to users.

For example, the following Javascript shows a theoretical web based email client checking for new emails every second without knowledge of  the Page Visibility:
 
<!DOCTYPE html>
<html>
 <head>
  <script>
   var timer = 0;
   var PERIOD = 1000;

   function onLoad() {
       timer = setInterval(checkEmail, PERIOD);
   }

   function checkEmail() { 
       // Check server for new emails
   }

  </script>
 </head>
 <body onload="onLoad()">
 </body>
</html>
The script will always check for emails every second, even if the user is not actively viewing the page because it is not visible. This is an example of poor resource management.
Using the DocumentVisibility interface, the page will be able to throttle checking email to every minute when the page is no longer visible.

The following script show the theoretical web based email client checking for new emails every second when visible and every minute when not visible:
 
<!DOCTYPE html>
<html>
 <head>
  <script>
   var timer = 0;
   var PERIOD_VISIBLE = 1000;
   var PERIOD_NOT_VISIBLE = 60000;

   function onLoad() {
       timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
       if(document.addEventListener) document.addEventListener("visibilitychange", visibilityChanged);
   }

   function visibilityChanged() {
       clearTimeout(timer);
       timer = setInterval(checkEmail, (document.hidden) ? PERIOD_NOT_VISIBLE : PERIOD_VISIBLE);
   }

   function checkEmail() { 
       // Check server for new emails
   }

  </script>
 </head>
 <body onload="onLoad()">
 </body>
</html>

2Conformance requirements


All diagrams, examples, and notes in this specification are non-normative, as are all sections explicitly marked non-normative. Everything else in this specification is normative. 
The key words "MUST", "MUST NOT", "REQUIRED", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this document are to be interpreted as described in RFC 2119. For readability, these words do not appear in all uppercase letters in this specification.
Requirements phrased in the imperative as part of algorithms (such as "strip any leading space characters" or "return false and abort these steps") are to be interpreted with the meaning of the key word ("must", "should", "may", etc) used in introducing the algorithm. 
Some conformance requirements are phrased as requirements on attributes, methods or objects. Such requirements are to be interpreted as requirements on user agents. 
Conformance requirements phrased as algorithms or specific steps may be implemented in any manner, so long as the end result is equivalent. (In particular, the algorithms defined in this specification are intended to be easy to follow, and not intended to be performant.) 

3Terminology


The construction "a Foo object", where Foo is actually an interface, is sometimes used instead of the more accurate "an object implementing the interface Foo". 
The term DOM is used to refer to the API set made available to scripts in Web applications, and does not necessarily imply the existence of an actual Document object or of any other Node objects as defined in the DOM Core specifications.
A DOM attribute is said to be getting when its value is being retrieved (such as by author script), and is said to be setting when a new value is assigned to it. 
The term "JavaScript" is used to refer to ECMA-262, rather than the official term ECMAScript, since the term JavaScript is more widely known.

4Page Visibility

4.1 Introduction


This section is non-normative
This specification introduces an interface that provides Web applications with the means to programmatically determine the current visibility of a page and be notified of visibility changes.

4.2 The DocumentVisibility interface 

[NoInterfaceObject]
interface DocumentVisibility {
  const DOMString PAGE_HIDDEN = "hidden";
  const DOMString PAGE_VISIBLE = "visible";
  const DOMString PAGE_PREVIEW = "preview";
  const DOMString PAGE_PRERENDER = "prerender";
            
  readonly attribute boolean hidden;
  readonly attribute unsigned short visibilityState;
};
Document implements DocumentVisibility;

hidden attribute


This attribute returns true if the Document contained by the  top level browsing context (root window in the browser's viewport) is not visible at all. This attribute returns false if the Document contained by the  top level browsing context  is at least partially visible on at least one screen.

To accommodate accessibility tools that are typically full screen but still show a  view of the page, when applicable, this attribute may return false when the User Agent  is not minimized but is fully obscured by other applications.
As examples, the attribute returns true when: 

●The User Agent is minimized.
●The User Agent is not minimized, but the page is on a background tab.
●The Operating System lock screen is shown.
●The User Agent is minimized and a preview is shown.
  
Likewise, as examples, the attribute returns false when:

●The User Agent is not minimized and the page is on a foreground tab.
●The User Agent is fully obscured by an Accessibility Tool, like a magnifier, but  a view of the page is shown.
  

visibilityState attribute

document.PAGE_HIDDEN

This attribute must return document.PAGE_HIDDEN if the Document contained by the  top level browsing context  is not visible at all on any screen.
To accommodate accessibility tools that are typically full screen but still  show a view of the page, when applicable, this constant may not be returned  when the User Agent is not minimized but is fully obscured by other applications.
For example, the following cases would return document.PAGE_HIDDEN:

●The User Agent is minimized.
●The User Agent is not minimized, but the page is on a background tab.
●The Operating System lock screen is shown.
  
document.PAGE_VISIBLE

This attribute must return document.PAGE_VISIBLE if the Document contained by the  top level browsing context  is at least partially visible at on at least one screen. This is the same condition under which the hidden attribute is set to false.
This constant is not returned if the Document contained by the  top level browsing context is not  visible, however, a preview of the Document is  visible.
To accommodate accessibility tools that are typically full screen but still show a  view of the page, when applicable, this constant may be returned when the User Agent  is not minimized but is fully obscured by other applications.
document.PAGE_PREVIEW

This attribute is optional. This attribute may return document.PAGE_PREVIEW if the  Document contained by the  top level browsing context  is not visible at all and a preview of the the Document is  visible.
document.PAGE_PRERENDER

This attribute is optional. This attribute may return document.PAGE_PRERENDER if the  Document is prerendered  by being loaded off-screen and not visibly shown by the User Agent.

4.3  The visibilitychange event


The visibilitychange event is fired any time a change is made to the  document.visibilityState attribute. This event can only be registered using  addEventListener on document. This event will get fired on the first change in  document.visibilityState after registration; it will not get fired on  registration.

5References



[IETF RFC 2119]
Key words for use in RFCs to Indicate Requirement Levels,  Scott Bradner, Author. Internet Engineering Task Force, March 1997. Available at  http://www.ietf.org/rfc/rfc2119.txt.  
[DOM Level 3 Core]
Document Object Model Level 3 Core  Specification, A. Le Hors, et al., Editors. World  Wide Web Consortium, 7 April 2004. This version of the Document  Object Model Level 3 Core Recommendation is  http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407. The latest version of  DOM Level 3 Core is available at  http://www.w3.org/TR/DOM-Level-3-Core.  
[ECMA-262]
ECMAScript Language Specification, 5th  Edition. ECMA International, Standard  ECMA-262, December 2009. This version of the ECMAScript  Language is available from http://www.ecma-international.org/publications/standards/Ecma-262.htm.  
[HTML5]
HTML5, Ian Hickson, Editor. World Wide Web Consortium, May 2011. This version of the HTML5 is available from http://www.w3.org/TR/html5/. The latest editor's draft is available at http://dev.w3.org/html5/spec/.

Acknowledgements


We would like to sincerely thank Karen Anderson, Nic Jansma, Alex Komoroske, Cameron McCormack, James Robinson,  Jonas Sicking, Kyle Simpson, Jason Weber, and Boris Zbarsky to acknowledge their contributions to this work.