Polyfills: Code-Bausteine für moderne Web-Features

Polyfills machen neuere Web-Features auch in Internetbrowsern nutzbar, denen die native Unterstützung dieser Komponenten eigentlich fehlt. Was die praktischen Code-Bausteine im Detail ausmacht und wie Sie diese Technologie verwenden können, erfahren Sie in diesem Artikel.

Was ist Polyfill?

Als Polyfill oder auch Polyfiller bezeichnet man einen mehr oder weniger umfangreichen Code-Baustein, der moderne HTML-, CSS- oder JavaScript-Funktionen in älteren Browsern verfügbar macht, denen die Unterstützung von Haus aus fehlt. In den meisten Fällen ist ein Polyfill in JavaScript geschrieben – grundsätzlich sind aber auch andere Web-Programmiersprachen als Basis für diese „Füll“-Skripte möglich. Zu den wichtigsten Features, die durch Polyfills browserübergreifend bzw. -unabhängig verfügbar gemacht werden, gehören HTML5-Komponenten wie das Bitmap-basierte Canvas-Element für Grafiken, Diagramme und Animationen.

Welche Polyfills gibt es?

Dass der Begriff Polyfill eng an HTML5 geknüpft ist, ist kein Zufall: Mit seinen fortschrittlichen Features, die unter anderem die Notwendigkeit von Flashvideos passé gemacht haben, hat sich die fünfte Version der Hypertext Markup Language schnell zu einer festen Größe im Web entwickelt. Hinsichtlich der HTML5-Unterstützung durch die Browser verlief die Entwicklung allerdings relativ schleppend. Neben Polyfills für HTML5-Elemente sind Polyfill-Code-Bausteine unter anderem auch bei der Einbindung folgender Web-Elemente gefragt:

• SVG-Grafiken: Das SVG-Format (Scalable Vector Graphics) wird seit 2001 vom W3C-Konsoritum als Standardformat für Vektorgrafiken empfohlen, ist jedoch erst seit HTML5 verbreitet. Da viele Browser bei der Unterstützung hinterherhinken, gibt es SVG-Polyfills wie svgweb.
• ECMAScript: ECMAScript ist der standardisierte Kern von JavaScript und wird regelmäßig aktualisiert, um den Funktionsumfang der Skriptsprache zu erweitern. Die neuesten Features wie Promise-Objekte oder Symbol-Funktionen funktionieren dank Polyfills der JavaScript-Standardbibliothek core-js auch in älteren Browserversionen.
• Web Storage: Auch die Cookie-Alternativen Local Storage (dauerhafte Speicherung auf Client-Seiten) und Session Storage (Speicherung auf aktuelle Sitzung beschränkt), die sich unter dem Oberbegriff Web Storage oder DOM Storage zusammenfassen lassen, werden nicht von allen Browser-Versionen unterstützt. Ein bekanntes Polyfill, das zur Behebung dieses Problems geschrieben wurde, ist das MIT-lizenzierte webstorage-polyfill.
• Cross-Origin Resource Sharing (CORS): CORS erlaubt Webanwendungen den Zugriff auf Web-Ressourcen, die außerhalb des eigenen Servers liegen. Viele ältere Browser unterstützen diesen Datenaustausch nicht. Abhilfe schafft eine Kombination aus dem JavaScript-Paket XDomain und dem CORS-Polyfill XHook.
• CSS (Cascading Style Sheets): CSS ist seit Jahren eines der wichtigsten Werkzeuge zur grafischen Gestaltung von Websites. Im Laufe der Jahre sind die Stylesheets immer vielseitiger geworden, weshalb Polyfills als Schnittstelle zu älteren Browser-Modellen sehr gefragt sind. Eines der bekanntesten Workaround-Werkzeuge ist css-polyfills.js.
• Geolocation: Das Geolocation-API zum Übermitteln des eigenen Standorts war lange Zeit nur mithilfe zusätzlicher Browser-Plugins nutzbar und wurde nicht standardmäßig von den Browsern unterstützt. Will man die Funktion auch für Nutzende älterer Webclient-Versionen ohne Erweiterung verfügbar machen, kann man das ebenfalls mit einem Polyfill erreichen.

