Ein Guide zum verstehen von HTML5-APIs

Was ist ein API?

API steht für Application Programming Interface (Anwendungsprogrammierschnittstelle). APIs werden in der Programmierung häufig für die Kommunikation zwischen Servern verwendet. APIs ermöglichen es zwei Diensten/Servern, miteinander zu interagieren, ohne zu wissen, wie genau jeder einzelne von ihnen implementiert ist. APIs sind ein wichtiger Design-Aspekt eines der grundlegenden Konzepte in der Informatik, der Abstraktion.

HMTL APIs

Es gibt Argumente dafür, dass HTML5 als Markup-Sprache keine Programmierschnittstellen hat. Vielmehr sind es JavaScript-APIs mit formatierten HTML-Antworten. Das liegt daran, dass APIs normalerweise für Server-Server-Schnittstellen programmiert werden. Diese Verwechslung ist darauf zurückzuführen, dass die vom W3C definierte HTML5-Spezifikation hauptsächlich semantische HTML-Elemente abdeckt. Die meisten der abgedeckten HTML5-API-Features werden nicht als APIs, sondern als fortgeschrittenes HTML behandelt. WHATWG (Web Hypertext Application Technology Working Group) ist die Dokumentation, welche die Spezifikationen der HTML5-APIs abdeckt.
Wenn du dir die WHATWG-Dokumentation ansiehst, wirst du feststellen, dass JavaScript kaum erwähnt wird. Die Kenntnis von JavaScript ist für das Verstehen der HTML5-APIs nicht von größter Bedeutung.

Frontend-Entwickler tendieren dazu, HTML5-APIs zu überfliegen, anstatt JavaScript-UI-Bibliotheken zu erstellen, um ihre Funktionen zu ersetzen. In diesem Artikel werden wir uns einige HTML5-APIs anschauen. Dabei gehen wir auf ihre Features, Absicht, Verwendung und einschränkenden Grenzen ein.

Geolocation API

Die Geolocation API ermöglicht es Web Services, geografische Benutzerinformationen abzurufen. Da die Standortverfolgung die Sicherheit und den Datenschutz beeinträchtigt, ist der Standort eines Benutzers nicht verfügbar, außer wenn er zustimmt und dem Browser den Zugriff auf diese Informationen gestattet. Um dieser Funktion zuzustimmen, klickt der User in der Regel auf ein “Zulassen”-Dialogfeld. Erst dann können Standortinformationen zur weiteren Verwendung abgerufen werden.
Geographische Informationen können für einige Anwendungen nützlich sein, die stark davon abhängen, den aktuellen Standort des Users zu kennen, wie z.B. medizinische Notfalldienste, Fitness Apps oder Kartendienste. Sogar das Marketing kann stark davon profitieren, die Umgebung des Users zu kennen.
Die HTML5-Geolocation-API bietet genauere Positionen auf Geräten mit aktiviertem GPS und Standortinformationen (wie z. B. mobilen Geräten). Sie wird dann als ein Satz von Breiten- und Längenkoordinaten angeboten. Die Geolocation-API verwendet Methoden wie getCurrentPosition(), welche die aktuelle Position eines Users zurückgibt. Es ist auch die Methode, die es ermöglicht, den Standort auf einer Karte, wie Google Maps, anzuzeigen. Die watchPosition()-Methode gibt die aktuelle Position des Users zurück und aktualisiert die Position weiterhin, wenn sich der User bewegt. Dies ist eine vorteilhafte Methode, da sie eine dynamische Implementierung dieser API bietet und dem Programmierer einen höheren Grad an Flexibilität bietet. Die clearWatch() - Methode, die die watchPosition() Methode stoppt, wird verwendet, um die Positionsverfolgung abzubrechen. Sobald der User sein Ziel erreicht hat, stoppt diese API-Methode die kontinuierliche Aktualisierung mit Standortinformationen.

Zu den Einschränkungen der Geolocation gehören:

• Es funktioniert nur auf gesicherten Seiten, sprich auf Seiten, die mit aktiviertem HTTPS-Protokoll gehostet werden.
• Es funktioniert nicht auf älteren Telefonen und Browsern.
• Updates werden gestoppt, wenn der Browser minimiert oder in den Hintergrund verschoben wird.
• Es gibt sehr wenig Kontrolle über die Standortaktualisierungen, da diese vom GPS selbst verwaltet werden. Außerdem wird die Positionsgenauigkeit manchmal durch drahtlose ISPs (Internet Service Provider) beeinflusst.

