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

Ernest Delgado

Giới thiệu

Là nhà phát triển web, chúng ta thường rất 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 tương tác và hấp dẫn hơn bao giờ hết. Đồ hoạ 3D bằng WebGL? Không sao cả! Các tính năng âm thanh nâng cao với WebAudio? Chắc chắn. Ứng dụng cộng tác trong thời gian thực sử dụng camera trên web và micrô? Đăng ký cho tôi!

Mặc dù không thú vị bằng nhưng cũng quan trọng không kém là các công nghệ cho phép chúng tôi xây dựng các ứng dụng chạy hiệu quả hơn và mang lại trải nghiệm tổng thể tốt hơn cho người dùng. Đâ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 thời điểm người dùng nhìn thấy một trang. 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ụ:

• 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
• Một trang hiển thị băng chuyền hình ảnh xoay 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 thông báo bị ẩn khỏi chế độ xem

Ban đầu, 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. Tuy nhiên, khi xem xét mức tăng đột biến về hoạt động duyệt web trên thiết bị di động, 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 pin hơn và kéo dài tuổi thọ hơn.

Tại thời điểm viết bài này, thông số kỹ thuật API, đang trong 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ư một 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 các kiến thức cơ bản về API và hướng dẫn cách áp dụng API này cho một số ví dụ thực tế (bạn có thể bỏ qua các ví dụ này nếu không kiên nhẫn).

Thuộc tính chế độ 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à enum 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ể dự đoán, thuộc tính ẩn sẽ trả về true khi tài liệu không hiển thị. Thông thường, điều này có nghĩa là tài liệu đang được thu nhỏ, trên 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 có bất kỳ phần nào của tài liệu ít nhất là hiển thị 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 lại cho thấy 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ả các tiền tố dành riêng cho nhà cung cấp, tôi sẽ sử dụng một số chức năng trợ giúp để tách riêng các trình duyệt cụ thể. Ngay khi ngừng hỗ trợ Trình duyệt Android 4.4, bạn có thể loại bỏ phần này và giữ lại các tên tiêu 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 tài liệu

Bây giờ, chúng ta có thể viết một hàm đa 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];
}

Để xem 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 4 giá trị:

• hidden: tài liệu bị ẩn hoàn toàn khỏi chế độ xem
• visible: ít nhất một phần của tài liệu hiển thị 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 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 chế độ hiển thị, còn có một sự kiện visibilitychange sẽ 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 tạo một ứng dụng web tuyệt vời không chỉ bao gồm việc sử dụng các tính năng thú vị, bắt mắt mà người dùng có thể thấy và tương tác. Một ứng dụng thực sự tuyệt vời giúp tận dụng tối đa tài nguyên và sự chú ý của người dùng, và API 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 các ứng dụng Web tiết kiệm tài nguyên, hãy xem các bài viết khác liên quan đến hiệu suất.

Tài liệu tham khảo bên ngoài

• Thông số kỹ thuật API PageVisibility của W3C
• Nhóm làm việc về hiệu suất web
• Ví dụ về PageVisibility trong IE10
• Visibility.js – một polyfill cho PageVisibility
• isVis – một polyfill PageVisibility khác