Có thể, trong JavaScript, để phát hiện khi màn hình bị tắt trong các trình duyệt Android và iOS

Question

Tôi đã theo dõi một số lần tải rất cao mà javascript của ứng dụng đã báo cáo và thấy rằng Android (và iOS) tạm dừng một số JavaScript thực hiện khi cửa sổ ở chế độ nền hoặc màn hình tắt.

Trên Android, tôi thấy rằng tôi có thể sử dụng các sự kiện window.onfocus và onblur để phát hiện khi ứng dụng chuyển sang nền (và thực thi js sẽ sớm bị tạm dừng, ít nhất là cho tập lệnh mới), nhưng tôi không thể tìm thấy một cách để phát hiện khi màn hình được bật hoặc tắt. Điều này có thể không?

(Trên Safari, tôi đã có kết quả tương tự ngoại trừ việc onfocus và onblur không chớp đáng tin cậy.)

Answer 1

Có vài lựa chọn để kiểm tra xem nó:

1. Sử dụng Visibility API

2. Sử dụng focus và blur sự kiện để phát hiện trình duyệt tab visibility:

 
window.addEventListener("focus", handleBrowserState.bind(context, true)); 
window.addEventListener("blur", handleBrowserState.bind(context, false)); 

function handleBrowserState(isActive){ 
    // do something 
} 

3. Sử dụng bộ hẹn giờ, như đã đề cập ở trên

Answer 2

tôi chỉ tìm thấy một giải pháp khá tốt đối với trường hợp sử dụng của tôi:

function getTime() { 
    return (new Date()).getTime(); 
} 

var lastInterval = getTime(); 

function intervalHeartbeat() { 
    var now = getTime(); 
    var diff = now - lastInterval; 
    var offBy = diff - 1000; // 1000 = the 1 second delay I was expecting 
    lastInterval = now; 

    if(offBy > 100) { // don't trigger on small stutters less than 100ms 
     console.log('interval heartbeat - off by ' + offBy + 'ms'); 
    } 
} 

setInterval(intervalHeartbeat, 1000); 

Khi màn hình bị tắt (hoặc JS bị tạm dừng vì bất kỳ lý do gì), khoảng thời gian tiếp theo bị trì hoãn cho đến khi thực thi JS tiếp tục. Trong mã của tôi, tôi chỉ có thể điều chỉnh bộ đếm thời gian theo số tiền offBy và gọi nó là tốt.

Trong thử nghiệm nhanh, điều này dường như hoạt động tốt trên cả trình duyệt Android 4.2.2 và Safari trên iOS 6.1.3.

Answer 3

bạn sẽ làm gì trong tập lệnh sau khi màn hình tắt? Dù sao thì, bạn có thể tiêm các đối tượng Java (http://developer.android.com/reference/android/webkit/WebView.html#addJavascriptInterface(java.lang.Object,%20java.lang.String)) để giao tiếp với hoạt động và proxy tất cả thông tin bạn cần trong thế giới JS.

Answer 4

Tìm thấy một chức năng thú vị ở đây:

http://rakaz.nl/2009/09/iphone-webapps-101-detecting-essential-information-about-your-iphone.html

(function() { 
    var timestamp = new Date().getTime(); 

    function checkResume() { 
     var current = new Date().getTime(); 
     if (current - timestamp > 4000) { 
      var event = document.createEvent("Events"); 
      event.initEvent("resume", true, true); 
      document.dispatchEvent(event); 
     } 
     timestamp = current; 
    } 

    window.setInterval(checkResume, 1000); 
})(); 

Để đăng ký tham dự:

addEventListener("resume", function() { 
    alert('Resuming this webapp'); 
}); 

này phù hợp với Cordova mà cũng cháy sự kiện resume.