Drag and Drop API

Das Drag and Drop (DnD) Feature ist ein einfaches Verfahren, das es einem User erlaubt, ein Element von einem Teil des Bildschirms in einen anderen Teil zu ziehen. Es ermöglicht lediglich, dass HTML-Elemente verschoben werden können. Diese API-Funktionalität ermöglicht es einem Programmierer, einfache Online-Spiele wie virtuelles Schach zu erstellen, bei denen man Schachfiguren über ein Bildschirmbrett ziehen und ablegen kann. Der Drag-and-Drop-Prozess ist recht einfach.

• Der User wählt das Element aus, das er ziehen möchte.
• Das Element wird über den Bildschirm an den neuen Ort gezogen.
• Der User lässt das Element an der gewünschten Bildschirmposition los.

Die HTML5-Implementierung von DND wurde von Microsoft in ihrer IE5.0-Implementierung eingeführt und später auch von anderen Browsern übernommen. Die DND-Implementierung verwendet das DOM Event Model und entsprechende Drag-Events.

Um ein Element verschiebbar zu machen, muss das Attribut “draggable” auf ‘true’ gesetzt werden.

<img draggable="true" />

Andere Funktionen wie ondragstart, ondragover und ondrop sind so eingestellt, dass sie Ereignisse auslösen, wenn der User beginnt, das Objekt zu ziehen, wenn sich die Maus innerhalb der Ziehzone bewegt und wenn das ziehbare Element losgelassen wurde.

Indem man die native HTML5-API das Ziehen und Ablegen handhaben lässt, stellt man vollständigen Support für bestimmte Umgebungen sicher und minimiert unerwartete Ereignisse/Verhaltensweisen während des Prozesses. Eine der Einschränkungen ist, dass man während des Ziehens keine Kontrolle hat.

Web Storage

Diese API ist ein Game-Changer. Sie ermöglicht es Web-Applikationen, User-Informationen im Browser-Speicher zu speichern. Daten lokal im Browser des Computers zu speichern und sie abzurufen, ohne sie erst über das Internet zu übertragen, bringt Applikationen enorme Vorteile.

Vor der HTML5-Webspeicher-API konnten die Frontend-Entwickler keine lokale Speicherung von Daten implementieren. Die Daten der User mussten in Cookies gespeichert werden, obwohl Cookies serverbasiert waren und mit jeder HTTP-Anfrage gesendet werden mussten.
Die Webspeicher-API ist die bevorzugte Wahl von Softwareingenieuren, wenn es darum geht, große Datenmengen zu speichern, die nur selten geändert werden. Hier würde die Übertragung über das Internet wertvolle Zeit und Ressourcen kosten.

Es gibt natürlich noch andere Vorteile von Webspeicher im Vergleich zu Cookies, wie z.B. verfügbarer Speicherplatz und Sicherheitsprobleme, die Webspeicher zur bevorzugten Wahl machen.
Die HTML5-Webspeicher-API bietet zwei einzigartige Mechanismen, die sich in Funktionsweise und Umfang unterscheiden - lokale Speicherung und Session-Speicherung.
Der lokale Speicher speichert die Daten eines Users dauerhaft auf einer Webseite. Die Daten eines Users werden nicht gelöscht, selbst wenn ein Browser erneut geöffnet oder aktualisiert wird. Das Löschen von Daten aus diesem Speicher ist beabsichtigt und erfolgt durch das Löschen der Cache-Dateien. Dazu wird das localStorage-Objekt verwendet.

Session Storage hingegen speichert Daten vorübergehend. Die Daten sind weg, wenn der Browser geschlossen oder aktualisiert wird. Es benutzt das sessionStorage-Objekt.

Web Speech API

Die Web Speech API besteht aus zwei Hauptteilen. Zum einen aus der Sprachsynthese (auch bekannt als Text to Speech oder TTS) und zum anderen aus der Spracherkennung. Die Implementierung der Web Speech API in Browsern bietet eine Welt voller Möglichkeiten für Interaktionen durch Sprachbefehle, wie z.B. Sprachsuche, Sprachnavigation und Texte diktieren.
Diese API ist derzeit noch Browser-prefixiert und auf Chrome und Firefox eingeschränkt. Es benutzt auch eine serverseitige Google-API, um Sprache zu verarbeiten. Aufgrund des Backend-Prozesses der Web Speech API ist sie nur verfügbar, wenn der Browser des Users online ist.

