页面可见性 API，让我们帮助用户节省电池寿命和数据😀

你是那些打开了 200 个标签页的人吗？你是否厌倦了一直随身携带笔记本电脑充电器？好吧，我想告诉你，如果我们知道如何使用Page Visibility API，我们可以帮助用户节省电池、流量和时间。

原因

想象一下，你的用户打开了几个标签页，一个正在运行繁重的动画，另一个正在从服务器获取大量数据，还有一个正在播放 YouTube 上的视频。这些都需要消耗用户电脑的资源，所以有时打开几个标签页后，你会突然意识到电池快没电了，或者你的流量快用完了。

💡 如果用户没有查看选项卡/窗口，您可以暂停该选项卡/窗口上的当前操作，会怎么样？

有了Page Visibility API，您就可以做到这一点。

页面可见性 API

此 API 允许开发者感知用户是否已从页面中失去焦点，或是否已再次返回。当用户最小化或切换到其他标签页/窗口时，该 API 会发送visibilitychange事件，让监听器了解页面的状态。

页面可见性 API是您工具箱中非常有用的工具，它使您能够在页面对用户不可见时不执行不必要的操作。

此 API 向接口添加以下属性Document：

hidden：这是一个只读属性，如果页面处于对用户隐藏的状态，则返回 true。
visibilityState：表示DOMString文档当前的可见性状态。它可以有四个值：visible、hidden、prerender和unloaded。

您还可以监听visibilitychange可见性发生变化时触发回调函数的事件：

function handleVisibilityChange () {
    if (document.hidden) {
        // stop that task 🛑
    } else {
        // you can start it again go ▶️
    }
}

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

`visibilityState`

如前所述，此属性可以有四个不同的值，每个值代表不同的选项卡/窗口状态：

visible：表示标签页/窗口可见或部分可见。换句话说，表示该页面是非最小化窗口的前台标签页。
隐藏：由于最小化或设备屏幕关闭，页面不可见。
prerender：页面现在正在预渲染，用户不可见。
unloaded：这意味着用户即将关闭当前页面。

⚠️您需要知道并非所有浏览器都支持最后两种状态。

演示

最简单的场景是在页面上播放视频，因此我们将以此为例。让我们在页面上使用一个简单的视频元素，当用户将焦点移到另一个标签页时，该元素将暂停播放。

<body>
    <h1>Demo: Page Visibility API</h1>

    <main>
        <video id="videoElement" 
               poster="http://media.w3.org/2010/05/sintel/poster.png" width="400"
               controls="" >
           <source id='mp4' src="http://media.w3.org/2010/05/sintel/trailer.mp4" type='video/mp4'/>
        <source id='webm' src="http://media.w3.org/2010/05/sintel/trailer.webm" type='video/webm'/>
        <source id='ogv' src="http://media.w3.org/2010/05/sintel/trailer.ogv" type='video/ogg'/>
            <p>Sorry, there's a problem playing this video. Please try using a different browser</p>
        </video>
    </main>


    <script>    

    (function() {
        'use strict';

        // Set the name of the "hidden" property and the change event for visibility
        var hidden, visibilityChange; 
        if (typeof document.hidden !== "undefined") {
          hidden = "hidden";
          visibilityChange = "visibilitychange";
        } else if (typeof document.mozHidden !== "undefined") { // Firefox up to v17
          hidden = "mozHidden";
          visibilityChange = "mozvisibilitychange";
        } else if (typeof document.webkitHidden !== "undefined") { // Chrome up to v32, Android up to v4.4, Blackberry up to v10
          hidden = "webkitHidden";
          visibilityChange = "webkitvisibilitychange";
        }

        var videoElement = document.getElementById("videoElement");

        // If the page is hidden, pause the video;
        // if the page is shown, play the video
        function handleVisibilityChange() {
          if (document[hidden]) {
            videoElement.pause();
          } else {
            videoElement.play();
          }
        }

        // Warn if the browser doesn't support addEventListener or the Page Visibility API
        if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") {
          alert("This demo requires a modern browser that supports the Page Visibility API.");
        } else {
          // Handle page visibility change   
          document.addEventListener(visibilityChange, handleVisibilityChange, false);

          // When the video pauses and plays, change the title.
          videoElement.addEventListener("pause", function(){
            document.title = 'Paused';
          }, false);

          videoElement.addEventListener("play", function(){
            document.title = 'Playing'
          }, false);
        }

    })();
    </script>

</body>

我们所做的就是获取视频元素的引用并将其挂接到visibilitychange事件中。当页面隐藏时，我们只需暂停视频即可。一旦焦点重新回到页面，我们就会播放视频。

我在 Glitch 上创建了一个实时版本，你可以看看。播放视频，然后点击另一个标签页。视频会暂停，返回后会再次播放。

概括

优秀的 Web 应用并不一定需要出色的功能和令人印象深刻的用户体验。有时，性能卓越的 Web 应用会比其他应用更能吸引用户。希望这篇小文章能帮助您在多方面帮助您的用户。

探索愉快😊。

鏂囩珷鏉ユ簮锛�https://dev.to/yashints/page-visibility-api-let-s-help-users-save-their-battery-life-and-data-2moa