Как сделать чтобы вкладка сайта всегда была активной?

Question

[Eviston]

Создаем один проект, в котором есть чат личных сообщений свой внутренний мессенджер.. Пока вкладка сайта активна человек получает звуковое уведомление на сайте о новых сообщения и т.д. Но через некоторое время вкладка сайта престает быть активной и соответственно пропадаю уведомления. Надо сделать что бы она была всегда активно и человек получал уведомление как в том же вк.
Используем Vue.js php

Answer 1

[Владимир Юрченков]

Ну что-то вроде, если с передачей параметра tab в url... в head

<script>
function setActiveTab(tabId) {
  localStorage.setItem("activeTab", tabId);
}

function getActiveTab() {
  return localStorage.getItem("activeTab");
}
</script>

Для вкладки нужно создать компонент

<template>
  <li :class="{ active: isActive }" @click="setActiveTab">
    <a href="#">Моя вкладка</a>
  </li>
</template>

<script>
export default {
  computed: {
    isActive() {
      return this.id === this.getActiveTab();
    },
  },
  methods: {
    setActiveTab() {
      setActiveTab(this.id);
    },
    getActiveTab() {
      return getActiveTab();
    },
  },
  props: ["id"],
};
</script>

В самом приложении Vue.js добавить код на странице с вкладками... типо

<template>
  <div>
    <ul>
      <my-tab id="tab-1" />
      <my-tab id="tab-2" />
      <my-tab id="tab-3" />
    </ul>
  </div>
</template>

<script>
import MyTab from "./MyTab";
export default {
  components: {
    MyTab,
  },
  mounted() {
    const activeTab = getActiveTab() || "tab-1"; // по умолчанию, активна будет первая вкладка
    setActiveTab(activeTab);
  },
};
</script>

Ну и в PHP где идет генерация заголовка вкладки, добавить:

<title>
<?php
$tabId = $_GET["tab"];
if ($tabId) {
  echo $tabs[$tabId]["title"];
} else {
  echo $tabs["tab-1"]["title"]; // по умолчанию активна первая вкладка
}
?>
</title>

То есть юзаем localStorage, чтобы сохранить id активной вкладки между сеансами. Чтобы на сервере еще это хранить, нужно будет подрубить сессию для выбранной вкладки.