В этом руководстве вы узнаете, как быстро и легко динамически обновлять значок веб-сайта или приложения с помощью Javascript и ReactJS.

Если вы когда-либо использовали какое-либо приложение для обмена сообщениями в своем браузере, вы, вероятно, заметили, как значок вкладки браузера (favicon) внезапно меняется, когда вы получаете сообщение, чтобы уведомить вас, даже если вы находитесь на другой вкладке. Этот вид эффекта полезен для пользователей, а также может повысить уровень вовлеченности для вашего приложения, беспроигрышный вариант. Самое приятное то, что для добавления такого классного эффекта требуется всего несколько строк кода!

Видеоруководство и пример

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

Начиная

Единственное, что вам понадобится для этого урока:

  • Базовая среда веб-разработки
  • 2 изображения, между которыми вы хотите переключаться для стандартной и динамической фавиконы.

В этом руководстве мы будем использовать ReactJS с Create-React-App в качестве начального шаблона, но стандартная настройка HTML/CSS/JavaScript будет очень похожа с точки зрения кода.

Если у вас нет выбранных изображений, вы можете использовать эти изображения в качестве заполнителей:

Настройка фавиконки по умолчанию

Первое, что вам нужно сделать, это перейти на свою индексную страницу и установить изображение, которое вы хотите, в качестве значка вашего сайта по умолчанию. Это можно сделать, создав элемент ссылки в файле index.html элемент заголовка и установив значение rel в значение 'icon', а тег href в путь URL для вашего файл изображения, он должен выглядеть примерно так:

<link id="favicon" rel="icon" href="/path/to/image.png"/

Тег id будет использоваться для захвата этого элемента DOM с помощью Javascript, поэтому мы можем динамически обновлять значение href в зависимости от любого условия, которое вы хотите. В этом уроке мы будем использовать простой счетчик, и наш значок будет зеленым, если счетчик равен 0 или выше, и станет красным, если счетчик отрицательный.

Реализация HTML и логики счетчика с помощью JSX

Далее вам нужно создать базовую структуру HTML и прослушиватели событий для вашего счетчика. Это будет сделано с использованием ReactJS JSX, но его можно легко преобразовать в обычный JavaScript. Bootstrap используется для некоторых базовых стилей.

  1. Для обработки состояния в нашем приложении React мы используем хуки, создавая объект состояния с именем count со значением по умолчанию 0, которое можно обновить с помощью setCount.
  2. Далее у нас есть наша функция приращения, которая принимает текущее состояние и добавляет 1
  3. Эта функция аналогична приращению, но вычитает из нашего значения счетчика.
  4. Базовая структура приложения, контейнер div, содержащий заголовок, тег H2, который будет динамически изменяться, чтобы показать наш текущий счет, и 2 кнопки для увеличения и уменьшения нашего счета.

Обновить Favicon на основе текущего значения счетчика

Теперь, когда основная настройка завершена, мы можем, наконец, изменить наш значок, используя это значение счетчика. Для этого мы создадим хук useEffect для проверки нашего значения счетчика и изменения значка в зависимости от заданного нами условия.

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

  • Новое сообщение добавлено в массив состояний
  • Обновление состояния игры окончено
  • Уведомления об ошибках

Более продвинутым вариантом использования может быть имитация анимированного фавикона путем постоянного циклического перебора массива изображений. Чтобы быть более эффективным, вы также можете использовать Canvas API, чтобы настроить фавикон по умолчанию, а затем преобразовать его обратно в изображение. Это можно использовать для постоянного увеличения количества сообщений на значке для чего-то вроде приложения для чата, чтобы пользователь мог видеть по значку, сколько сообщений он ожидает.

Вывод

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