выполнить событие непосредственно перед сменой страницы

Question

У меня есть приложение React. В этом приложении реакции у меня есть определенные события нажатия кнопки, которые запускаются непосредственно перед изменением страницы (событие аналитики)

  sendEvent('xyz')
  let win = window.open(`${PAGE_PATHS.dashboard}`, "_self");
                if (win !== null) {
                    win.focus();
                }

Где событие

async event(name, data) {
    await this.sendEvent(name, data)
}

Где sendEvent () равно

async sendEvent(name, data) {
// some code
axios.post(url, payload, userConfig)
return 
}

Теперь из-за текущей структуры события иногда не регистрируются. Есть две вещи, которые я мог бы сделать здесь.

1. Используйте await, но я не хочу этого делать, потому что отправка события и получение ответа могут занять некоторое время (пользовательский опыт), и мне наплевать на ответ
2. Используйте setTimeout.

Почему-то мне не нравится ни один из подходов. Есть ли способ, я могу иметь задачу для выполнения (если она не завершена), даже после того, как веб-страница изменилась, это href? может быть, с помощью службы или веб-работника

Answer 1

То, что вы делаете, обычно называется «отправка маяка», и в веб-стандартах есть метод, специально для этого случая: Navigator.sendBeacon().

Этот метод позволит ваш сценарий для отправки запроса на веб-сервер, даже после того, как страница была убита.

Я не топор ios ниндзя, поэтому я не могу сказать вам, как его следует переписать для выполнения то же самое, но, безусловно, может.
Базовое c использование:

navigator.sendBeacon(url, data);

, где data может быть ArrayBuffer, TypedArray, Blob, a DOMString, FormData или URLSearchParams объект.