Sich als Webentwickler im Dschungel der Web APIs zurechtzufinden, ist gar nicht so einfach. So sind alleine beim W3C aktuell mehr als 100 Web API Standards und Working Drafts aufgelistet. Hinzu kommen Web APIs, die implizit Teil vom HTML5-Standard oder Teil von ECMAScript, dem Standard hinter JavaScript, sind.
Diese hohe Anzahl an Web APIs ist nicht nur für Einsteiger, sondern auch für fortgeschrittene Webentwickler schwierig zu überblicken. Dieser Artikel soll daher etwas Licht in den Web API-Dschungel bringen und stellt dazu 10 Web APIs vor, die vermutlich noch nicht jeder kennt, die in Zukunft aber höchstwahrscheinlich eine wichtige Rolle spielen werden.
1. Inhalte teilen: Die Web Share API
Man kennt es bereits von mobilen Anwendungen: Hier ist es möglich, Inhalte von einer Anwendung an andere Anwendungen auf dem gleichen Endgerät zu senden. Beispielsweise ist es möglich, aus dem (mobilen) Browser heraus markierte Texte an die E-Mail-App zu senden, markierte Fotos direkt in einer Fotobearbeitungs-App zu öffnen und vieles weitere mehr. Die sogenannte Web Share API will das Teilen von Inhalten zwischen Webanwendungen bzw. von Webanwendungen mit anderen nativen mobilen Anwendungen standardisieren.
Im Wesentlichen definiert die API dazu am globalen Objekt navigator die Methode share(), der sich – wie in folgendem Listing zu sehen ist – ein Objekt übergeben lässt, welches die zu teilenden Daten repräsentiert. Die Web Share API wird derzeit vom W3C ausgearbeitet und befindet sich noch im Status „Working Draft“. Nichtsdestotrotz lässt sich die API bereits heute in einigen mobilen Browsern wie etwa Safari iOS und Chrome für Android ausprobieren.
2. Bezahlprozesse einleiten: Die Payment Request API
Bezahlprozesse bzw. die hierfür benötigten Eingabeformulare zu implementieren, kann ganz schön aufwändig sein. Die sogenannte Payment Request API will dies vereinfachen und definiert hierzu eine Reihe von Schnittstellen, über die entsprechende Formulare automatisch vom Browser erzeugt werden können.
Wie in folgendem Listing zu sehen ist, lassen sich einzelne Bezahlprozesse über die Klasse PaymentRequest starten. Der Konstruktor erwartet dabei drei Parameter: Als ersten Parameter lassen sich die Bezahlmethoden übergeben, die im Formular unterstützt werden sollen. Über den zweiten Parameter lassen sich verschiedene Details wie die einzelnen Einträge in der Bestellübersicht, die Gesamtkosten der Bestellung sowie die verschiedenen Versandoptionen konfigurieren. Über den dritten Parameter wiederum lässt sich konfigurieren, ob Angaben zum Namen, zur Telefonnummer und zur E-Mail-Adresse abgefragt werden sollen und ob eine Formularmaske für die Eingabe einer Lieferadresse angezeigt werden soll.
3. Änderungen am DOM-Tree beobachten: Die Mutation Observer API
Moderne Webanwendungen generieren Inhalte dynamisch mit Hilfe von JavaScript, bzw. durch Änderungen am DOM-Tree. Die Mutation Observer API, die Bestandteil des HTML5-Standards ist, ermöglicht es, Änderungen am DOM-Tree mitzubekommen und darauf zu reagieren.
Dazu definiert man, wie in folgendem Listing zu sehen ist, zunächst eine Instanz der Klasse MutationObserver und übergibt dabei eine Callback-Funktion, die aufgerufen wird, wenn von dem „Observer“ eine Änderung beobachtet wurde. Um dann Änderungen an einem Knoten mitzubekommen, ruft man an der Observer-Instanz die Methode observe() auf, wobei zwei Parameter zu übergeben sind: Als ersten Parameter übergibt man den Knoten, der beobachtet werden soll und als zweiten Parameter ein Konfigurationsobjekt, über das sich beispielsweise konfigurieren lässt, welche Arten von Änderungen beobachtet werden sollen. Zur Auswahl stehen hier Änderungen bezüglich der Kindelemente bzw. des Sub-Trees, Änderungen an Attributen sowie Änderungen an Textinhalten.
4. Daten verschlüsseln und entschlüsseln: Die Web Cryptography API
Die Web Cryptography API stellt verschiedene kryptographische Operationen zur Verfügung. So lassen sich mit Hilfe der API beispielsweise Schlüssel bzw. Schlüsselpaare generieren, Daten verschlüsseln und entschlüsseln, Daten signieren und verifizieren und (sichere) Zufallszahlen sowie Hash-Werte generieren. Einstiegspunkt in die API bildet dabei das globale Objekt crypto, welches das Interface Crypto implementiert und (über die Untereigenschaft subtle) verschiedene Methoden rund um die Kryptograhie bereitstellt.
Folgendes Listing zeigt beispielsweise, wie sich mit Hilfe der API Daten verschlüsseln und wieder entschlüsseln lassen. Dazu wird zunächst über die Methode generateKey() ein passender Schlüssel erzeugt. Anschließend können die Daten mit Hilfe der Methode encrypt() verschlüsselt werden: Dieser Methode übergibt man als ersten Parameter ein Konfigurationsobjekt, welches unter anderem Informationen zum verwendeten Verschlüsselungsalgorithmus enthält, als zweiten Parameter den Schlüssel sowie als dritten Parameter die zu verschlüsselnden Daten. Als Rückgabewert erhält man dann einen String, der die verschlüsselten Daten enthält. Analog dazu funktioniert die Methode decrypt(), wobei hier als dritter Parameter natürlich die verschlüsselten Daten zu übergeben sind. Als Rückgabewert erhält man dann einen String, der die entschlüsselten Daten enthält.
5. Mit Zeit- und Datumsangaben arbeiten: Die Temporal API
Die seit Beginn der Sprache JavaScript im Standard enthaltene Date API für das Arbeiten mit Zeit- und Datumsangaben (die im Wesentlichen das Objekt bzw. die Klasse Date definiert) ist inkonsistent, seit langem nicht mehr zeitgemäß und nicht besonders komfortabel in der Verwendung. Das haben auch die Macher hinter der neuen sogenannten Temporal API erkannt.
Diese API stellt gegenüber der Date API ein durchdachtes Objektmodell zur Verfügung, mit Hilfe dessen sich verschiedene Anwendungsfälle umsetzen lassen. Die API befindet sich momentan in Stufe 3 des insgesamt fünfstufigen Prozesses (Stufen 0-4), den eine API durchlaufen muss, bevor sie in den ECMAScript-Standard aufgenommen wird. Um sie schon heute ausprobieren zu können, muss man daher auf die „proposal-temporal“-Polyfill-Bibliothek zurückgreifen:
6. Mit Cookies arbeiten: Die Cookie Store API
Genau wie die Arbeit mit Zeit- und Datumsangaben war auch die Arbeit mit Cookies lange Zeit nicht sonderlich komfortabel. So ist der Umgang mit dem Dokument document.cookie nicht sonderlich durchdacht: Für das Schreiben, Auslesen und Aktualisieren von Cookies in dem der Eigenschaft hinterlegten String ist immer das manuelle Parsen notwendig. Webentwickler haben daher in Vergangenheit oft auf Cookie-Bibliotheken wie „js-cookie“ zurückgegriffen, welche die Arbeit mit Cookies abstrahieren und vereinfachen.
Die sogenannte Cookie Store API will die Arbeit mit Cookies nun auch standardmäßig modernisieren. Über das durch die API bereitgestellte globale Objekt cookieStore stehen hierbei vier (asynchrone) Methoden zur Verfügung, um mit Cookies zu arbeiten (siehe auch folgendes Listing). Mit der Methode set() lassen sich einzelne Cookies schreiben, mit Hilfe der Methoden get() und getAll() können Cookies anhand ihres Namens ausgelesen und über die Methode delete() wieder gelöscht werden. Darüber hinaus stellt das cookieStore-Objekt die Methode addEventListener() zur Verfügung, über die sich Event-Listener für das „change“-Event registrieren lassen, welches immer dann ausgelöst wird, wenn ein Cookie verändert wird.
7. Sprache erkennen und ausgeben: Die Web Speech API
Websites und Webanwendungen werden immer interaktiver und bieten immer mehr Möglichkeiten. Eine neue Form der Nutzerinteraktion bietet die sogenannte Web Speech API: Sie ermöglicht es, innerhalb von Webanwendungen und Websites Sprache auszugeben und zu erkennen. Dazu definiert die API die Interfaces SpeechSynthesis (zur Sprachausgabe) und SpeechRecognition (zur Spracherkennung).
Folgendes Listing zeigt exemplarisch, wie sich die Web Speech API verwenden lässt. Für die Sprachausgabe steht am globalen window-Objekt die Eigenschaft speechSynthesis zur Verfügung, die das gleichnamige Interface aus der Web Speech API implementiert. Die eigentliche Sprachausgabe startet man über die Methode speak(), der eine Instanz von SpeechSynthesisUtterance zu übergeben ist. Dabei handelt es sich im Wesentlichen um ein Konfigurationsobjekt, über das sich zum einen der auszugebende Text und zum anderen verschiedene Einstellungen wie beispielsweise die zu verwendende Sprache (im Beispiel Deutsch), die Lautstärke, die Geschwindigkeit und die Tonhöhe konfigurieren lassen.
8. Atomare Operationen durchführen: Die Atomics API
Mit Hilfe der Worker API lassen sich in JavaScript komplexe Berechnungen parallelisieren und auf mehrere parallel arbeitende Worker verteilen. Für den Datenaustausch zwischen einzelnen Workern kommt dabei häufig die Datenstruktur SharedArrayBuffer zum Einsatz, die vom Prinzip her wie die Klasse ArrayBuffer funktioniert, aber eben von verschiedenen Workern gleichzeitig verwendet werden kann. Genau hier aber liegt das Problem: Der gleichzeitige Zugriff kann schnell zu Problemen führen, den sogenannten Race Conditions. Beispielsweise wenn ein Worker einen Wert aus dem Buffer liest, ein anderer Worker zwischenzeitlich einen neuen Wert in den Buffer schreibt und der erste Worker noch mit dem alten Wert arbeitet. Die sogenannte Atomics API löst dieses Problem und stellt verschiedene atomare Operationen zur Verfügung, die auf einem SharedArrayBuffer ausgeführt werden können. Ein Beispiel hierfür ist in folgendem Listing zu sehen:
9. Faltbare Displays unterstützen: Die Device Posture API
Schon länger müssen Webentwickler bei der Entwicklung von Websites und Webanwendungen berücksichtigen, dass Endnutzer verschiedene Endgeräte verwenden, um auf die jeweilige Website bzw. Webanwendung zuzugreifen. Im Gegensatz zu den Anfängen der Webentwicklung muss man heutzutage im Idealfall verschiedene Displaygrößen vom Smartphone übers Tablet bis hin zu Laptop und Desktoprechnern (bzw. -monitoren) unterstützen. Dank Responsive Design und entsprechenden CSS-Techniken lässt sich aber auch diese Herausforderung relativ einfach meistern.
Doch auch die mobilen Endgeräte werden technisch immer raffinierter. So sind seit einiger Zeit Endgeräte mit faltbaren Displays auf dem Markt. Um diesem Fortschritt Rechnung zu tragen, befindet sich mit der Device Posture API aktuell eine API in der Mache, die Informationen zu solchen Geräten liefert. Die API definiert dazu am globalen navigator-Objekt die Eigenschaft devicePosture: Über dessen Eigenschaft type lässt sich der aktuelle Zustand eines faltbaren Displays abfragen, also ob das Display aufgeklappt bzw. „aufgefaltet“ (Zustand „continuous“), zugefaltet („folded“) oder „umgeklappt“ („folded-over“) ist.
10. Anwendungen mehrsprachig gestalten: Die Internationalization API
Eine weitere Anforderung, um die man bei Webanwendungen in vielen Fällen nicht mehr herumkommt, ist die sogenannte „Internationalization“ (kurz i18n), also die Mehrsprachigkeit einer Anwendung. Die Bordmittel von JavaScript sahen hier lange Zeit eher bescheiden aus. Doch die mit ES2017 als Teil des ECMAScript-Standards eingeführte Internationalization API schafft in dieser Hinsicht Abhilfe. So ermöglicht die API unter anderem die sprachabhängige Formatierung von Zahlenwerten, von Datums- und Zeitangaben sowie den sprachabhängigen Vergleich von Zeichenketten und die Behandlung von Ein- und Mehrzahl bei der Ausgabe von Zeichenketten.
Die wichtigsten Web APIs 2022 – Fazit
Die Möglichkeiten, die man heute beim Entwickeln von Webanwendungen dank unzähliger Web APIs hat, sind enorm. Doch um diese Möglichkeiten auch ausschöpfen zu können und überhaupt zu wissen, welche Web APIs es gibt, ist es wichtig, sich regelmäßig einen Überblick zu verschaffen. Dieser Artikel hat 10 Web APIs vorgestellt, die in den kommenden Monaten und Jahren relevant werden dürften. Auch wenn die vorgestellten APIs noch nicht alle vollständig standardisiert bzw. in einer finalen Version vorliegen, lassen sich die meisten dieser APIs schon heute in modernen Browsern verwenden.
Weiterführende Informationen zu Web APIs:
- Worauf sollten Sie beim Design einer API achten? Erfahren Sie mehr in unserem Experten-Beitrag: Einführung in das Design von HTTP-APIs.
- Viele offene APIs (auch Open oder Public APIs genannt) stehen Ihnen in Internet frei zur Verfügung. Einen Überblick über nützliche Public APIs finden Sie in diesem Beitrag.
- 10 Web APIs, die Entwickler 2022 kennen müssen - 22. März 2022
- Eine Einführung in das IoT-Protokoll MQTT - 3. August 2021
- 25 Packages, die man als Node.js-Entwickler 2021 kennen muss - 4. Mai 2021
