Und ihr so? Wohin die Entwicklung bei Web APIs geht

01. August 2017
Web API

Wir hören bei der B-S-S gerne Zukunftsmusik. Meine Kollegen und ich sind ständig auf der Pirsch nach neuesten Technologien. Dabei haben wir wieder fette Beute gemacht: Im folgendem Artikel geht es um vielversprechende Web APIs, die schon jetzt angetestet werden können oder gerade entwickelt werden.

Sogenannte Web Application Programming Interfaces (kurz Web APIs) machen es einem schon leicht: Sie stellen Funktionen und Möglichkeiten zur Verfügung, damit Browser und Server noch inniglicher und effektiver miteinander kommunizieren. Vieles wird bereits über APIs geregelt, doch ausgeschöpft ist das Potenzial der kleinen Nützlinge noch lange nicht. Ich möchte hier ein paar aussichtsreiche neue Helfer aus der API-Zunft vorstellen. Ihre Vorzüge reichen von neuen Formen des Teilens über Web-Blutooth-Schnittstellen bis hin zum Bezahlen im Netz. Um dabei etwas mehr Licht in den Versions- und Kompatibilitäts-Dschungel zu bringen, findet ihr immer auch gleich einen Hinweis, welcher Browser das Ganze unterstützt (unterstützen wird). Here we go!

Web Share API

Die Web Share API bietet eine native Share-Option für digitale Inhalte. Ihr kennt das: Artikel, Bilder und Ähnliches können über einen knuffigen Button mit anderen Applikationen/Webseiten oder Communitys geteilt werden. Mit der neuen API wird das nun komplett vom Browser abgewickelt. Übermittelt wird lediglich ein Titel, ein beschreibender Text und die aufzurufende URL.
navigator.share({
  title: 'e.g. page title',
  text: 'Some text to share',
  url: 'https://www.shareURL.com'
}) .then(() => {
  // User selected some share method
}) .catch(() => {
  // User canceled the share menu
});
Eine kleine Demo gefällig?
 
Aktueller Support der Browser:
 
 

Web Share Target API

Im Gegensatz zu Web Share wird im Web Share Target der Endpunkt des Shares gleich definiert. Bei der Konfiguration des Web Share Targets kann man nämlich den Namen und Kurznamen des Endpunkts definieren. Daneben können Icons mit Eingefügt werden. Schließlich gibt man beim „share_target“ die Template URL für das aufzurufende Ziel an. Der Endpunkt übernimmt dann die weitere Logik des Ablaufs. In meinem Codebeispiel wird Inhalt mit Twitter geteilt.
 
let twitterShare = {  
  "name": "Twitter",  
  "short_name": "Twitter",
  "icons": ['icon.ico', 'icon.'],  
  "share_target": {    
    "url_template": "share?title={title}&text={text}&url={url}"  
  } 
}
 
Aktueller Support der Browser:

Web Bluetooth API

Moderne Browser sollen künftig mit Bluetooth-Geräten kommunizieren können. Dadurch ergibt sich eine ganze Palette praktischer Anwendungen für den Alltag. Denkbar ist beispielsweise eine schicke Weboberfläche, die die Daten von Herzmessgeräten für Fitnesspläne oder zu medizinischen Zwecken visuell aufbereitet. Auch die Synchronisation von Endgeräten mit einem Server über den Webbrowser wird mit Web Bluetooth einfacher zu handhaben sein. So könnte die teils nervige Softwareinstallationen bei solchen Geräten in Zukunft der Vergangenheit angehören.
 
Aktueller Support der Browser:
 

Web USB API

USB-Geräte sollen bald vom Webbrowser unterstützt werden. Diese Devices werden eine spezielle Software besitzen, die sie als Web USB definiert. Darin ist eine Landing Page festgelegt. Außerdem werden sogenannte Allowed Origins vorgeschrieben, damit das USB-Gerät nur mit den angegebenen Seiten funktioniert. Eine Beschreibung der Fähigkeiten des USB-Gerätes macht den Abschluss. Ein praktischer User Case wären zum Beispiel die Authentifizierung von Nutzern für das Backend einer Website mit einem USB-Dongle.
 
