Evento Javascript per il riavvio del browser mobile o dispositivo wake

Question

Buongiorno a tutti, sto cercando una specie di evento Javascript che posso utilizzare per rilevare quando una finestra del browser mobile riprende a fuoco, dopo che un utente chiude/minimizza il browser (per tornare a una schermata principale/un'altra app) o se il dispositivo viene riattivato dallo stato di sospensione (spegnendolo o spegnendolo dopo un timeout dello schermo).

Mi piacerebbe essere in grado di trovare un singolo evento che funzioni per tutto, ma so che è improbabile! L'evento pageshow funziona per dispositivi iOS, ma è piuttosto abbozzato per l'uso con tutto il resto. Ho provato focus e DOMActivate ma nessuno di loro sembra avere l'effetto desiderato.

La pagina potrebbe non contenere sempre degli elementi di forma e non voglio che l'utente debba toccare nuovamente la pagina per attivare l'evento.

Il requisito per tale evento è causato dal nostro codice che verifica periodicamente nuovi contenuti effettuando richieste XHR. Questi non vengono mai inviati quando il browser è in sospensione, quindi non abbiamo mai ricevuto nuovi contenuti per riavviare i timeout.

Grazie per l'aiuto che ragazzi siete in grado di fornire!

Answer 1

Abbiamo avuto un problema simile e risolto qualcosa di simile:

var lastSync = 0; 
var syncInterval = 60000; //sync every minute 

function syncPage() { 
    lastSync = new Date().getTime(); //set last sync to be now 
    updatePage(); //do your stuff 
} 

setInterval(function() { 
    var now = new Date().getTime(); 
    if ((now - lastSync) > syncInterval) { 
    syncPage(); 
    } 
}, 5000); //check every 5 seconds whether a minute has passed since last sync 

In questo modo si dovrebbe sincronizzare ogni minuto se la pagina è attiva, e se si mette il browser in modalità di standby per più di un minuto, al massimo 5 secondi passeranno prima di sincronizzare nuovamente all'apertura del browser. Brevi intervalli potrebbero scaricare la batteria più di quanto desideri, quindi tienilo a mente quando adegui i tempi alle tue necessità.

Answer 2

Meglio di un intervallo sarebbe aggiungere un listener di sfocatura di finestra e un listener di messa a fuoco di finestra. On blur, registra l'ora corrente. In primo piano, conferma di essere ancora loggato/sincronizzato/qualsiasi cosa tu debba fare.

Fondamentalmente esattamente la stessa cosa, ma funziona solo se necessario invece di rallentare l'intera pagina con un intervallo.

Aggiornamento

var $window = $(window), 
    $window.__INACTIVITY_THRESHOLD = 60000; 

$window.add(document.body); //necessary for mobile browsers 

$window.declareActivity = function() { $window.__lastEvent = new Date(); }; 

$window.blur($window.declareActivity); 
$window.focus(function(){ 
    var diff = (new Date()) - $window.__lastEvent; 
    if (diff > $window.__INACTIVITY_THRESHOLD) { 
    $window.trigger("inactivity"); 
    } 
}); 

$window.on("inactivity", "", null, function() { 
    //your inactivity code 
}); 

Anche se questo evento sfocatura sembra impreciso se il telefono si sta spegnendo e non so che avrei fiducia in tutte le circostanze/i dispositivi mobili. Quindi probabilmente sarei buttarmi in qualcosa di simile:

$(document.body).on("click scroll keyup", "", null, $window.declareActivity); 

modo che il mio timer di inattività lavora per quando l'utente si allontana proprio così. A seconda del tuo sito, potresti voler regolare quell'esatto elenco di eventi - o semplicemente gettare in una $ window.declareActivity(); nei tuoi script esistenti che rispondono agli input dell'utente.