Брм, Брм!
Взаимодействие с пользователем на «чувственном» уровне может значительно улучшить пользовательский опыт вашего приложения. Как правило, мы, разработчики, должны ограничиваться причудливой анимацией, такой как эффекты параллакса или 3D-рендеринг, чтобы передать более реалистичное ощущение внутри наших приложений. Но знаете ли вы, что прогрессивные веб-приложения могут дать гораздо больше? Сегодня мы рассмотрим тактильную сторону взаимодействия между Интернетом и пользователем.
Грохот в джунглях (дев-)
На момент написания не все среды обеспечивают поддержку нового API вибрации. В частности, можно использовать любой браузер Chromium и Firefox, тогда как каждый вариант Safari / WebKit не поддерживается. Примечание: каждый браузер на iOS использует WebKit в качестве движка.
Использование самого API настолько просто, насколько это возможно. Вот пример:
// All examples assume that we have
// access to the 'window' and use Typescript.
// Specifically, we're using optional chaining
// for simplified handling of undefined if no
// API is available.
const vibrateOnceOnClick = () => {
// A simple one-liner is all that's needed.
// To use a single vibration, we simple
// provide an integer representing the ms
// a single pulse should last.
window.navigator?.vibrate?.(200);
}
const vibratePatternOnClick = () => {
// For more than one puse, an array has to be
// provided, again defining each pulse's lenght
// in milliseconds.
window.navigator?.vibrate?.([50, 200, 50, 200]);
}
Чтобы убедиться, что этот код работает, просто нажмите кнопку копирования в правом нижнем углу фрагмента кода. Если ваше устройство поддерживает это, следует начать легкую вибрацию, чтобы подтвердить действие копирования в буфер обмена.
Мы почти закончили, давайте просто взглянем на последние функции API:
const cancelVibration = () => {
// Quick and easy: call 'vibrate' with
// a val of 0 and the current vibration
// is stopped.
window.navigator?.vibrate?.(0);
}
Вот и все! Не так много, чтобы охватить, но применяется правильно, то есть не слишком много в вашем приложении, и только когда это применимо, API-интерфейс вибрации - действительно отличная функция для использования. Я думаю, что лучший вариант использования - это тактильное подтверждение или отклонение важных действий пользователя, например действие копирования для кода в этом случае или действие постоянного удаления в другом приложении.
- Tom