Auch die Steuerung von Gerätschaften über USB ist möglich. Wie eine LED durch USB über eine Weboberfläche angesteuert wird, sieht ihr in diesem Anwendungsbeispiel.
 
Aktueller Support der Browser:

Origin Trials

Mit Origin Trials ermöglicht Google Chrome Entwicklern, neuste Web APIs (wie Web USB) einer großen Zahl von Benutzern schon jetzt zugänglich zu machen. Denn bisher sind die APIs erst mit einer Einstellung in den Chrome-Settings nutzbar – nicht eher. Genau hier setzt Origin Trails an. Wer es mit einem gültigen Key in sein Html einbaut, ermöglicht allen Chrom-Usern der Webseite, neueste Features zu nutzen. Eingebunden wird es über einen Meta-Tag:
<meta http-equiv="origin-trial" content="Agefdr6eHq..."   
 data-feature="Web USB" data-expires="2017-07-26" >
Derzeit kann man mit Origin Trails folgende Features aktivieren:
 
Web USB - Chrome 57+ - Bis 25.07.2017
Web VR -  Chrome 59+ - Bis 17.08.2017
Get Installed Related Apps - Chrome 59+ - Bis 17.08.2017 

Payment Request

Ziel der Web Payments Working Group hinter dieser API ist es, Onlinezahlungen einfacher und sicherer zu machen. Typisches Szenario für Payment Request: Eine Webseite ruft die Zahlungsanforderungs-API des Browsers auf. Nun wird im Browser selbst ein Dialog erzeugt, der zur Dateneingabe auffordert. Die Daten werden dann wieder zur Webseite geschickt, um die Bezahlung abzuschließen. 
 
document.querySelector('button').addEventListener('click', () => {
    const methodData = [
        {
            supportedMethods: [ 'basic-card' ],
            data: {
                supportedNetworks: [ 'visa', 'mastercard' ]
            }
        },
        {
            supportedMethods: ['visa', 'mastercard']
        }
    ];

    const details = {
        displayItems: [
            {
                label: 'Fabulous unicorn',
                amount: { currency: 'EUR', value: '13.00' }
            },
            {
                label: 'Replacement horn',
                amount: { currency: 'EUR', value: '0.37' }
            }
        ],
        total: {
            label: 'Total',
            amount: { currency: 'EUR', value: '13.37' }
        }
    };

    const request = new PaymentRequest(methodData, details);

    request.show()
        .then((response) => {
            console.log("Payment request was successfull", response.details);
            // Send the recevied data from response.details to your payment service
            // This API doesn't take care of actual executing the payment, it just
            // collects data for you.
            setTimeout(() => {
                const details = Object.assign({}, response.details);
                details.billingAddress.phone = '---';
                details.billingAddress.addressLine = [ 'Fakestreet', '42' ];
                document.querySelector('.details').innerHTML = JSON.stringify(details, null, 2);
                response.complete('success');
            }, 2000);
        })
        .catch((reason) => {
            console.error("Payment request failed", reason);
        });
});
 
 
 
 
Aktueller Support der Browser:
 

Web NFC

NFC (Near Field Communication) ist eine Form der drahtlosen Datenübertragung. Sie wird benutzt, um Nachrichten zwischen Geräten auf unmittelbare Distanz zu übertragen. Auch NFCs sollen in der schönen neuen Welt der Web-Apps mitspielen dürfen. Ein Beispiel aus der heutigen Praxis ist das bargeldlose Bezahlen via Handy bei Aldi-Nord. Vergleichbare Anwendungen sollen bald auch per Web-App möglich sein.
 
Aktueller Support der Browser:

Fazit

Ich hoffe, ich konnte euch einen kleinen Überblick über die kommende Generation der Web APIs geben. Meine Kollegen bei der B-S-S und ich sind gespannt, wie diese Tools die Entwicklung von Software verändern und welche neuen Anwendungsgebiete sie erschließen werden. 
Habt ihr Fragen und Anregungen zum Thema Web APIs? Dann hinterlässt  mir doch einfach einen Kommentar.
 
Quelle:
Vortrag "#neuland" / Tim Roes @enterJS2017

 

Neuen Kommentar schreiben