O evento 'beforeunload' é acionado quando a página é deixada em segundo plano no Android

Estou tentando fazer um girador de carregamento simples que aparece ao navegar. Ele aparece usando um evento 'beforeunload' ao navegar para longe e usa o evento 'load' para se esconder novamente quando terminar.

O problema é que, quando deixo a página em segundo plano no telefone por algumas horas, o evento 'beforeunload' é acionado e exibe o botão giratório. Provavelmente porque o Chrome no Android está descarregando parcialmente a página para economizar memória. O spinner não desaparece por si só e não consigo descobrir como fazê-lo desaparecer novamente de uma maneira elegante.

Existe algum outro evento que eu deveria estar usando?

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

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

O Chrome 68 (julho de 2018) introduziu uma nova API de ciclo de vida da página : o diagrama de estado fornecido neste link não mostra a chamada do sistema (navegador) beforeunloadantes de colocar a página no frozenestado, mas é claramente o que está acontecendo.

Felizmente, a API introduziu dois novos eventos que são acionados quando a página entra e sai desse estado: freezee resume.

Resolvi esse problema nos displays Chrome e WebView para dispositivos móveis simplesmente adicionando:

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

Mude o listerner do evento de carregamento para focar

Registrei eventos via Ajax no banco de dados. Meus testes mostraram que não é previsível quais eventos foram acionados (por exemplo, ao usar o PWA). Há focus, visibilitychange, resizee beforeunloadenvolvidos. Fiquei surpreso ao ativar a tela com o PWA ativo, às vezes beforeunloadé o único evento registrado no banco de dados.

Estou usando o seguinte código agora, que parece funcionar sem efeitos colaterais:

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);
    }
});

Tente manter um sinalizador de carregador via localStorage, portanto, se a página for recarregada, verifique o sinalizador novamente:

Pseudo código abaixo:

$(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);
  }
};