如何檢測移動瀏覽器何時返回已暫停的頁面？

當瀏覽器失去對移動設備的關注時，通常設備會停止加載頁面的JavaScript執行，但會保留頁面。如何檢測移動瀏覽器何時返回已暫停的頁面？

當用戶稍後返回到頁面時，瀏覽器會顯示其先前加載的頁面。

當使用SignalR時，一個活動的瀏覽器可以接受來自服務器的推送消息，而當移動設備運行JavaScript時，這很有效，但是當頁面暫停時（由於瀏覽器變爲不活動狀態）不再接收該頁面。

這意味着，當我返回到一個非活動狀態的頁面時，它已過時。它錯過了來自服務器的一些通知。

鑑於來自服務器的消息是非連續的並可能包含所有方式的更新數據，所以最好的方法是在瀏覽器重新激活時強制刷新頁面。

如何檢測頁面的重新激活以觸發刷新？

來源

2017-07-18 Kaine

我沒有使用SignalR，但我希望任何JS客戶端都有一個"reconnect" event的回調方法。這就是你想要強制刷新的地方。這樣，每當移動客戶端丟失並重新獲得連接時，它也會刷新所有數據。

如果重新連接事件不是一個選項，您可以嘗試使用Page Visibility API來確定選項卡何時恢復可見性並強制刷新。

試試這個（Fiddle link for mobile）：

function handleVisibilityChange() { 
 
    if (document.hidden) { 
 
    logMessage('Document hidden.'); 
 
    } else { 
 
    logMessage('Document visible. Trigger refresh.'); 
 
    } 
 
} 
 

 
function logMessage(message) { 
 
    var d = new Date(); 
 
    var timestamp = d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds(); 
 
    var p = document.createElement('p'); 
 
    p.innerText = timestamp + ' - ' + message; 
 
    document.body.appendChild(p); 
 
} 
 

 
document.addEventListener("visibilitychange", handleVisibilityChange); 
 

 
logMessage('Document is ' + document.visibilityState + '. Try minimizing the browser or changing tabs.');

來源

2017-07-18 14:20:37

這些都是很好的想法。我已經使用SignalR的重新連接，但在這種特殊情況下，使用移動瀏覽器事件不會被觸發（即使瀏覽器連接） - 它可能是連接而不是重新連接，但如果我刷新連接。刷新頁面可見性的選項B相當沉重，並且在切換標籤頁（在桌面和移動設備上）時導致頁面刷新，在很多情況下瀏覽器未被暫停，導致不理想的用戶體驗波濤洶涌。 – Kaine

如果您使用SignalR的stateChanged事件，您應該能夠在移動瀏覽器最小化和恢復時查看連接發生了什麼。它是否再次發起連接事件？ –

如何檢測移動瀏覽器何時返回已暫停的頁面？

回答

相關問題