Как сделать мигающее уведомление во вкладке браузера?

Question

[Арсений]

На сайте нужно сделать уведомление о новых сообщениях, если открыта вкладка сайта (активна или неактивна неважно), для этого title во вкладке браузера должен мигать (У вас {n} новых сообщений) и сопровождаться звуковым сигналом. Типа как это сделано у VK, Одноклассников и тд.
Каким образом можно получать информацию что есть новые сообщения, слать запрос с интервалом в несколько секунд? И как подойти к реализации мигающего заголовка и звуковому сигналу?

Answer 1

[Григорий Боев]

var titleState=0;
setInterval(()=>{
document.title=titleFlag?"Мигающий":"заголовок";
titleState = titleState?0:1;
},500);

Comments

[freeExec]

Мигают то фоном, а не текстом.

[Кирилл Горелов]

freeExec, Раз уж на то пошло дело, то не фоном, а фавиконкой)
Тут же можно изменять и url иконки на соответствующий....

Answer 2

[Владимир]

https://developer.mozilla.org/en-US/docs/Web/API/D...
https://developer.mozilla.org/en-US/docs/Mozilla/A...
https://developer.mozilla.org/en-US/docs/Web/API/C...
https://developer.mozilla.org/en-US/docs/Web/API/n...

Это все касается интерактивной части уведомлений, а как получать уведомления с сервера вам уже описали.

Answer 3

[Vindicar]

Во-первых, это два разных вопроса.
По поводу мигания вам уже написали.
А вот по поводу получения уведомления есть разные способы, все они потребуют фоновых запросов, чтобы не блокировать вкладку.
Простейший пример - polling. Каждые несколько секунд шлем запрос на сервер "а есть ли новые сообщения?", на что сервер отвечает либо "нету" либо отдаёт список новых сообщений. Просто, но грузит сеть, жрёт батарейку, грузит сервер.
Чуть сложнее - long polling. Мы шлём запрос "есть ли новые сообщения?" на сервер с длинным таймаутом, скажем, несколько минут. Если сообщений нет, сервер молчит, но запрос не прерывает. Он только у себя время от времени проверяет их наличие. Как только сообщение появилось, сервер шлёт ответ и закрывает соединение.
Когда клиент получил ответ или когда случился таймаут, клиент запускает новое соединение и снова ждёт ответа.
Ну или использовать web sockets - ЕМНИП, когда соединение установлено, сервер может уже послать что-то по своей инициативе. Но это нужно изучать.

Comments

[Арсений]

Спасибо! Именно такой экспертной оценки и хотелось