Не устанавливается слушатель события при инициализации главного компонента Vue js. Почему так происходит?

Question

[barankaescape]

Я пытаюсь сделать приложение для telegram на vue js и сталкиваюсь с проблемой при использовании события beforeunload.

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

const sendLogoutRequest = () => {
  fetch("http://localhost:3000/lastauth", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      userId: userStore.user.userId,
      authToken: userStore.authToken,
    }),
  }).catch((err) => {
    console.error("Ошибка при отправке запроса:", err);
  });
};

onMounted(async () => {
...
window.addEventListener("beforeunload",  sendLogoutRequest);
})

onBeforeUnmount(() => {
window.removeEventListener("beforeunload", sendLogoutRequest);
})

API телеграма не предоставляет никаких подобных методов и ивентов. В чем может быть причина? В асинхронности монтирования главного компонента?

Comments

[szQocks]

тебе вообще не нужен logout в телегам мини апп, и тем более не нужно его вызывать на beforeunload

[barankaescape]

szQocks, а что нужно? Можно развить мысль?

[szQocks]

barankaescape, нужен только логин и авторизация, выход там не предусматривается вообще, выход это всё равно что равноценно что пользователь закрыт веб-апп, тогда зачем вообще этот запрос отправлять - не имеет смысла

[barankaescape]

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

[szQocks]

barankaescape, ладно, расскажи зачем тебе это и я скажу почему это тебе не нужно

[szQocks]

barankaescape, и то что там в тг браузере что-то не работает - этому не стоит удивляться, они клали большой болт на все эти международные стандарты браузеров

[barankaescape]

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

[szQocks]

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

[barankaescape]

ты намекаешь на то, что лучше устанавливать постоянное соединение с сервером. поверь у меня не такой большой опыт как у тебя. и да вопрос решен. телеграм просто как ты и говорил болт кладет, но я придумал как можно это обойти

[szQocks]

barankaescape,

ты намекаешь на то, что лучше устанавливать постоянное соединение с сервером

это один из вариантов

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

- ну напиши в ответ как решил ,может кому-нибудь когда-нибудь поможет

Answer 1

[barankaescape]

Значит ответ до боли прост. Если запускаете приложение в дев моде, то в телеграмовском браузере надо 10 раз дождаться, пока оно отлагает. То ли дело в ngrok, то ли в самом телеграмовском браузере(скорее второе, потому что в хроме все работает великолепно).

В итоге обработчик добавил в onMounted замыкающим звеном, после всех других функций. ВАЖНО!!! обязательно ставить после метода webapp.ready(), который просят вызывать как можно раньше (хотя в документации к сдк говорят вызывать его как можно раньше с поправкой на полную инициализацию приложения).

Answer 2

[Aetae]

Во-первых: вопрос не относится к vue.

Во-вторых: что скрыто за троеточием перед добавлением обработчка? Скорее всего что-то там сыпется и до навешивания просто не доходит.

В-третьих: beforeunload - не надёжен и может вызываться не всегда, в доках рекомендуют к нему не привязываться и по возможности использовать visibilitychange.

В-четвёртых: стандартные http запросы в beforeunload ещё более ненадёжны, доки рекомендуют использовать navigator.sendBeacon.