Wibracja w HTML5

HTML5 to technologia stosunkowo młoda w tworzeniu aplikacji webowych, jednak rozwijająca się niezwykle szybko. Twórcy aplikacji webowych często zastanawiają się, jak połączyć obsługę sprzętu z oprogramowaniem. W tym celu wykorzystuje się tzw. wirtualizację. Skupmy się jednak na temacie wpisu - wibracji obsługiwanej w HTML5.

Co to jest Vibration API?

Niemal każde urządzenie mobilne jest wyposażone w moduł wibracji. Możliwości wykorzystania Vibration API są niemal nieograniczone - zdarzenia takie jak nadejście sms, wybuch w grze czy tapnięcie w ekran. Interfejs api wygląda następująco:

partial interface Navigator {
    boolean vibrate ((unsigned long or sequence<unsigned long>) pattern);
};

Wibracja w HTML5

Jak używać wibracji w HTML5?

Implementacja wibracji w HTML5 jest bardzo prosta. Najpierw sprawdzamy czy urządzenie obsługuje navigatora oraz jego metodę wibracji.

if (window.navigator && window.navigator.vibrate) {
   // super, wibrujemy
} else {
   // nie śmiga
}

Następnie, jeśli wibracja jest wspierana wywołujemy metodę vibrate(). Możemy to wykonać w dwojaki sposób:

// wibracja przez 1000ms = 1s
navigator.vibrate(1000);

// kilka wibracji - 1s, 1s, 0.5s, 3s
navigator.vibrate([1000, 1000, 500, 3000]);

Proste, prawda? Dodatkową opcją jest możliwość zatrzymywania wibracji, co wykonujemy w następujący sposób:

navigator.vibrate(0);
//lub
navigator.vibrate([]);

Wsparcie przeglądarek

Chyba najważniejsza kwestia - wsparcie. Jak to zwykle bywa z nowościami, wibrację wspierają nowsze przeglądarki mobilne takie jak:

  • Firefox 11+ (zalecenia Firefox 15+)
  • Opera 17+ (zalecenia Opera 19+)
  • Chrome 30+ (zalecenia Chrome 32+)

Demo

Naturalnie można to przetestować na swoim urządzeniu mobilnym. Należy jednak być wyposażonym w powyższe wersje przeglądarek.

Powiadomienie cookies

Strona lukaszbacik.pl zapisuje pliki cookies na komputerach odwiedzających ją internautów. Czytaj więcej.