Drei überraschende Browser-Funktionen, die Sie bestimmt noch nicht kennen

Webbrowser können heute wesentlich mehr, als viele Entwickler ahnen. Als Benutzeroberfläche für Webanwendungen nutzen sie nicht mehr nur Bildschirm oder Audio-Ausgabe, sondern können auf zahlreiche System- und Hardwarefunktionen zugreifen. Daraus ergeben sich ungeahnte und häufig überraschende Möglichkeiten. 

JavaScript enthält bereits eine Reihe von APIs, um Inhalte zu verarbeiten (für Text, Datumsangaben, reguläre Ausdrücke, Datenstrukturen und Dokumente – siehe Document Object Model DOM). Dagegen wurden Input-/Output-Funktionalitäten – etwa für Netzwerk, Speicherung oder Grafik – schon immer vom Browser bereitgestellt. Dessen Möglichkeiten haben sich mit der Zeit immer weiter entwickelt und den aktuellen Anforderungen angepasst, zum Beispiel der immer stärkeren Nutzung mobiler Geräte. 

APIs für jeden 

In den Browser eingebaute APIs machen Daten aus dem Browser und der umgebenden Computerumgebung nutzbar für komplexe Anwendungen. Es gibt beispielsweise APIs für Screen-Funktionen, Datenspeicherung oder Zwischenablage, aber auch für GPS-Daten, Batterie, Gamepad, Bluetooth oder Performance-Daten für Websites. APIs bieten Funktionen für das Manipulieren von Dokumenten und ihren Elementen, das Abrufen und Aktualisieren von Daten, für Anzeige und Manipulation von Grafik, die Verarbeitung von Gerätedaten oder von Multimedia-Formaten und die Kommunikation mit anderen Seiten oder Geräten. Zunehmend werden so auch für Webseiten Funktionen verfügbar, die zuvor nur nativen Apps zugänglich waren – die Welten von nativen Apps und Web-Apps wachsen zusammen. 

Wichtig zu wissen: Nicht alle Browser unterstützen alle APIs im gleichen Umfang. Die Hersteller haben sich zwar auf Standards geeinigt, verfolgen aber ihre eigenen Wege bei der Umsetzung und haben eigene Prioritäten. Wenn Sie also eine bestimmte Funktion implementieren möchten, sollten Sie sich vorher kundig machen, mit welchen Browsern diese kompatibel ist. 

Tipp: Seit 2017 finden sich Infos zu Web-APIs der wichtigsten Browserhersteller (Microsoft, Google, Mozilla) gesammelt auf MDN Web Docs, ebenso wie Angaben zur Browserunterstützung von APIs. 

10% Rabatt auf alle DF Produkte

Jetzt 2-Jahre Laufzeit wählen!

So funktionieren Browser-APIs 

Um APIs zu nutzen, ist etwas Erfahrung mit JavaScript und der Arbeit mit Objekten nützlich. APIs stellen eines oder mehrere JavaScript-Objekte zur Verfügung, deren Methoden bestimmte Funktionen ermöglichen und deren Eigenschaften die jeweiligen Daten beinhalten. Viele APIs fassen jeweils diverse Funktionen zu unterschiedlichen „Schnittstellen“ (Interfaces) zusammen. Beispielsweise besitzt die „Webspeech“-API drei Schnittstellen:  SpeechSynthesis und SpeechRecognition für Spracherzeugung und Spracherkennung sowie SpeechGrammar für Vorgaben, welche Wörter und Sprachmuster erkannt werden sollen. 

Die erste Aufgabe besteht also immer darin, die für eine bestimmte Funktion benötigte Schnittstelle zu finden. Je nach API finden sich diese an verschiedenen Stellen, häufig zum Beispiel in der Navigator-Schnittstelle (über window.navigator). Im Folgenden mache wir Sie mit einigen interessanten API-Funktionen näher bekannt. 

Web-Audio-API 

Die Web-Audio-API bietet JavaScript-Funktionen für die Manipulation von Audio direkt im Browser. Im Hintergrund verwendet der Browser dafür komplexen Low-Level-Code (z.B. C++ oder Mozillas Systemsprache Rust). Durch die API wird diese Komplexität aber vom Entwickler ferngehalten. Der hat auf (vergleichsweise) einfache Weise Zugriff auf ein vielseitiges System zur Steuerung von Audio-Wiedergabe im Web. Er kann Audioquellen auswählen und abspielen (nicht nur Dateien, sondern auch Streams oder per Oszillator erzeugte Klänge), Effekte hinzufügen (einschließlich räumlicher Effekte wie Schwenks), Audiovisualisierungen erzeugen und vieles mehr. 

