Angular 5 - Как сделать вызов API, когда пользователь закрывает окно браузера?

Question

У меня есть механизм отслеживания, с помощью которого я отправляю объекты JSON конечной точке API во время пребывания пользователя на веб-странице.Поэтому я отправляю вызовы API для некоторых конкретных событий.API должен принимать вызов, когда пользователь покидает страницу.

Проблема заключается в том, что я использую функции ниже для запуска, когда пользователь закрывает броузер, но функции запускаются только в режиме отладки браузера.

// page-wrapper.component.ts ... // triggers on DOM unload @HostListener('window:unload', ['$event']) unloadHandler(event) { this.service.apiCall(); // this is nevertriggered console.log('unloaded DOM') // triggered only in browser debug mode } // triggers just before unloadHandler() @HostListener('window:beforeunload', ['$event']) beforeUnloadHander(event) { this.service.apiCall(); // same as above }

Итак, я попробовал оба метода.Если я отлаживаю их, методы, кажется, запущены, но API не получают ничего.

Я могу убедиться, что функция, которая связывается с API, была протестирована и у нее нет проблем.

Я думаю, что проблема связана с unloadHandler() или beforeUnloadHandler().

Кто-нибудь знает, как вызвать API, когда пользователь закрывает окно браузера или вкладку браузера?

Примечание. Приложение может находиться на отдельной вкладке браузера или в фрейме.

Answer 1

Благодаря @Francesco я пришел к следующему выводу:

Невозможно гарантировать, что при каждом выходе пользователя из страницы браузера будет запускаться определенная функция. Причина в том, что браузер может закрыть окно по многим причинам. Да, это может быть действие пользователя, но это не единственный случай. Например, браузер может зависнуть.

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

Answer 2

Вы можете попробовать это в своем app.component.ts:

window.addEventListener('beforeunload', (e) => {
  yourApiCall();
});

Я использовал это для отображения сообщения перед выгрузкой страницы ..