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

Polyfills machen neuere Web-Features auch in In­ter­net­brow­sern nutzbar, denen die native Un­ter­stüt­zung dieser Kom­po­nen­ten ei­gent­lich fehlt. Was die prak­ti­schen Code-Bausteine im Detail ausmacht und wie Sie diese Tech­no­lo­gie verwenden können, erfahren Sie in diesem Artikel.

Was ist Polyfill?

Als Polyfill oder auch Po­ly­fil­ler be­zeich­net man einen mehr oder weniger um­fang­rei­chen Code-Baustein, der moderne HTML-, CSS- oder Ja­va­Script-Funk­tio­nen in älteren Browsern verfügbar macht, denen die Un­ter­stüt­zung von Haus aus fehlt. In den meisten Fällen ist ein Polyfill in Ja­va­Script ge­schrie­ben – grund­sätz­lich sind aber auch andere Web-Pro­gram­mier­spra­chen als Basis für diese „Füll“-Skripte möglich. Zu den wich­tigs­ten Features, die durch Polyfills brow­se­r­ü­ber­grei­fend bzw. -un­ab­hän­gig verfügbar gemacht werden, gehören HTML5-Kom­po­nen­ten wie das Bitmap-basierte Canvas-Element für Grafiken, Diagramme und Ani­ma­tio­nen.

Welche Polyfills gibt es?

Dass der Begriff Polyfill eng an HTML5 geknüpft ist, ist kein Zufall: Mit seinen fort­schritt­li­chen Features, die unter anderem die Not­wen­dig­keit von Flash­vi­de­os passé gemacht haben, hat sich die fünfte Version der Hypertext Markup Language schnell zu einer festen Größe im Web ent­wi­ckelt. Hin­sicht­lich der HTML5-Un­ter­stüt­zung durch die Browser verlief die Ent­wick­lung al­ler­dings relativ schlep­pend. Neben Polyfills für HTML5-Elemente sind Polyfill-Code-Bausteine unter anderem auch bei der Ein­bin­dung folgender Web-Elemente gefragt:

• SVG-Grafiken: Das SVG-Format (Scalable Vector Graphics) wird seit 2001 vom W3C-Kon­so­r­itum als Stan­dard­for­mat für Vek­tor­gra­fi­ken empfohlen, ist jedoch erst seit HTML5 ver­brei­tet. Da viele Browser bei der Un­ter­stüt­zung hin­ter­her­hin­ken, gibt es SVG-Polyfills wie svgweb.
• EC­MA­Script: EC­MA­Script ist der stan­dar­di­sier­te Kern von Ja­va­Script und wird re­gel­mä­ßig ak­tua­li­siert, um den Funk­ti­ons­um­fang der Skript­spra­che zu erweitern. Die neuesten Features wie Promise-Objekte oder Symbol-Funk­tio­nen funk­tio­nie­ren dank Polyfills der Ja­va­Script-Stan­dard­bi­blio­thek core-js auch in älteren Brow­ser­ver­sio­nen.
• Web Storage: Auch die Cookie-Al­ter­na­ti­ven Local Storage (dau­er­haf­te Spei­che­rung auf Client-Seiten) und Session Storage (Spei­che­rung auf aktuelle Sitzung be­schränkt), die sich unter dem Ober­be­griff Web Storage oder DOM Storage zu­sam­men­fas­sen lassen, werden nicht von allen Browser-Versionen un­ter­stützt. Ein bekanntes Polyfill, das zur Behebung dieses Problems ge­schrie­ben wurde, ist das MIT-li­zen­zier­te websto­rage-polyfill.
• Cross-Origin Resource Sharing (CORS): CORS erlaubt Web­an­wen­dun­gen den Zugriff auf Web-Res­sour­cen, die außerhalb des eigenen Servers liegen. Viele ältere Browser un­ter­stüt­zen diesen Da­ten­aus­tausch nicht. Abhilfe schafft eine Kom­bi­na­ti­on aus dem Ja­va­Script-Paket XDomain und dem CORS-Polyfill XHook.
• CSS (Cascading Style Sheets): CSS ist seit Jahren eines der wich­tigs­ten Werkzeuge zur gra­fi­schen Ge­stal­tung von Websites. Im Laufe der Jahre sind die Style­sheets immer viel­sei­ti­ger geworden, weshalb Polyfills als Schnitt­stel­le zu älteren Browser-Modellen sehr gefragt sind. Eines der be­kann­tes­ten Work­around-Werkzeuge ist css-polyfills.js.
• Geo­lo­ca­ti­on: Das Geo­lo­ca­ti­on-API zum Über­mit­teln des eigenen Standorts war lange Zeit nur mithilfe zu­sätz­li­cher Browser-Plugins nutzbar und wurde nicht stan­dard­mä­ßig von den Browsern un­ter­stützt. Will man die Funktion auch für Nutzende älterer Webclient-Versionen ohne Er­wei­te­rung verfügbar machen, kann man das ebenfalls mit einem Polyfill erreichen.

