00:00:00Я только что наткнулся на очень крутой пакет, который добавляет небольшую, но классную деталь вашим сайтам,
00:00:04о которой я даже не подозревал, что хочу её, до этого момента.
00:00:07WebHaptics делает именно то, что заявлено, и позволяет вашим сайтам использовать
00:00:11тактильную отдачу как на Android, так и на iOS, что делает их более похожими
00:00:15на нативные приложения. Причем реализовано это очень чисто и просто — буквально
00:00:20одной функцией.
00:00:21И оказалось, что не я один считаю это крутым: пакет завирусился в Twitter,
00:00:24и, судя по всему, Polymarket уже внедрил его у себя.
00:00:29Так что давайте погрузимся и узнаем, из-за чего весь этот шум, а также обсудим,
00:00:33как это работает, ведь у пакета есть очень хитрый трюк для запуска на iOS.
00:00:43Конечно, мне довольно сложно показать вам в видео, что именно делает этот пакет,
00:00:46так как это физическая вибрация телефона, но это то же самое ощущение, которое вы получаете,
00:00:50когда нажимаете «подписаться» в приложении YouTube. Но если вы уже подписаны
00:00:54и всё равно хотите это протестировать, сайт WebHaptics — отличное место для этого.
00:00:59После просмотра видео настоятельно рекомендую зайти туда, там показаны основные типы отклика:
00:01:02успех, ошибка и, конечно, тактильный отклик при нажатии на кнопку.
00:01:06Там также есть суперкрутой редактор для создания собственных паттернов вибрации,
00:01:10к которому мы вернемся чуть позже.
00:01:11А пока давайте перейдем к коду. Как видите, это очень простой npm-пакет,
00:01:15и у него даже есть хелперы для React, Vue и Svelte, хотя вы можете использовать
00:01:19вариант на чистом JavaScript, если захотите. Функция trigger будет везде одинаковой.
00:01:23В моем случае.
00:01:24Я буду использовать React, и, как видите, код невероятно прост: всё, что нам нужно,
00:01:28это использовать хук useWebHaptics, который возвращает функцию trigger.
00:01:32Её мы можем привязать, например, к кнопке, чтобы вызвать тактильный отклик.
00:01:36Также этот хук возвращает функцию cancel для отмены запущенной вибрации
00:01:39и логическое значение isSupported, чтобы вы могли проверить, поддерживает ли
00:01:44браузер тактильную отдачу.
00:01:45С этим простым кодом при нажатии на кнопку на устройстве Android или iOS
00:01:48будет происходить легкая вибрация. Но сейчас я за ноутбуком,
00:01:53так что ничего не произойдет.
00:01:54Однако есть один способ убедиться в работе во время разработки —
00:01:57нужно установить debug: true внутри хука. В этом случае,
00:02:00когда я нажму на кнопку, воспроизведется звук, имитирующий
00:02:04тактильный отклик.
00:02:05Настройка паттерна вибрации также предельно проста,
00:02:09это делается прямо в функции trigger.
00:02:10Первый способ — использовать пресеты, которые идут в комплекте с пакетом.
00:02:14Вы можете импортировать defaultPatterns, где найдете такие варианты, как buzz, error, heavy
00:02:18и многие другие. Вы также можете почувствовать их работу на официальном сайте.
00:02:21сайт.
00:02:22Второй способ — создание полностью кастомного паттерна. Для этого нужно
00:02:25передать массив в функцию trigger и описать в нем вибрации.
00:02:29Сейчас в моем паттерне четыре вибрации. Как видите, вибрация
00:02:33описывается объектом с задержкой (delay) в миллисекундах от предыдущей,
00:02:37длительностью (duration) в миллисекундах
00:02:41и значением интенсивности (intensity), где 1 — это самая сильная вибрация.
00:02:46С этим паттерном при нажатии на кнопку вы можете услышать, как это звучит,
00:02:49но представьте, что это будет вибрировать в руках пользователя.
00:02:53Отличный лайфхак для создания кастомных паттернов — использовать сайт,
00:02:57так как там есть удобный редактор: можно кликом добавить новую вибрацию в массив,
00:03:02перетаскиванием изменить длительность и интенсивность, а также
00:03:06нажать play, чтобы прослушать результат. А если открыть сайт с телефона,
00:03:09можно сразу почувствовать эффект.
00:03:11Как я уже сказал, это трудно показать на видео, но, надеюсь, вы уловили суть.
00:03:14Это довольно простой пакет, но сейчас я хочу показать вам, как он работает,
00:03:19потому что с iOS всё было непросто.
00:03:21Во-первых, существует API, которое должно давать доступ к вибрации
00:03:24через простую команду navigator.vibrate.
00:03:27Проблема в том, что это отлично работает на Android, но iOS вообще это не поддерживает.
00:03:32К счастью, есть другой способ получить тактильный отклик на iOS —
00:03:36использовать input с типом switch: когда пользователь щелкает его на iOS, срабатывает вибрация.
00:03:41Библиотека использует это так: когда мы вызываем отклик,
00:03:44она имитирует нажатие невидимого переключателя согласно нашему паттерну.
00:03:49Мы видим это внизу на примере чекбокса: при срабатывании отклика он
00:03:53быстро переключается туда-сюда, что и вызывает вибрацию на iOS.
00:03:56Если вы хотите видеть этот переключатель во время отладки,
00:03:59просто добавьте в настройки хука параметр showSwitch: true.
00:04:03Если быстро взглянуть на исходный код пакета, можно увидеть логику:
00:04:06если Web Haptics поддерживаются, используется стандартная функция navigator.vibrate.
00:04:11Если же нет, то, как видно ниже, система начинает быстро «кликать»
00:04:15по переключателю. Вот функция, которая отвечает за создание паттерна
00:04:19путем многократного переключения этого самого switch.
00:04:23Мне показалось, что это очень изящный обходной путь, который стоит показать.
00:04:27Надеюсь, Apple не прикроет эту лазейку, а если и прикроет,
00:04:31то хотя бы добавит поддержку функции vibrate.
00:04:32Вот, в общем-то, и всё об этом пакете. Пишите в комментариях,
00:04:35будете ли вы использовать такое у себя, подписывайтесь на канал,
00:04:38и, как всегда, увидимся в следующем видео.
00:04:41[Музыка]