Выполнить вызов API сервера перед выгрузкой / Ограничения при выгрузке страницы?

Question

Приведенный ниже код используется для работы в chrome и внезапно остановлен из-за недавнего изменения chrome «Disallow syn c XHR in dismissing». Недавнее обновление Crome в начале апреля 2019 года, я думаю, Chrome 73.0.3683.103 остановило эту функцию, и они предложили sendBeacon или получить keepalive. Я опубликую то, что я попробовал, так что это может помочь кому-то еще.

https://www.chromestatus.com/feature/4664843055398912

$(window).on('beforeunload', function (e) {
     //ajax call used work in Chrome 
}

https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

Я знаю, что есть несколько связанных постов, связанных с той же ситуацией, но все еще не мог найти решение. Я попробовал несколько способов сделать серверный вызов.

Шаг 1:

$(window).on('beforeunload', function (e) {
 if (navigator.sendBeacon) {
    navigator.sendBeacon('url', 'data');
 } else {
    $.ajax({
        type: 'POST',
        url: 'url',
        data: null,
        contentType: 'application/json;',
        async: false
    });
 }
}

Это не сработало из-за типа контента - application- json

Шаг 2 :

$(window).on('beforeunload', function (e) {
 var data = { ajax_data: 22 };
 var blob = new Blob([JSON.stringify(data)], {type : 'application/json'});
 navigator.sendBeacon('url', blob);
}

Этот код не работал, поскольку sendBeacon поддерживает только эти типы контента

• multipart / form-data
• application / x- www-form-urlencoded
• текст / обычный

Шаг 3:

 $(window).on('beforeunload', function (e) {
  if (fetch) {
    fetch(url, {
        method: "POST", headers: { "Content-Type": "application/json" } 
    }).then(function (response) {
        console.log(response.statusText);
    }).then(function (response) {
        console.log(response.statusText);
    });
    return false;
 } else {
    $.ajax({
        type: 'POST',
        url: 'url',
        data: null,
        contentType: 'application/json;',
        async: false
    });
 }
}

Этот код работает !. Но только когда вы нажимаете на ссылку на странице или нажимаете кнопку «Выйти». Мне нужно работать над этим методом сервера, когда пользователь покидает страницу, нажимая на ссылку, выход из системы, закрытие вкладки и закрытие браузера.

Шаг 4:

$(window).on('beforeunload', function (e) {
     e.stopPropagation();
     e.preventDefault();
     fetch('url', { method: 'POST', headers: { 'Content-Type': 'application/json' } }); 
}

Это покажет всплывающее окно «Покинуть сайт?», я не хочу, чтобы пользователь отображал какое-либо всплывающее окно.

Шаг 5:

$(window).on('beforeunload', function (e) {
      setTimeout(function ()
      {
           fetch('url', { method: 'POST', headers: { 'Content-Type': 'application/json' } });        
      }, 3000);
      return false;
}

Также как на шаге 4, отображается «Покинуть сайт» popup. "

Сейчас у меня заканчиваются варианты, и я пока не могу найти решение. Любая помощь приветствуется. Мне нужно вызвать сервер перед тем, как выгрузить страницу, нажав на ссылку, выйти из системы, закрыть вкладку, закрыть браузер. Приведенный выше код будет работать, если вы установите точку останова, а это означает, что для отправки вызова на сервер до выгрузки страницы требуется некоторая задержка. Я не против поставить тайм-аут, если пользователь не видит всплывающее окно, например «Покинуть сайт?»