Wie werden Polyfills angewendet (inkl. Beispiel)?

Sie können Polyfill-JavaScript-Code bzw. Polyfill-Skripte direkt in das HTML-Dokument eines Webprojekts einbetten. Dabei integrieren sie sich nahtlos in den bestehenden Quellcode und werden bei korrekter Programmierung nur dann ausgeführt, wenn der zugreifende Browser das jeweilige Webfeature tatsächlich nicht unterstützt. Zu diesem Zweck wird in JavaScript beispielsweise die if-Anweisung verwendet, mit deren Hilfe sich der fehlende Support als Bedingung für die Aktivierung des Skripts definieren lässt. Wie genau dies im Code festzuhalten ist und wie der Aufbau eines Polyfills im Allgemeinen aussieht, verdeutlichen die folgenden zwei Beispiele.

Beispiel 1: Polyfill für die JavaScript-Methode startsWith()

if (!String.prototype.startsWith) {
    String.prototype.startsWith = function (searchString, position) {
        position = position || 0;
        return this.indexOf(searchString, position) === position;
    };
}

Dieses kleine JavaScript-Snippet ermöglicht dem aufrufenden Browser, die JavaScript-Methode startsWith() zu nutzen, auch wenn er diese eigentlich nicht unterstützt. Diese Methode, die Teil der ECMAScript-6-Spezifikation ist, stellt fest, ob ein bestimmter String mit den Zeichen bzw. der Zeichenfolge eines anderen Strings beginnt. Ist dies der Fall, gibt sie den Wert „true“ (trifft zu), andernfalls den Wert „false“ (trifft nicht zu) zurück. Die erste Zeile des Codes sorgt dabei dafür, dass das Skript nicht genutzt wird, falls der Browser die Methode nativ unterstützt.

Eine komplexere, optimierte Polyfill-Variante zur Einbindung der startsWith()-Methode hat der Entwickler Mathias Bynens bei GitHub zur Verfügung gestellt.

Beispiel 2: Web-Storage-Polyfill

Das zweite Polyfill-JavaScript-Beispiel präsentiert eine einfache Code-Lösung, die Local bzw. Session Storage in allen älteren Browsermodellen verfügbar macht.

if (typeof window.localStorage === 'undefined' || typeof window.sessionStorage === 'undefined') {
    (function () {
        var data = {};
        var Storage = function (type) {
            function setData() {
                // Implement the logic to set data into storage
                var storageData = JSON.stringify(data);
                document.cookie = type + '=' + storageData + ';path=/';
            }
            function clearData() {
                data = {};
                setData();
            }
            return {
                length: 0,
                clear: function () {
                    clearData();
                    this.length = 0;
                },
                getItem: function (key) {
                    return data[key] === undefined ? null : data[key];
                },
                key: function (i) {
                    var ctr = 0;
                    for (var k in data) {
                        if (ctr == i) return k;
                        ctr++;
                    }
                    return null;
                },
                removeItem: function (key) {
                    delete data[key];
                    this.length--;
                    setData();
                },
                setItem: function (key, value) {
                    data[key] = value + '';
                    this.length++;
                    setData();
                }
            };
        };
        // Set the local and session storage properties inside the window object
        if (typeof window.localStorage === 'undefined') window.localStorage = new Storage('local');
        if (typeof window.sessionStorage === 'undefined') window.sessionStorage = new Storage('session');
    })();
}

Bei dem aufgeführten Code handelt es sich um einen Immediately Invoked Function Expression (IIFE), also einen sofort ausgeführten Funktionsausdruck. Bevor der Browser diesen lädt, wird allerdings wie beim ersten Beispiel – per if-Anweisung in der ersten Codezeile – überprüft, ob der Client die Web-Storage-Technologien nativ unterstützt. Falls dies der Fall ist, gibt es für die if-Anweisung den Rückgabewert „false“ (trifft nicht zu), da Typen für Local und Session Storage definiert sind. Die Konsequenz: Der Polyfill wird verworfen.