Moderne web APIs
Youri Dekker
Wat zijn web API's
Tegenwoordig zijn er verschillende web Application Programming Interfaces (API’s) beschikbaar in de browser. Deze kunnen verschillende taken uitvoeren zoals het manipuleren van de DOM, afspelen van audio of video of het genereren van 3D-graphics. Hier komen steeds meer API’s bij. Google Chrome is een browser waarmee veel geëxperimenteerd wordt met nieuwe web API’s. Developers kunnen zich inschrijven voor Chrome Origin Trials. Hierdoor krijgt een developer toegang tot functionaliteiten die mogelijk toegevoegd worden aan de Chrome browser. Door deze trials beschikbaar te stellen aan externe developers kunnen de functionaliteiten getest worden en kan Chrome feedback ontvangen van de community.
Mozilla heeft een lijst met alle web API's waarop je kunt zien welke API's er zijn. Niet alle API’s zijn beschikbaar in elke browser of op elk device. Per API is er een tabel gemaakt met de ondersteuning van de browsers/devices.
Om direct te controleren of een API beschikbaar is in de browser, staat er op What Web Can Do precies aangegeven welke API's wel en niet worden ondersteund door de gebruikte browser. Om te bekijken door welke browsers een API ondersteund wordt, kun je op Can I Use zoeken naar de API. Er zal dan een volledig schema worden getoond met de browsers of hij wordt ondersteund of niet.
Een aantal API's zijn erg bekend en worden veel gebruikt. Een voorbeeld hiervan
is Console, de meeste developers gebruiken regelmatig
console.log() om te debuggen. Echter, er zijn ook veel API's die minder bekend zijn. In dit artikel worden er vier
voorbeelden gegeven.
Notifications
Om de gebruiker op de hoogte te stellen van een gebeurtenis in de browser, is het mogelijk om vanuit de browser meldingen te sturen naar het device van de gebruiker. Er zijn verschillende soorten meldingen:
Local notifications
Een webapplicatie kan gebruik maken van de Notifications API. De gebruiker moet zelf toestemming geven om meldingen te krijgen. Vervolgens kunnen er aan de hand van de API meldingen worden gegenereerd vanuit de frontend. Onder lokale notificaties zijn twee typen te onderscheiden: Persistent notificaties en Non-persistent notificaties.
Persistent notificaties zijn notificaties die ook gestuurd kunnen worden op het moment dat de webapplicatie niet meer actief is. Als bijvoorbeeld het tabblad afgesloten is. Dit werkt door middel van een service worker registratie. Een service worker is een script dat op de achtergrond van de browser draait. Hierdoor kun je taken uitvoeren waar geen gebruikersinteractie voor nodig is en kan de browser een offline ervaring bieden.
Non-persistent notificaties kunnen alleen verstuurd worden op het moment dat de webapplicatie nog actief is. Deze wordt ook direct in de JavaScript code aangeroepen zonder tussenkomst van een service worker.
Push notifications
Het tweede type notificaties zijn push notificaties. Deze notificaties worden getriggerd buiten de browser om,
bijvoorbeeld door de server van een webapplicatie. Hierdoor kunnen gebruikers meldingen krijgen naar aanleiding van een
event op de server. Een webapplicatie heeft een service worker nodig om push berichten te ontvangen. Deze service worker
kan zich abonneren op de push meldingen met PushManager.subscribe(). Het resultaat bevat vervolgens alle informatie
die een applicatie nodig heeft om een push melding te versturen. Zo bevat het een endpoint en de encryptie key die nodig
is om meldingen te versturen.
Web Bluetooth
Als een device de beschikking heeft over Bluetooth, heeft de gebruiker de mogelijkheid om een extern apparaat te verbinden met het device. Dit kan bijvoorbeeld een headset of toetsenbord zijn. Om dit mogelijk te maken vanuit de browser, is er web Bluetooth. Hiermee kunnen webapplicaties verbinden met een apparaat dat gebruik maakt van Bluetooth Low Energy (BLE).
GATT-protocol
Web Bluetooth maakt gebruik van het GATT (Generic Attribute Profile) protocol. Dit protocol beschrijft hoe de data wordt gedeeld via Bluetooth. Door GATT wordt de data georganiseerd in verschillende characteristics, services en descriptors. Characteristics bevat de user data en heeft ten minste twee attributen: de naam, dit beschrijft wat de characteristic is en de waarde van de characteristic. Services zijn collecties met gerelateerde characteristics. Descriptors bevat informatie over characteristics waardoor deze beter te begrijpen zijn. Denk hierbij bijvoorbeeld aan de eenheid van de waarde of het verwachte bereik.
Rollen
Binnen de Bluetooth connectiviteit zijn er verschillende rollen. De meeste (web)developers kennen de termen server en client. Bij Bluetooth kun je ook spreken van een server en een client alleen worden deze anders genoemd. Hierbij spreken ze van een central en een peripheral. Een apparaat wat met een ander apparaat wil verbinden is een central. Een peripheral is een apparaat waar een connectie mee aangegaan wordt. Als voorbeeld een telefoon, de central, wil verbinden met een headset, de peripheral. Een central kan met meerdere peripherals tegelijk verbinden maar kan niet met een andere central verbinden. Een peripheral kan ook niet met andere peripherals verbinden. De connectie werkt maar één kant op, van de central naar de peripheral.
Security
Om gebruik te kunnen maken van web Bluetooth zijn er enkele beveiligingseisen waaraan voldaan moet worden. Zo moet de pagina beschikken over HTTPS. Het is wel toegestaan om op http://localhost gebruik te maken van web Bluetooth. Daarnaast moet de gebruiker zelf een beweging maken om Bluetooth in te schakelen zoals op een knop klikken. Daarna is het pas mogelijk om te scannen voor Bluetooth devices en hiermee te verbinden.
Web Bluetooth zit momenteel nog in de experimentele fase. Om deze reden wordt het ook nog niet door alle browsers ondersteund.
Simulator
Om met deze functionaliteit te testen moet je een apparaat hebben welke beschikt over BLE en duidelijke characteristics heeft. Indien je geen apparaat tot je beschikking hebt, is het mogelijk om een simulator te installeren. Voor Android is er de BLE Peripheral simulator . Dit is een app waarmee je een batterij service, hartslag service en een gezondheid thermometer service kunt simuleren.
Voor IOS is er de app LightBlue. Dit is een gratis app die het mogelijk maakt om zich te gedragen als een Central Bluetooth device of als een peripheral. In de peripheral mode kun je een virtual device aanmaken welke zich vervolgens gedraag als bijvoorbeeld een hartslag sensor.
WebUSB
WebUSB maakt het mogelijk om vanuit webapplicaties gebruik te maken van de Universal Serial Bus (USB). Voordat de gebruiker gebruik kan maken van USB, moet er een handeling worden uitgevoerd om toestemming te vragen. Dit kan zijn in de vorm van het klikken op een knop.
Het voordeel van WebUSB ten opzichte van “Native” USB is dat er voor WebUSB geen extra drivers of programma’s nodig zijn. Een bijkomend probleem is dat niet alle drivers en programma’s voor elk platform geschikt zijn. Door gebruik te maken van WebUSB hoeven developers maar één code base te maken voor alle platformen. Ook kunnen ze deze op afstand updaten waardoor het ook veilig blijft.
De API is gebaseerd op de USB 3.1 specificaties. Door middel van de web API beschikt JavaScript over alle USB functionaliteiten zoals configuraties, interfaces, endpoints en alle overdrachtstypen.
Data uitwisseling
Er zijn vier verschillende soorten van data uitwisseling die mogelijk zijn met USB.
Control: De eerste soort is control. Dit protocol is gebruikt door de host om commands of query parameters te
versturen. Binnen dit protocol worden er packets verstuurd met een lengte van 8 bytes voor een Low speed, 8-64 bytes
voor Full speed en 64 bytes voor High speed apparaten.
Interrupt: Dit protocol wordt vaak gebruikt bij apparaten die kleine hoeveelheden data versturen, bijvoorbeeld muizen en toetsenborden. Hierbij vraagt de host (de PC) continu data op van het externe apparaat.
Bulk: Voor apparaten die grote hoeveelheden data moeten versturen is er het Bulk protocol. Dit wordt vaak gebruikt door apparaten als printers. In dit protocol worden variabele lengte van blokken met data verstuurd of gevraagd door de host. Voor Full speed apparaten is de maximale lengte 64 bytes. Voor High speed apparaten is het maximum 512 bytes.
Isochronous: Dit protocol wordt gebruikt om real time data te streamen. Dit kan bijvoorbeeld in de vorm van live audio kanalen. Het protocol controleert de data niet omdat hier geen tijd voor is. De grootte van een packet kan maximaal 1024 bytes zijn.
Data packets
Binnen het USB systeem zijn er vier soorten data packets.
Token Packets: Bevat een token waardoor het systeem weet welke soort data uitwisseling er gevolgd moet worden.
Data Packets: Deze packets bevatten de informatie wat uitgewisseld moet worden.
Handshake Packets: Deze packets worden gebruikt voor het melden van errors, beantwoorden van de berichten, etc.
Start of Frame Packets: Deze packets worden gebruik om het begin van een nieuwe frame met data aan te geven.
Serial port
Een seriële poort is een tweerichtings communicatie interface voor het versturen en ontvangen van data byte voor byte. Om vanaf het web toegang te krijgen tot de seriële poort van de PC moet je gebruikt maken van Web Serial. Dit is een brug tussen het web en de fysieke wereld.
Web Serial is onlangs gepubliceerd in Chrome 89. Om deze reden wordt het nog niet veel gebruikt en is er weinig documentatie over te vinden.
De input en output streams worden geregeld door de Streams API. Deze API zorgt voor JavaScript objecten die het toestaan om programmatisch toegang te krijgen tot een data stream en die te verwerken zoals gewenst. Voor meer informatie, zie: Streams API.