El evento 'beforeunload' se dispara cuando la página se deja en segundo plano en Android

Estoy tratando de hacer una rueda de carga simple que aparece al navegar. Aparece usando un evento 'beforeunload' cuando se aleja y usa el evento 'load' para ocultarse nuevamente cuando termina.

El problema es que cuando dejo la página en segundo plano en mi teléfono, por ejemplo, durante unas horas, el evento 'beforeunload' se dispara y muestra la rueda giratoria. Probablemente porque Chrome en Android está descargando parcialmente la página para ahorrar memoria. Sin embargo, la ruleta no desaparece por sí sola y parece que no puedo entender cómo hacer que desaparezca nuevamente de una manera elegante.

¿Hay algún otro evento que debería usar en su lugar?

    window.addEventListener("load", function() {
        topSpinner.classList.add("closed");
    });

    window.addEventListener("beforeunload", function() {
        topSpinner.classList.remove("closed");
    });

Chrome 68 (julio de 2018) introdujo una nueva API de ciclo de vida de la página : el diagrama de estado suministrado en este enlace no muestra la llamada del sistema (navegador)beforeunload antes de poner la página en el frozenestado, pero eso es claramente lo que está sucediendo.

Con mucha ayuda, la API introdujo dos nuevos eventos que se activan cuando la página entra y sale de este estado: freezeyresume .

He resuelto este problema en las pantallas de Chrome Mobile y Webview simplemente agregando esto:

document.addEventListener('resume', (event) => {
  // The page has been unfrozen: remove the spinner if it's active
 topSpinner.classList.add("closed");
});

Cambiar la lista de eventos de carga para enfocar

He registrado eventos a través de Ajax a la base de datos. Mis pruebas mostraron que no es predecible qué eventos se activaron (es decir, cuando se usa PWA). Hay focus, visibilitychange, resizey beforeunloadparticipan. Me sorprendió cuando encendí la pantalla con PWA activa, a veces beforeunloadson los únicos eventos que se han registrado en la base de datos.

Estoy usando el siguiente código ahora, que parece funcionar sin efectos secundarios:

var visibilityState = 'visible';
window.addEventListener('beforeunload', function(e) {
    if (visibilityState === 'visible') {
        loader.show(e);
    }
});
window.addEventListener('focus', loader.hide);
window.addEventListener('resize', loader.hide);
window.addEventListener('visibilitychange', function(e) {
    visibilityState = document.visibilityState;
    if (visibilityState === 'visible') {
        loader.hide(e);
    }
});

Intente mantener una marca de cargador a través de localStorage, así que si la página se vuelve a cargar, verifique la bandera nuevamente:

Pseudo código a continuación:

$(document).ready(function() {

  $('#loader').hide();
  localStorage.setItem("loader", false);

  window.addEventListener('beforeunload', showLoader);
});

var showLoader = function() {
  var isShow = localStorage.getItem("loader");
  if(!isShow){
      $('#loader').show();
      localStorage.setItem("loader", true);
  }
};