Как использовать API вибрации в вашем PWA

Брм, Брм!

Взаимодействие с пользователем на «чувственном» уровне может значительно улучшить пользовательский опыт вашего приложения. Как правило, мы, разработчики, должны ограничиваться причудливой анимацией, такой как эффекты параллакса или 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]);
}

typescriptLanguageCheck out all coding posts

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

Мы почти закончили, давайте просто взглянем на последние функции API:

const cancelVibration = () => {
  // Quick and easy: call 'vibrate' with
  // a val of 0 and the current vibration
  // is stopped.
  window.navigator?.vibrate?.(0);
}

typescriptLanguageCheck out all coding posts

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

- Tom