Giới thiệu
Là nhà phát triển web, chúng ta thường hứng thú với những công nghệ mới cho phép chúng ta tạo ra những trang web hấp dẫn, tương tác hơn bao giờ hết. Đồ họa 3D với WebGL? Không sao cả! Bạn có muốn sử dụng âm thanh nâng cao với WebAudio không? Thật vậy sao. Ứng dụng cộng tác trong thời gian thực sử dụng máy ảnh trên web và micrô? Hãy đăng ký cho tôi!
Tuy quan trọng không kém, những công nghệ này cho phép chúng tôi xây dựng những ứ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à nơi có một API như PageVisibility.
API Khả năng hiển thị trang thực hiện một chức năng đơn giản nhưng quan trọng – API này cho ứng dụng của bạn biết khi nào người dùng có thể nhìn thấy một trang. Thông tin cơ bản này cho phép việc tạo các trang Web hoạt động theo cách khác khi người dùng không xem chúng. 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 người dùng không chủ động xem trang đó
- 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
- Một ứ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
Lúc đầu, có thể API này không thật sự hữu ích ngoài sự thuận tiện cho người dùng, nhưng khi duyệt web dành cho thiết bị di động tăng lên đáng kể, bất kỳ điều gì 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 API PageVisibility, 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à tồn tại lâu hơn.
Thông số kỹ thuật của API, tại thời điểm viết bài này đang ở giai đoạn Đề xuất đề xuất, cung cấp cả hai 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 kiến thức cơ bản về API và chỉ cho bạn cách áp dụng API này vào một số ví dụ thực tế (bạn có thể bỏ qua 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ố PageVisibilityAPI xác định hai thuộc tính của tài liệu: boolean hidden và giá trị liệt kê visibilityState. Thuộc tính visibilityState hiện có thể có 4 giá trị: hidden, visible, prerender và unloaded.
Như bạn có thể mong đợi, thuộc tính ẩn sẽ trả về giá trị true khi tài liệu không xuất hiện. Thông thường, điều này có nghĩa là tài liệu đã được thu nhỏ, trên thẻ nền, màn hình khoá của hệ điều hành hiển thị, v.v. Thuộc tính này được đặt thành false nếu có phần bất kỳ của tài liệu chỉ hiện 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ư kính lúp che khuất hoàn toàn tài liệu nhưng lại cho thấy chế độ xem của tài liệu.
Giao dịch với tiền tố 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ố chức năng trợ giúp để tách biệt các trình duyệt cụ thể. Ngay khi bạn ngừng hỗ trợ cho Trình duyệt Android 4.4, bạn có thể loại bỏ phần này và gắn bó với 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 hàm trên nhiều trình duyệt, isHidden(), để xem tài liệu có hiển thị 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 bốn giá trị:
hidden: tài liệu bị ẩn hoàn toàn khỏi chế độ xemvisible: tài liệu ít nhất chỉ hiện 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 bị 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ị, 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 xây dựng 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 đơn giản, bắt mắt 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 giúp người dùng tận dụng một cách chu đáo tài nguyên và sự chú ý của người dùng, và Page Visibility API là một phần quan trọng của việc đó. Để tìm hiểu thêm về cách xây dựng các ứng dụng web dựa trên tài nguyên, hãy tham khảo các bài viết khác liên quan đến hiệu suất của chúng tôi.