Sự kiện 'beforeunload' kích hoạt khi trang còn lại trong nền trên Android

Tôi đang cố gắng tạo một công cụ tải spinner đơn giản bật lên khi điều hướng. Nó xuất hiện bằng cách sử dụng sự kiện 'tải trước' khi điều hướng đi và sử dụng sự kiện 'tải' để ẩn lần nữa khi nó được thực hiện.

Vấn đề là khi tôi để trang dưới nền trên điện thoại của mình, ví dụ như một vài giờ, sự kiện 'beforeunload' sẽ hiển thị và hiển thị công cụ quay vòng. Có lẽ vì Chrome trên Android đang tải một phần trang để tiết kiệm bộ nhớ. Con quay không tự biến mất và dường như tôi không thể tìm ra cách làm cho nó biến mất một lần nữa một cách tao nhã.

Có sự kiện nào khác tôi nên sử dụng thay thế?

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

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

Chrome 68 (tháng 7 năm 2018) đã giới thiệu API Vòng đời Trang mới : sơ đồ trạng thái được cung cấp trong liên kết này không hiển thị cuộc gọi Hệ thống (trình duyệt) beforeunloadtrước khi đưa trang vào frozentrạng thái, nhưng đó rõ ràng là những gì đang xảy ra.

Thật hữu ích, API đã giới thiệu hai sự kiện mới kích hoạt khi trang đi vào và thoát khỏi trạng thái này: freezevà resume.

Tôi đã giải quyết vấn đề này trên cả màn hình chrome và webview di động chỉ bằng cách thêm:

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

Thay đổi danh sách sự kiện tải để tập trung

Tôi đã đăng nhập các sự kiện thông qua Ajax vào cơ sở dữ liệu. Các thử nghiệm của tôi cho thấy, không thể dự đoán được sự kiện nào đã được kích hoạt (tức là khi sử dụng PWA). Có focus, visibilitychange, resizevà beforeunloadcó liên quan. Tôi đã rất ngạc nhiên khi bật màn hình với PWA hoạt động, đôi khi beforeunloadlà sự kiện duy nhất đã được đăng nhập vào cơ sở dữ liệu.

Tôi đang sử dụng mã sau đây, có vẻ như hoạt động mà không có tác dụng phụ:

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

Cố gắng duy trì cờ trình tải thông qua localStorage, vì vậy nếu trang sau đó được tải lại, hãy kiểm tra lại cờ:

Mã giả dưới đây:

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