Kaj so polyfills?

Polyfills so kom­po­nen­te kode, ki omogočajo uporabo novejših spletnih funkcij v br­skal­ni­kih, ki teh funkcij ne podpirajo. V tem članku je po­ja­snje­no, kaj so te praktične kom­po­nen­te kode in kako jih lahko upo­ra­blja­te.

Kaj so polyfills in v katerih jezikih se lahko pišejo?

Polyfill, včasih imenovan tudi Po­ly­fil­ler, je blok kode različne kom­ple­ksno­sti, ki omogoča uporabo sodobnih funkcij HTML, CSS ali Ja­va­Script v starejših br­skal­ni­kih, ki jih ne podpirajo. Večina po­ly­fil­lov je napisana v Ja­va­Scrip­tu, vendar lahko kot osnova za filler skripte služijo tudi drugi spletni pro­gram­ski jeziki. Nekatere od naj­po­memb­nej­ših funkcij, ki jih polyfilli omogočajo v različnih spletnih br­skal­ni­kih, so HTML5 kom­po­nen­te, kot so bitmapni elementi platna za grafike, grafe in animacije.

Katere vrste po­ly­fil­lov obstajajo?

Dejstvo, da je izraz polyfill tesno povezan z HTML5, ni naključje. S svojimi na­pre­dni­mi funk­ci­ja­mi, ki so med drugim naredile flash videe za zastarele, je peta različica hi­per­te­ks­tne­ga ozna­če­val­ne­ga jezika postala stalna zna­čil­nost spleta. Vendar pa se podpora za HTML5 v br­skal­ni­kih razvija precej počasi. Poleg po­ly­fil­lov, ustvar­je­nih za HTML5 elemente, se polyfill kodni bloki upo­ra­blja­jo tudi za in­te­gra­ci­jo na­sle­dnjih spletnih elementov:

• SVG grafika: format SVG SVG (Scalable Vector Graphics), ki ga je konzorcij W3C leta 2001 začel pri­po­ro­ča­ti kot stan­dar­dni format za vektorsko grafiko, je najprej pridobil po­pu­lar­nost z HTML5. Ker pa mnogi br­skal­ni­ki še ne podpirajo tega formata, obstajajo SVG polyfills, kot je svgweb.
• ECMA­Script: ECMA­Script je stan­dar­di­zi­ra­no jedro Ja­va­Script in se redno po­so­da­blja, da se razširi funk­ci­o­nal­nost jezika. Funkcije, kot so Promise objekti ali Symbol funkcije, so na voljo v starejših br­skal­ni­kih prek po­ly­fil­lov, kot je stan­dar­dna knjižnica Ja­va­Script core-js.
• Spletno shra­nje­va­nje: al­ter­na­ti­ve piškotkom, kot so lokalno shra­nje­va­nje (dol­go­roč­no shra­nje­va­nje na strani odjemalca) in shra­nje­va­nje sej (shra­nje­va­nje, omejeno na trenutno sejo), skupaj znane kot spletno shra­nje­va­nje ali DOM Storage, niso podprte v vseh raz­li­či­cah br­skal­ni­kov. Polnilo web­sto­ra­ge-polyfill z licenco MIT je znana rešitev za to težavo.
• Cross-Origin Resource Sharing (CORS): CORS omogoča spletnim apli­ka­ci­jam dostop do spletnih virov, ki se nahajajo zunaj lastnega strežnika. Mnogi starejši br­skal­ni­ki te izmenjave podatkov ne podpirajo. Ja­va­Script paket XDomain in CORS polyfill XHook lahko pomagata rešiti to težavo.
• CSS (Cascading Style Sheets): CSS je že leta eno naj­po­memb­nej­ših orodij za obli­ko­va­nje vizualne po­sta­vi­tve spletnih strani. Sčasoma so se stilne predloge postale bolj vse­stran­ske, zaradi česar so polyfilli postali pri­lju­blje­ni za po­ve­zo­va­nje s sta­rej­ši­mi br­skal­ni­ki. Eno najbolj znanih orodij je css-polyfills.js.
• Ge­o­lo­ka­ci­ja: dolgo časa br­skal­ni­ki niso podpirali API-ja za ge­o­lo­ka­ci­jo (ki se uporablja za prenos lokacije upo­rab­ni­ka) in ga je bilo mogoče upo­ra­blja­ti le s pomočjo dodatnega vtičnika za brskalnik. S po­ly­fil­lom lahko to funk­ci­o­nal­nost ponudite upo­rab­ni­kom s sta­rej­ši­mi raz­li­či­ca­mi br­skal­ni­kov, ki API-ja ne podpirajo.

Kako se upo­ra­blja­jo polyfilli? (Vključeni primeri kode)

Ja­va­Script kodo polyfill ali skripte polyfill lahko ne­po­sre­dno vstavite v HTML dokument spletne strani. Ti se brezhibno in­te­gri­ra­jo v obstoječo izvorno kodo in se izvedejo le, če brskalnik ne podpira določene spletne funkcije. To se običajno opravi z uporabo if Ja­va­Script, ki preverita, ali podpora manjka. Po­manj­ka­nje podpore se nato lahko spremeni v pogoj za ak­ti­vi­ra­nje skripta. V na­sle­dnjih dveh primerih bomo po­na­zo­ri­li, kako to izvesti, in vam pokazali, kako izgleda splošna struktura polyfilla.

Primer 1: Polyfill za metodo Ja­va­Script startsWith()

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

Ta majhen odlomek Ja­va­Script omogoča br­skal­ni­ku, ki ga pokliče, da uporabi metodo startsWith(), tudi če je ne podpira vgrajeno. Ta metoda, ki je del spe­ci­fi­ka­ci­je ECMA­Script 6, preveri, ali se niz začne z znakom ali nizom znakov drugega niza. Če se, vrne »true«, sicer pa vrne »false«. Bolj zapleteno, op­ti­mi­zi­ra­no različico za in­te­gra­ci­jo startsWith() lahko najdete na strani GitHub raz­vi­jal­ca Mathiasa Bynensa.

Primer 2: Polnilo za spletno shra­nje­va­nje

Ta Ja­va­Script polyfill je preprosta rešitev za kodiranje, ki omogoča lokalno shra­nje­va­nje in shra­nje­va­nje sej v starejših modelih br­skal­ni­kov.

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');
    })();
}

Zgornja koda je izraz takojšnje izvedbe funkcije(IIFE). Preden jo brskalnik naloži, pa ukaz if v prvi vrstici kode preveri, ali stranka izvorno podpira teh­no­lo­gi­je spletnega shra­nje­va­nja. Če jih podpira, bo izjava if vrnila vrednost false, ker so tipi za lokalno in sejno shra­nje­va­nje že de­fi­ni­ra­ni. To povzroči, da se polyfill zavrže.