Dieses mächtige Werkzeug können Sie verwenden, um einfach Klänge in Ihre Website oder Anwendung einzubinden, etwa eine gewünschte Atmosphäre zu erzeugen oder schlicht ein Formular mit akustischem Feedback auszustatten. Es kann aber auch dazu genutzt werden, um leistungsfähige Steuerelemente für die Audiowiedergabe direkt auf der Website bereitzustellen oder sogar interaktive Instrumente zu entwickeln. Mehr Infos zur Web-Audio-API finden Sie hier. 

Vibration API 

Ein weit weniger komplexes Beispiel für Browser-APIs ist die Vibration API. Wer jetzt etwas überrascht ist, sollte Folgendes bedenken: Etwa die Hälfte des weltweiten Web-Traffics wird von mobilen Geräten erzeugt. Viele Webanwendungen richten sich auch schon gezielt vor allem an mobile Nutzer. Deshalb ist es gut zu wissen, dass moderne Browser-APIs auch Zugriff auf spezifische Funktionen mobiler Geräte wie Smartphones und Tablets ermöglichen.  

Die meisten modernen Mobilgeräte sind in der Lage, dem Benutzer per Vibration Signale oder Rückmeldungen zu übermitteln. Über die Vibration API können Web-Anwendungen auf diese Hardware-Funktion zugreifen, falls sie existiert. Das wird von vielen aktuellen Browsern unterstützt (Chrome und Firefox auf Desktop und Android, Edge, Opera for Android, Android Webview), aber leider nicht von Safari.  

Die Vibration kann als Muster von unterschiedlich langen Ein-Aus-Impulsen beschrieben werden. Kontrolliert wird sie mit einer einzigen Methode: Navigator.vibrate(). Ihr wird entweder als einzelner Integer-Wert die Zeitdauer der Vibration in Millisekunden übergeben oder ein Array, das ein Muster von Vibrationen und Pausen beschreibt:  

window.navigator.vibrate(500);

bzw. 

window.navigator.vibrate([500, 200, 500, 200, 500]); 

Im ersten Fall vibriert das Gerät einmal für eine halbe Sekunde, im zweiten Fall dreimal für je eine halbe Sekunde und mit 200 Millisekunden Pause dazwischen. Mit etwas Aufwand können Sie auch anhaltende Vibrationen erzeugen (die Sie mit  

navigator.vibrate(0); 

wieder anhalten). Mehr Infos dazu finden Sie hier.  

Geolocation API 

Häufig möchten Anbieter von Webanwendungen wissen, wo sich ihre Nutzer befinden, um zum Beispiel ihre Angebote besser zu personalisieren oder den Standort eines Nutzers auf einer Karte anzuzeigen. Die Geolocation API bietet diese Möglichkeit – selbstverständlich nach einer Anfrage, ob der Nutzer die Übermittlung von Ortsinformationen gestattet. Diese API wird von allen wichtigen Browsern unterstützt. 

Per Navigator.Geolocation erzeugen Sie ein Geolocation-Objekt, das Ihnen mit der Methode getCurrentPosition den aktuellen Standort liefert: 

geo = navigator.geolocation 
geo.getCurrentPosition((position) => {[Textflussumbruch]console.log('Ihr Standort - Länge: ', position.coords.longitude, ' Breite: ', position.coords.latitude);[Textflussumbruch]});  

Die Methode getCurrentPosition gibt ein GeolocationPosition-Objekt mit den Standortkoordinaten (Breite und Länge entsprechend den Eigenschaften latitude und longitude) zurück und führt eine angegebene Callback-Funktion aus. Die Standortkoordinaten können damit entsprechend weiterverwendet, etwa – wie im Beispiel – ausgegeben oder an einen Service wie Google Maps übergeben werden. Mehr Infos zur Geolocation API finden Sie hier. 

Sie finden das spannend? Dann sollten Sie sich auf den MDN-Seiten mal in Ruhe umschauen – Sie werden überrascht sein, was mit Browsern inzwischen alles möglich ist.