Das zentrale Controller-Interface zur Instanziierung dieser API ist SpeechRecognition. Sie arbeitet mit Methoden und Ereignissen wie onstart, onresult, onend, continuous und lang.
Einer der Nachteile dieser API ist, dass sie die Erlaubnis nur einmal anfordert und keine weitere Autorisierung benötigt, sobald die erste Erlaubnis erteilt wurde. Diese Schwachstelle hat Bedenken hinsichtlich möglicher Sicherheitsverletzungen hervorgerufen, da ein Dritter die Seite aufzeichnen oder mithören kann, sobald ein User die erste und einzige Berechtigung erteilt hat.

WebRTC (Web Real-Time Communication)

WebRTC API ermöglicht die Echtzeit-Kommunikation zwischen Medien und nativen Applikationen im Browser. Es unterstützt Peer-to-Peer-Filesharing, Sprachanrufe und Medien-Streams (Audio und Video).
Mit dieser API ist es möglich, auf Audio- und Video-Streams auf Geräten zuzugreifen, die an einer Maschine angeschlossen sind, wie Kameras oder Mikrofone, ohne dass Plugins von Drittanbietern benötigt werden.
Die WebRTC API wird von allen modernen Browsern und sogar von nativen Clients wie Android und iOS Applikationen unterstützt.
WebRTC unterscheidet sich von anderen Kommunikationsmodellen. Browser implementieren drei andere primäre HTML5-APIs dafür:

• MediaStream, auch getUserMedia() genannt - nimmt die Kamera und das Mikrofon eines Users auf.
• RTCPeerConnection - ermöglicht den Zugriff auf eine Audio- oder Anruferkomponente.
• RTCMediaChannel - die Peer-to-Peer-Kommunikationskomponente.

Bislang haben wir uns nur mit einigen der APIs innerhalb der W3C- und WHATWG-Spezifikationen befasst. Es gibt viele weitere dokumentierte APIs, die man zumindest erwähnt haben sollte:

• Canvas 2D Context API - Diese API erlaubt es Usern, in Browsern zu zeichnen. Im WHATWG-Living-Standard wird jedoch erwähnt, dass diese API nicht mehr aktiv gewartet wird.
• Batteriestatus-API - Diese API erlaubt es einer Webseite, ihre Operationen basierend auf dem Batteriestatus des Gerätes zu ändern. Wenn die Batterie schwach ist, können einige Features für den User nicht mehr verfügbar sein.
• Medien-API - Die Medien-API ist die Implementierung von JavaScript-Methoden auf HTML-Video- und Audioelementen durch den Browser. Sie verwendet Methoden wie onplay(), canPlayType(), pause(), play() und load().
• Webworker-API - Diese API ermöglicht es Usern, JavaScript in Hintergrund-Threads auszuführen, ohne die Leistung einer Website zu beeinträchtigen. Das Skript ist unabhängig von den Operationen eines Users auf einer Seite.
• Datei-API - Diese API erlaubt es dem Browser, Dateien aus dem lokalen Dateisystem zu laden und zu verarbeiten. Es benötigt die Erlaubnis von Usern, bevor es auf Dateien zugreifen kann. Es sieht auch vor, dass User mehrere Dateien von einem Computer auswählen können. Ein Vorteil der HTML-Datei-API ist, dass sie Drag&Drop-Features enthält, mit denen User Dateien von ihrem Computersystem auf das Browser-Interface ziehen können.
• History API - Diese API erlaubt den Zugriff und die Manipulation der Session History des Browsers.
• Server-Sent Events (SSE) APIs - Diese API erlaubt automatische Updates von Servern auf eine Webseite.

Abschließende Worte

HTML5-Attribute sind mächtige APIs, die das Programmieren für Entwickler einfacher machen. Sie verleihen Webapplikationen und Webseiten reichhaltige Interaktivität. Leider neigen sie jedoch oft dazu, zugunsten von serverseitiger Programmierung und Bibliotheken übersehen zu werden.

Eine wichtige Sache, die man bei den HTML5-APIs beachten sollte, ist, dass sie sich ständig zu Gunsten des Frontend-Entwicklers weiterentwickeln. Wenn sie reifen, werden die Diskrepanzen zwischen den verschiedenen Implementierungen immer geringer.

Nicht jede Webseite oder Applikation wird HTML5-APIs benötigen. Doch zu verstehen, was sie sind, wie sie funktionieren, ihre Grenzen und Vorteile zu kennen, wird einem Programmierer helfen zu entscheiden, mit welchen Werkzeugen er sich am besten an die kommende Aufgabe setzt.