重學 JavaScript API - Page Visibility API

pingan8787發表於2023-05-17
JavaScriptAPI

在前端開發中，我們經常需要根據頁面的可見性來控制資源的使用和提高頁面的效能和響應速度。而 JavaScript 中的 Page Visibility API 就提供了一種檢測頁面是否可見的方法。

本文將介紹 Page Visibility API 的概念、使用方法、相容性和實際應用案例。

?什麼是 Page Visibility API？

Page Visibility API 是一種瀏覽器 API，它提供了一種檢測頁面是否可見的方法。透過 Page Visibility API，我們可以知道當前頁面是否被隱藏或者最小化，從而可以根據頁面的可見性來控制頁面的行為和資源的使用。

Page Visibility API 提供了 2 個屬性和 1 個事件，分別是：

1. 屬性

  1. document.hidden：只讀，表示當前頁面是否被隱藏，如果頁面被隱藏返回 true，否則返回 false。
  2. document.visibilityState：只讀，表示當前頁面的可見性狀態，可能的取值有：
  • visible：當前頁面可見，即頁面是非最小化視窗的前景選項卡。
  • hidden：當前頁面被隱藏，即頁面可以是一個後臺標籤，或是最小化視窗的一部分，或是在作業系統鎖屏啟用的狀態下。
  • prerender：當前頁面正在預載入。
  • unloaded：當前頁面正在解除安裝，部分瀏覽器不支援。

2. 方法

  • visibilitychange：當頁面的可見性狀態發生變化時觸發該事件。

? Page Visibility API 的使用場景

Page Visibility API 可以應用於很多場景，比如：

  1. 影片播放器

在影片播放期間，可以使用 Page Visibility API 來檢測頁面是否可見。如果頁面不可見，可以透過暫停影片來節省資源和頻寬。當頁面重新變為可見時，可以恢復播放。

  1. 實時訊息通知

如果我們網頁需要向使用者傳送實時通知，就可以使用 Page Visibility API 來檢測頁面是否可見，如果頁面不可見，就不會傳送通知。當使用者重新開啟頁面時，我們可以再次檢查，並確保他們看到任何未讀訊息。

  1. 自動儲存表單資料

如果使用者在表單上輸入了大量資料，而且在填寫過程中離開了頁面，我們可以使用 Page Visibility API 確定何時離開頁面，並自動儲存表單資料，以便以後再次訪問。

  1. 遊戲應用程式

如果我們正在開發一個基於 Web 的遊戲，就可以使用 Page Visibility API 暫停和恢復遊戲，以便玩家能夠在離開遊戲時不會丟失任何進度。

  1. 網頁埋點統計分析

使用 Page Visibility API 可以收集更準確的訪問次數，以便更好地分析使用者行為。

  1. 網頁效能測量

使用 Page Visibility API 可以測量頁面載入時間和頁面解除安裝時間，幫助您最佳化網站效能。

  1. 頁面快取

如果使用 Page Visibility API 的網站被使用者退出，那麼透過記錄快取狀態，可以更好地管理頁面的快取，以便下次更快的訪問。

當然還有更多使用場景，本文不再過多介紹。

? 如何使用 Page Visibility API？

使用 Page Visibility API 非常簡單，只需要在 JavaScript 中監聽 visibilitychange 事件即可。以下是一個簡單的示例：

document.addEventListener("visibilitychange", function () {
  if (document.hidden) {
    // 頁面被隱藏
  } else {
    // 頁面可見
  }
});

在以上示例中，我們使用了 visibilitychange 事件來監聽頁面的可見性狀態變化，當頁面被隱藏時，我們可以執行一些操作，當頁面重新可見時，我們也可以執行一些操作。

? Page Visibility API 的相容性

Page Visibility API 並不是所有瀏覽器都支援，我們需要在使用之前檢查瀏覽器是否支援該 API。以下是一些瀏覽器的支援情況：

  • Chrome：支援。
  • Firefox：支援。
  • Safari：支援。
  • IE：支援 IE10+。
  • Edge：支援。

1_7cJo4EaLkBbOE4Du09eaqA.png

詳細可以檢視 「Page Visibility API」。

如果需要相容不支援 Page Visibility API 的瀏覽器，我們可以使用 Polyfill 或者其他的檢測方法來實現。

? Page Visibility API 的實際應用案例

以下是一些 Page Visibility API 的實際應用案例：

1. 根據頁面的可見性來控制影片播放

點選 demo 檢視。

2. 根據頁面的可見性來控制動畫執行

在頁面中建立小球，其位置隨著時間的推移而變化。使用 Page Visibility API，可以在頁面不可見時停止動畫，並在頁面重新變為可見時恢復動畫。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Animation Control Using Page Visibility API</title>
    <style>
      #ball {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        top: 0;
        left: 0;
      }
    </style>
  </head>

  <body>
    <div id="ball"></div>
    <script>
      window.addEventListener("DOMContentLoaded", function () {
        var ball = document.getElementById("ball");
        ball.style.top = 0;
        ball.style.left = 0;
        var speedX = 2;
        var speedY = 3;
        function move() {
          var top = parseFloat(ball.style.top);
          var left = parseFloat(ball.style.left);

          // 確保小球不會移出螢幕
          if (top < 0 || top > window.innerHeight - 50) {
            speedY = -speedY;
          }
          if (left < 0 || left > window.innerWidth - 50) {
            speedX = -speedX;
          }
          ball.style.top = top + speedY + "px";
          ball.style.left = left + speedX + "px";
        }

        var timer = setInterval(function () {
          move();
        }, 10);

        document.addEventListener("visibilitychange", function () {
          if (document.visibilityState === "hidden") {
            clearInterval(timer);
          } else {
            timer = setInterval(function () {
              move();
            }, 10);
          }
        });
      });
    </script>
  </body>
</html>

其中 setInterval() 是一個迴圈函式，它可以連續執行函式的程式碼，實現動畫效果。在本例中，move() 函式不斷修改球的位置（透過修改 CSS 中的 top 和 left 屬性），並在達到螢幕邊緣時將其反轉。頁面可見性透過 visibilitychange 事件進行監測，當頁面從可見到不可見時停止動畫，反之則恢復動畫。

? 總結

透過本文的介紹，我們瞭解了 Page Visibility API 的概念、使用方法、相容性和實際應用案例。在實際開發中，我們可以根據頁面的可見性來控制資源的使用，提高使用者體驗和效能最佳化。如果你想深入瞭解 Page Visibility API，可以參考以下文件：

相關文章