L'événement "beforeunload" se déclenche lorsque la page est laissée en arrière-plan sur Android

Question

J'essaie de créer un spinner de chargement simple qui s'affiche lors de la navigation. Il s'affiche en utilisant un événement "beforeunload" lors de la navigation et utilise l'événement "load" pour se cacher à nouveau lorsqu'il a terminé.

Le problème est que lorsque je laisse la page en arrière-plan sur mon téléphone pendant quelques heures, par exemple, l'événement "beforeunload" se déclenche et affiche le compteur rotatif. Probablement parce que Chrome sur Android décharge partiellement la page pour économiser de la mémoire. Cependant, le compteur ne disparaît pas de lui-même et je n'arrive pas à trouver comment le faire disparaître de manière élégante.

Y a-t-il un autre événement que je devrais utiliser à la place ?

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

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

Answer 1

Chrome 68 (juillet 2018) a introduit une nouvelle API de cycle de vie des pages : le diagramme d'état fourni dans ce lien ne montre pas le Système (navigateur) appelant beforeunload avant de mettre la page dans le frozen mais c'est clairement ce qui se passe.

Heureusement, l'API a introduit deux nouveaux événements qui se déclenchent lorsque la page entre et sort de cet état : freeze y resume .

J'ai résolu ce problème à la fois sur les écrans de chrome mobile et de webview en ajoutant simplement ceci :

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

Answer 2

Changez le listage de l'événement de chargement en focus

Answer 3

J'ai enregistré les événements via Ajax dans la base de données. Mes tests ont montré qu'il n'est pas possible de prévoir quels événements ont été déclenchés (par exemple, lors de l'utilisation de la PWA). Il y a focus , visibilitychange , resize y beforeunload impliqué. J'ai été surpris par le fait que lorsque l'on allume l'écran avec une PWA active, parfois beforeunload est le seul événement qui a été enregistré dans la base de données.

J'utilise actuellement le code suivant, que j'ai trouvé à l'adresse suivante Kleiderliebe qui semble fonctionner sans effets secondaires :

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

Answer 4

Essayer de faire persister un drapeau de chargeur via localStorage Ainsi, si la page est ensuite rechargée, vérifiez à nouveau le drapeau :

Pseudo code ci-dessous :

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