Sử dụng API Chế độ hiển thị trang

Ernest Delgado
Ernest Delgado
X

Giới thiệu

Là nhà phát triển web, chúng ta thường hào hứng với những công nghệ mới giúp chúng ta tạo ra các trang web hấp dẫn và có tính tương tác cao hơn bao giờ hết. Đồ hoạ 3D bằng WebGL? Hoàn toàn có thể. Khả năng xử lý âm thanh nâng cao bằng WebAudio? Chắc chắn. Các ứng dụng cộng tác theo thời gian thực sử dụng camera và micrô trên web? Đăng ký cho tôi!

Tuy không thú vị bằng nhưng cũng quan trọng không kém là những công nghệ cho phép chúng ta xây dựng các ứng dụng chạy hiệu quả hơn và mang lại trải nghiệm người dùng tổng thể tốt hơn. Đây là lúc một API như PageVisibility phát huy tác dụng.

API Chế độ hiển thị của trang thực hiện một chức năng đơn giản nhưng quan trọng – cho ứng dụng của bạn biết khi nào trang hiển thị cho người dùng. Thông tin cơ bản này cho phép tạo các trang web hoạt động theo cách khác khi không được xem. Hãy xem xét một vài ví dụ:

  • Một trang web truy xuất thông tin từ máy chủ có thể làm chậm chu kỳ cập nhật khi không được xem tích cực
  • Một trang hiển thị băng chuyền hình ảnh xoay vòng hoặc nội dung video/âm thanh có thể tạm dừng cho đến khi người dùng hiển thị lại trang đó
  • Ứng dụng có thể quyết định chỉ hiển thị thông báo cho người dùng khi ứng dụng bị ẩn khỏi chế độ xem

Thoạt nhìn, API này có vẻ không hữu ích lắm ngoài việc mang lại sự tiện lợi cho người dùng, nhưng xét đến sự gia tăng đáng kể của hoạt động duyệt web trên thiết bị di động, thì mọi thứ giúp tiết kiệm pin của thiết bị đều trở nên rất quan trọng. Bằng cách sử dụng PageVisibility API, trang web của bạn có thể giúp thiết bị của người dùng tiêu thụ ít điện năng hơn và hoạt động lâu hơn.

Browser Support

  • Chrome: 33.
  • Edge: 12.
  • Firefox: 18.
  • Safari: 7.

Source

Thông số kỹ thuật của API (tính đến thời điểm viết bài này đang ở giai đoạn Đề xuất ứng viên) cung cấp cả thuộc tính để phát hiện trạng thái hiển thị của tài liệu cũng như sự kiện để phản hồi các thay đổi về chế độ hiển thị.

Trong hướng dẫn này, tôi sẽ trình bày những thông tin cơ bản về API và cách áp dụng API này vào một số ví dụ thực tế (bạn có thể chuyển ngay đến các ví dụ đó nếu muốn).

Thuộc tính hiển thị tài liệu

Phiên bản hiện tại của thông số kỹ thuật PageVisibilityAPI xác định hai thuộc tính tài liệu: boolean hidden và bảng liệt kê visibilityState. Thuộc tính visibilityState hiện có 4 giá trị có thể có: hidden, visible, prerender và unloaded.

Như bạn có thể thấy, thuộc tính ẩn sẽ trả về giá trị true khi tài liệu hoàn toàn không hiển thị. Thông thường, điều này có nghĩa là tài liệu bị thu nhỏ, nằm trên một thẻ nền, màn hình khoá của hệ điều hành đang bật, v.v. Thuộc tính này được đặt thành false nếu bất kỳ phần nào của tài liệu hiển thị ít nhất một phần trên ít nhất một màn hình. Ngoài ra, để phù hợp với các công cụ hỗ trợ tiếp cận, bạn có thể đặt thuộc tính ẩn thành false khi một công cụ như trình phóng to màn hình che khuất hoàn toàn tài liệu nhưng vẫn hiển thị chế độ xem tài liệu đó.

Xử lý tiền tố của nhà cung cấp

Để tập trung vào mã thay vì tất cả tiền tố dành riêng cho nhà cung cấp, tôi sẽ sử dụng một số hàm trợ giúp để tách biệt các thông tin dành riêng cho trình duyệt. Ngay khi ngừng hỗ trợ Trình duyệt Android 4.4, bạn có thể xoá phần này và sử dụng tên chuẩn.

function getHiddenProp(){
    var prefixes = ['webkit','moz','ms','o'];

    // if 'hidden' is natively supported just return it
    if ('hidden' in document) return 'hidden';

    // otherwise loop over all the known prefixes until we find one
    for (var i = 0; i < prefixes.length; i++){
        if ((prefixes[i] + 'Hidden') in document)
            return prefixes[i] + 'Hidden';
    }

    // otherwise it's not supported
    return null;
}

Ví dụ về thuộc tính của tài liệu

Bây giờ, chúng ta có thể viết một hàm trên nhiều trình duyệt, isHidden(), để xem tài liệu có hiển thị hay không.

function isHidden() {
    var prop = getHiddenProp();
    if (!prop) return false;

    return document[prop];
}

Để có thông tin chi tiết hơn về chế độ hiển thị của tài liệu, bạn có thể sử dụng thuộc tính visibilityState. Thuộc tính này trả về một trong bốn giá trị:

  • hidden: tài liệu bị ẩn hoàn toàn khỏi chế độ xem
  • visible: tài liệu hiển thị ít nhất một phần trên ít nhất một thiết bị hiển thị
  • prerender: tài liệu được tải ngoài màn hình và không hiển thị (giá trị này là không bắt buộc; không phải trình duyệt nào cũng hỗ trợ giá trị này)
  • unloaded: nếu tài liệu cần được huỷ tải, thì giá trị này sẽ được trả về (giá trị này là không bắt buộc; không phải trình duyệt nào cũng hỗ trợ giá trị này)

Sự kiện VisibilityChange

Ngoài các thuộc tính hiển thị, còn có một sự kiện visibilitychange kích hoạt bất cứ khi nào trạng thái hiển thị của tài liệu thay đổi. Bạn có thể đăng ký trình nghe sự kiện cho sự kiện này ngay trên đối tượng tài liệu:

Ví dụ về sự kiện

// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
  var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
  document.addEventListener(evtname, visChange);
}

function visChange() {
   var txtFld = document.getElementById('visChangeText');

   if (txtFld) {
      if (isHidden())
         txtFld.value += "Tab Hidden!\n";
      else
         txtFld.value += "Tab Visible!\n";
   }
}

Tóm tắt

Việc xây dựng một ứng dụng web tuyệt vời không chỉ dừng lại ở việc sử dụng các tính năng bắt mắt, ấn tượng mà người dùng có thể nhìn thấy và tương tác. Một ứng dụng thực sự tuyệt vời sẽ sử dụng tài nguyên và sự chú ý của người dùng một cách chu đáo, và API Chế độ hiển thị trang là một phần quan trọng trong câu đố đó. Để tìm hiểu thêm về cách xây dựng ứng dụng web chú trọng đến tài nguyên, hãy xem các bài viết khác liên quan đến hiệu suất.

Tham chiếu bên ngoài