Wie werden Polyfills an­ge­wen­det (inkl. Beispiel)?

Sie können Polyfill-Ja­va­Script-Code bzw. Polyfill-Skripte direkt in das HTML-Dokument eines Web­pro­jekts einbetten. Dabei in­te­grie­ren sie sich nahtlos in den be­stehen­den Quellcode und werden bei korrekter Pro­gram­mie­rung nur dann aus­ge­führt, wenn der zu­grei­fen­de Browser das jeweilige Web­fea­ture tat­säch­lich nicht un­ter­stützt. Zu diesem Zweck wird in Ja­va­Script bei­spiels­wei­se die if-Anweisung verwendet, mit deren Hilfe sich der fehlende Support als Bedingung für die Ak­ti­vie­rung des Skripts de­fi­nie­ren lässt. Wie genau dies im Code fest­zu­hal­ten ist und wie der Aufbau eines Polyfills im All­ge­mei­nen aussieht, ver­deut­li­chen die folgenden zwei Beispiele.

Beispiel 1: Polyfill für die Ja­va­Script-Methode startsWith()

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

Dieses kleine Ja­va­Script-Snippet er­mög­licht dem auf­ru­fen­den Browser, die Ja­va­Script-Methode startsWith() zu nutzen, auch wenn er diese ei­gent­lich nicht un­ter­stützt. Diese Methode, die Teil der EC­MA­Script-6-Spe­zi­fi­ka­ti­on ist, stellt fest, ob ein be­stimm­ter String mit den Zeichen bzw. der Zei­chen­fol­ge eines anderen Strings beginnt. Ist dies der Fall, gibt sie den Wert „true“ (trifft zu), an­dern­falls 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 un­ter­stützt.

Eine kom­ple­xe­re, op­ti­mier­te Polyfill-Variante zur Ein­bin­dung der startsWith()-Methode hat der Ent­wick­ler Mathias Bynens bei GitHub zur Verfügung gestellt.

Beispiel 2: Web-Storage-Polyfill

Das zweite Polyfill-Ja­va­Script-Beispiel prä­sen­tiert eine einfache Code-Lösung, die Local bzw. Session Storage in allen älteren Brow­ser­mo­del­len 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 auf­ge­führ­ten Code handelt es sich um einen Imme­dia­te­ly Invoked Function Expression (IIFE), also einen sofort aus­ge­führ­ten Funk­ti­ons­aus­druck. Bevor der Browser diesen lädt, wird al­ler­dings wie beim ersten Beispiel – per if-Anweisung in der ersten Codezeile – überprüft, ob der Client die Web-Storage-Tech­no­lo­gien nativ un­ter­stützt. Falls dies der Fall ist, gibt es für die if-Anweisung den Rück­ga­be­wert „false“ (trifft nicht zu), da Typen für Local und Session Storage definiert sind. Die Kon­se­quenz: Der Polyfill wird verworfen.