Связь между вкладками браузера: заголовки страниц должны обновляться синхронно для всех вкладок браузера

Question

Что у меня есть: заголовок страницы обновляется динамически, когда новые данные извлекаются из вызова ajax; если посещена вкладка с этой страницей - заголовок устанавливается в значение по умолчанию; если я открою вторую вкладку с этой страницей, заголовок этой вкладки будет установлен по умолчанию (я должен это исправить)

что мне нужно: заголовок страницы должен быть одинаковым для всех вкладок этой страницы. Я имею в виду, заголовок страницы должен обновляться синхронно для всех вкладок.

Моя текущая реализация:

var prevData;
var newRequestsCounter = 0
var getRequests = function(){
          $.ajax({
              async: true,
              type: "GET",
              url: "/get_requests/",
              success: function(data){
                  // retrieve and parse data. i skip this part
                  // newRequestsCounter is updating here
                  var visible = vis();
                  if (visible){
                      newRequestsCounter = 0
                      document.title = 'Default title'
                  } else {
                     if (newRequestsCounter == 0) {
                         document.title = 'Default title'
                     } else {
                         document.title =  'Dynamic title'
                     }
                  }

                  setTimeout(getRequests, 2000)
              }
          });
};

Я пытался с intercom.js, но он не работает должным образом. По какой-то причине intercom.on каждый раз получает разные данные. Например: первый вызов - заголовок по умолчанию, второй вызов - динамический заголовок. Я проверил с отладкой, неправильные данные приходят после выполнения этой строки setTimeout(getRequests, 2000).

var intercom = Intercom.getInstance();

intercom.on('notice', function(data) {
    document.title = data.title;
});
var prevData;
var newRequestsCounter = 0
var getRequests = function(){
          $.ajax({
              async: true,
              type: "GET",
              url: "/get_requests/",
              success: function(data){
                  // retrieve and parse data. i skip this part
                  // newRequestsCounter is updating here
                  var visible = vis();
                  if (visible){
                      newRequestsCounter = 0
                      intercom.emit('notice', {title: 'Default title'});
                  } else {
                     if (newRequestsCounter == 0) {
                         intercom.emit('notice', {title: 'Default title'});
                     } else {
                         intercom.emit('notice', {title: 'Dynamic title'});
                     }
                  }

                  setTimeout(getRequests, 2000)
              }
          });
};

В общем, я не совсем понимаю, возможно ли достичь требуемой функциональности в рамках одного обратного вызова ajax. Я попробовал следующий код. В этом случае переменная "counter" из localStorage увеличивается каждый раз, когда я открываю новую вкладку. Это означает, что если я ожидаю "3" в заголовке для двух вкладок, я получаю "6" с двумя вкладками.

var intercom = Intercom.getInstance();

intercom.on('notice', function(data) {
    document.title = data.title;
});

if (localStorage.getItem("counter") === null){
    localStorage.setItem("counter", 0);
}
var getRequests = function(){
          $.ajax({
              async: true,
              type: "GET",
              url: "/get_requests/",
              success: function(data){
                  // skip part with retrieving and parsing data

                        var counter = localStorage.getItem("counter")
                        localStorage.setItem("counter", ++counter);
                  var visible = vis(); 
                  if (visible){
                      localStorage.setItem("counter", 0);
                      intercom.emit('notice', {title: 'Default'});
                  } else {
                     if (localStorage.getItem("counter") == 0 || localStorage.getItem("counter") === null) {
                         intercom.emit('notice', {title: 'Default'});
                     } else {
                         intercom.emit('notice', {title: '(' + localStorage.getItem("counter") + ') requests'});
                     }
                  }
                  setTimeout(getRequests, 2000)
              }
          });
};
getRequests();

Answer 1

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

var newTab = window.open('/page')
newTab.title = 'New Title';

Answer 2

Вы используете какой-то длинный опрос? Может быть, вы можете синхронизировать эти опросы со временем браузера. Например, опрашивать каждый раз, когда секунды браузера являются четными числами. тогда каждая вкладка должна отправлять свой запрос одновременно и получать (почти) в то же время ответ, чтобы обновить там заголовок