Navigator.vibrate() Methode im Webbrowser

Navigator.vibrate() Methode im Webbrowser

veröffentlicht am 02.01.2018

Mittlerweile werden Webseiten häufiger auf mobilen Geräten aufgerufen, die in der Hand gehalten werden, als auf stationären Rechnern oder Notebooks. Aus Usabilitygründen ist es aus meiner Sicht daher sinnvoll, dem Anwender bei der Interaktion mit der Webseite Feedback in unterschiedlicher Form zu geben. Standard ist z.B. ein Hover-Effekt, wenn Buttons oder Links geklickt werden.

Ich bin seit längerem Fan der "navigator.vibrate()"-Methode aus dem Set der zahlreichen HTML5-API's. Sofern das Gerät und der Browser diese Methode unterstützen, kann der Anwender neben optischem Feedback auch durch eine Vibration auf den Erfolg der Interaktion mit der Webseite hingewiesen werden. Auf meinem Samsung S7 mit dem Chromebrowser ist dies ohne weiteres möglich.

So finde ich ich es z.B. sehr hilfreich, wenn mit der erfolgreiche Klick auf das Logo oder auf einen Menü-Link per kurzer Vibration bestätigt wird.

Der folgende JavaScript-Schnipsel prüft zuerst, ob die "navigator.vibrate" Methode unterstützt wird. Falls dies der Fall ist, wird per Klick-Event für unterschiedliche Elemente der Webseite eine Vibration mit 40ms Dauer ausgelöst.

$(document).ready(function(){

    /*navigator api*/
    navigator.vibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
    if(navigator.vibrate) {
        $('.navbar-brand, .navbar-nav a, nav.pull-left a, button.navbar-toggle').click(function () {
            navigator.vibrate(40);
        })
    }

});

 

Falls "navigator.vibrate()" nicht unterstützt wird, hat diese Methode keine Auswirkungen. Wichtig ist auch zu wissen, dass weitere JavaScripten durch die Ausführung von "navigator.vibrate()" nicht beeinflusst werden.

Anzumerken ist auch, dass sich Browser wie Chrome oder Firefox unter Android unterschiedlich verhalten. Firefox fragt vor der ersten Verwendung der navigator.vibrate Methode den Anwender, ob er das tun darf. Im Chrome hingegen gibt es keine Rückfrage.

Weiterführende Informationen zu diesem Thema gibt es in den MDN Webdocs.

Navigator.vibrate() Methode im Webbrowser

Navigator.vibrate() Methode im Webbrowser