Page Visibility API, 사용자가 배터리 수명과 데이터를 절약하도록 도와줍시다 😀

12754 단어 pagevisibilityapishowdevwebdevjavascript
200개의 탭이 열려 있는 사람들을 원하십니까? 항상 노트북 충전기를 휴대하는 데 지치셨습니까? Page Visibility API를 사용하는 방법을 알고 있다면 사용자가 배터리, 데이터 및 시간을 절약할 수 있도록 도울 수 있음을 알려드립니다.

이유



사용자가 몇 개의 탭을 열어 놓고 하나는 무거운 애니메이션을 실행하고 다른 하나는 서버에서 많은 데이터를 가져오고 다른 하나는 YouTube에서 비디오를 실행한다고 상상해 보십시오. 이것들은 모두 사용자 컴퓨터의 리소스를 필요로 하기 때문에 때때로 몇 개의 탭을 열면 갑자기 배터리가 부족하거나 데이터 허용량이 종료되고 있음을 깨닫게 됩니다.

💡 What if you could pause the current operation on a tab/window if the user isn't looking at it?


Page Visibility API 를 사용하면 그렇게 할 수 있습니다.

페이지 가시성 API



이 API를 통해 개발자는 사용자가 페이지에서 포커스를 잃었는지 또는 다시 돌아왔는지 알 수 있습니다. 사용자가 최소화하거나 다른 탭/창으로 전환하면 API는 visibilitychange 이벤트를 전송하여 리스너가 페이지 상태를 알 수 있도록 합니다.

Page Visibility 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);


    가시성 상태



    앞에서 언급했듯이 이 속성은 각각 다른 탭/창 상태를 나타내는 네 가지 값을 가질 수 있습니다.

  • visible: 이것은 탭/창이 보이거나 부분적으로 보인다는 것을 의미합니다. 즉, 페이지가 최소화되지 않은 창의 전경 탭임을 의미합니다.

  • 숨김: 기기의 화면이 꺼져 있거나 최소화되어 페이지가 보이지 않습니다.

  • prerender: 페이지가 현재 사전 렌더링 중이며 사용자에게 표시되지 않습니다.

  • unloaded: 이것은 사용자가 현재 페이지를 닫으려 한다는 것을 의미합니다.

    • ⚠️ You need to know that not all browsers support the last two states.



    데모



    가장 간단한 시나리오는 페이지에서 비디오를 재생하는 것이므로 이를 예로 사용하겠습니다. 사용자가 다른 탭에 초점을 맞출 때 일시 중지되는 페이지의 간단한 비디오 요소를 사용해 봅시다.

    <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 이벤트에 연결하는 것뿐입니다. 페이지가 숨겨지면 비디오를 일시 중지하기만 하면 됩니다. 포커스가 돌아오면 재생합니다.



    live version on Glitch을 만들어 봤습니다. 비디오를 재생하고 다른 탭을 클릭하십시오. 동영상이 일시 중지되고 돌아오면 다시 재생됩니다.

    요약



    좋은 웹 애플리케이션에 반드시 핫 기능과 인상적인 UX가 필요한 것은 아닙니다. 때로는 성능이 뛰어난 웹 애플리케이션이 다른 어떤 것보다 사용자에게 어필할 수 있습니다. 이 작은 기사가 여러 가지 방법으로 사용자를 돕는 데 도움이 되기를 바랍니다.

    즐거운 탐험 😊.
    C#반사 유틸리티 노트
    Bump@babel/사전 설정 환경이 7.12.1에서 7.12.7인치/자산으로 증가

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage