Safari non esegue la funzione di richiamata su refresh/onbeforeunload sul lato server (chiama il codice lato client)

Question

Sto tentando di inviare alcune richieste al database quando la finestra viene scaricata (ad esempio quando si aggiorna la pagina). Per qualche ragione, solo su Safari, il codice lato client viene eseguito, ma la richiesta al server non viene mai eseguita. Quando passo il codice manualmente nel debugger, il server riceve la richiesta e la elabora.

Qualcuno sa perché questo sta accadendo?

window.onbeforeunload = function() { 
 
    console.log("inside on before unload"); 
 
    var requestParam = new a.ListRequest(); 
 
    requestParam.setAction('set_delete'); 
 
    
 
    var callback = function(isSuccess, response) { 
 
    if (isSuccess) { 
 
     //do something 
 
    } else { 
 
     // do something else 
 
    } 
 
    }; 
 
    
 
    // Sends request to server 
 
    a.Fetch.list(requestParam, callback); 
 
    
 
}

Answer 1

Probabile la richiesta che avviene nella chiamata Fetch è asincrona e Safari non è in attesa che venga completata prima di passare alla pagina successiva/chiudere la scheda. Se è possibile effettuare la chiamata sincrona, dovrebbe funzionare. Tieni presente che le chiamate sincrone sono generalmente scoraggiate e deprecate in alcuni strumenti.

Questa risposta relative al Jquery ha una buona spiegazione di chiamate sincrone: https://stackoverflow.com/a/11755262/1341437

Answer 2

È possibile utilizzare Beacon API (FF, Chrome, Opera):

window.addEventListener('unload', logData, false); 

function logData() { 
    navigator.sendBeacon("/log", analyticsData); 
} 

Gli interpreti saranno tipicamente ignorare asincrono XMLHttpRequests realizzati in un gestore di scarico. Per risolvere questo problema, il codice analitico e diagnostico tipicamente esegue un XMLHttpRequest sincrono in un gestore unload o beforeunload per inviare i dati. Il sincrono XMLHttpRequest obbliga l'agente utente a ritardare lo scaricamento del documento e rende la navigazione successiva più lenta. Non c'è nulla che la prossima pagina possa fare per evitare questa percezione della scarsa performance del caricamento della pagina.

Utilizzando il metodo sendBeacon(), i dati verranno trasmessi in modo asincrono al server Web quando l'agente utente ha avuto la possibilità di farlo, senza ritardare lo scaricamento o influenzare le prestazioni della successiva navigazione.

Answer 3

si può fare con jQuery.ajax da impostare la proprietà async su false async:false

window.onbeforeunload = function() { 
    $.ajax({ 
     // Query to server 
     async:false, 
     method: "GET", 
     url: "your.page", 
     data: { param1 : "value1" } 
    }).done(function(jqXHR, textStatus) { 
     // Verify good data 
     // Do stuff 
     alert("Request done: " + textStatus); 
    }).fail(function(jqXHR, textStatus) { 
     alert("Request failed: " + textStatus); 
    }); 
} 

Answer 4

Come @craigts detto, il browser è andato prima che la chiamata ajax può essere restituito. Potresti avere ancora qualche secondo in quella pagina.

window.onbeforeunload = function(e) { 
    return 'Dialog text here.'; 
}; 

Tuttavia, gli utenti troveranno questo fastidioso.

Seconda opzione, trova un altro evento invece di attendere che la pagina venga scaricata. Cattura i tuoi dati continuamente. Catturalo su Change. L'utente utilizzerà un collegamento per continuare? In tal caso, è possibile dirottare il collegamento con cancelEvent() e continuare dopo che l'ajax è tornato.