У нас используется для веб аналитики, но есть нюанс, некоторые браузеры "молодцы", и ради борьбы со слежкой блочат sendBeacon, но ладно блочить, иногда его просто нет в navigator. Поэтому во первых приходится проверять его наличие, даже в современных браузерах. А во вторых, мы делаем try/catch, и заодно проверяем результат true/false. Если не вышло, то дублируем через fetch. Да, это не спасет при закрытии вкладки, но зато основные логи будут отправлены)
Для fetch можно использовать keepalive параметр. Сработает аналогично sendBeacon, но можно будет изменять параметры запроса, например, использовать метод GET. До недавнего времени не поддерживался Firefox, но mdn пишет, что уже завезли, не проверял.
«fetch отменяется если страница в браузере была закрыта, но это не точно» Почему бы просто локально не запустить клиент с запросом, написать бэк и закрыть вкладку. То есть почему просто не проверить?) А то объясняются преимущества, но гипотетические какие-то
такой простой тест я то провел. Но из опыта моего канала, люди потом приходят и говорят, что "ты просто не указал вот эту опцию или вон ту опцию, чтобы заработало". Настолько глубоких познаний в сетевых протоколах у меня нет
Поделитесь опытом, как гарантировано отправить данные на сервер в случае закрытия/перезагрузки вкладки? В интерфейсе есть форма, в которой изменения (если они имеются) сохраняются автоматом раз в 10 секунд. И вот если вкладка закрывается до истечения 10 секунд, то требуется отправить изменения на сервер. Привычные способы тут не подходят, т.к. современные браузеры прерывают запросы при закрытии вкладки.
Единственное что приходит в голову - это вызов window.confirm() при попытке закрытия, запустив сохранение перед ним. Вроде бы еще работает, недавно встречал где-то. Неприятный для пользователя вариант, но лучше чем потерять изменения. Тут только надо проверить не блокируется ли запрос после вызова window.confirm(). Никогда так не делал сам, поэтому не знаю точно. Еще как вариант - через Service worker это делать. Он умеет работать после закрытия вкладки, так что в теории возможно сохранять через него.
Комментарии и лайк только ради продвижения канала. А тема по важности, ну, такая себе. Вряд-ли я буду где-то это применять. Даже если мне нужен будет такой запрос, я воспользуюсь стандартным запросом
Вставлю 5 копеек, тоже юзаю beacon для отправки аналитики, столкнулся со странным поведением в Хроме: при отправке тяжелых запросов (выше 64KB), запрос продолжает висеть на вкладке Network в статусе 'pending', хотя по факту он возвращает false и не отправляется.
А какую проблему решает этот Beacon? Никогда не упирался в количество подключений на стороне клиента. Экономия памяти? А при закрытии вкладки кажется разницы нету, если сервер данные получил и начал обрабатывать - уже не важно закрылся ли клиент, или нет. Если закрылся - он просто не получит ответ
ну тут несколько моментов. У браузера же есть лимит на максимальное количество подключений, порядка 8 запросов на http1. А при закрытии если backend до того как положит в базу получит сигнал, что запрос прерван, то выполнение кода на бэке должно тоже прерваться
Встречался я с этой штукой недавно, делаю чисто для себя что то типо тг - и захотел я отмечать в сети ли человек или нет, но к сожалению ничем не помог мне это апи, так как использую firebase store, и как их связать, не понял. По этому просто использую beforeunload делаю запрос для updateDoc, а на unload вешаю цикл и вкладка типо виснет перед закрытием, зато документ обновляется)) Хз как это сделать красивее, но мне норм
У нас используется для веб аналитики, но есть нюанс, некоторые браузеры "молодцы", и ради борьбы со слежкой блочат sendBeacon, но ладно блочить, иногда его просто нет в navigator.
Поэтому во первых приходится проверять его наличие, даже в современных браузерах. А во вторых, мы делаем try/catch, и заодно проверяем результат true/false. Если не вышло, то дублируем через fetch.
Да, это не спасет при закрытии вкладки, но зато основные логи будут отправлены)
спасибо, что поделились опытом!
Я хз что писать, но я знаю что комментарии выводят выдос в топ. За видос спасибо))
спасибо за поддержку канала!)
Расскажи про разницу с keep-alive: true, пожалуйста
Для fetch можно использовать keepalive параметр. Сработает аналогично sendBeacon, но можно будет изменять параметры запроса, например, использовать метод GET. До недавнего времени не поддерживался Firefox, но mdn пишет, что уже завезли, не проверял.
keepAlive просто не закрывает соединение. Не очень понял чем это похоже на beacon?
@@yivo89 событие улетит при выгрузке странице, этим и похоже. Что не понятного?
«fetch отменяется если страница в браузере была закрыта, но это не точно» Почему бы просто локально не запустить клиент с запросом, написать бэк и закрыть вкладку. То есть почему просто не проверить?) А то объясняются преимущества, но гипотетические какие-то
такой простой тест я то провел. Но из опыта моего канала, люди потом приходят и говорят, что "ты просто не указал вот эту опцию или вон ту опцию, чтобы заработало". Настолько глубоких познаний в сетевых протоколах у меня нет
Спасибо за информацию! 👍 к продвижению канал
Активно используем на проекте, очень классная штука для тех.метрик и для отправки вебвиталс метрик. Быстро, удобно и легко)
Поделитесь опытом, как гарантировано отправить данные на сервер в случае закрытия/перезагрузки вкладки?
В интерфейсе есть форма, в которой изменения (если они имеются) сохраняются автоматом раз в 10 секунд.
И вот если вкладка закрывается до истечения 10 секунд, то требуется отправить изменения на сервер.
Привычные способы тут не подходят, т.к. современные браузеры прерывают запросы при закрытии вкладки.
Единственное что приходит в голову - это вызов window.confirm() при попытке закрытия, запустив сохранение перед ним. Вроде бы еще работает, недавно встречал где-то. Неприятный для пользователя вариант, но лучше чем потерять изменения. Тут только надо проверить не блокируется ли запрос после вызова window.confirm(). Никогда так не делал сам, поэтому не знаю точно.
Еще как вариант - через Service worker это делать. Он умеет работать после закрытия вкладки, так что в теории возможно сохранять через него.
ну если нужно прям гарантированно, то вероятно через сервис воркер только. При закрытии отдаете данные и он там уже доварится
Спасибо, было познавательно. Может где и пригодится!
А как такого анимированного аватара сделать? с помощью чего?
Комментарии и лайк только ради продвижения канала. А тема по важности, ну, такая себе. Вряд-ли я буду где-то это применять. Даже если мне нужен будет такой запрос, я воспользуюсь стандартным запросом
Берёшь Хлеб API ,кладёшь на Бекон API и получаешь Fast Product API
Братан, ты наверное еще junior раз забыл полить это все Горчицей API или Кепчук API.
Какие костыли только не придумают, чтоб TCP обойти
Вставлю 5 копеек, тоже юзаю beacon для отправки аналитики, столкнулся со странным поведением в Хроме: при отправке тяжелых запросов (выше 64KB), запрос продолжает висеть на вкладке Network в статусе 'pending', хотя по факту он возвращает false и не отправляется.
спасибо что поделились интересным кейсом!
Разве это не справедливо только для хттп 1.1?
А какую проблему решает этот Beacon? Никогда не упирался в количество подключений на стороне клиента. Экономия памяти?
А при закрытии вкладки кажется разницы нету, если сервер данные получил и начал обрабатывать - уже не важно закрылся ли клиент, или нет. Если закрылся - он просто не получит ответ
ну тут несколько моментов. У браузера же есть лимит на максимальное количество подключений, порядка 8 запросов на http1. А при закрытии если backend до того как положит в базу получит сигнал, что запрос прерван, то выполнение кода на бэке должно тоже прерваться
Предлагаю из анимации лайк-подписка-колокольчик убрать иконку дизлайка. Не надо показывать зрителю нежелательные действия 😀
Встречался я с этой штукой недавно, делаю чисто для себя что то типо тг - и захотел я отмечать в сети ли человек или нет, но к сожалению ничем не помог мне это апи, так как использую firebase store, и как их связать, не понял. По этому просто использую beforeunload делаю запрос для updateDoc, а на unload вешаю цикл и вкладка типо виснет перед закрытием, зато документ обновляется))
Хз как это сделать красивее, но мне норм
а почему бы не использовать udp? оч надеялся что это для него апи, а эт костыль какой то... но спасибо за инфу
Эмм... Нет, это хрень, а не "интересно"