Mitä ovat po­ly­fil­lit?

Po­ly­fil­lit ovat koo­di­kom­po­nent­te­ja, jotka mah­dol­lis­ta­vat uusien verk­ko­toi­min­to­jen käytön se­lai­mis­sa, jotka eivät tue näitä toi­min­to­ja na­tii­vis­ti. Tässä ar­tik­ke­lis­sa se­li­te­tään, mitä nämä käy­tän­nöl­li­set koo­di­kom­po­nen­tit ovat ja miten niitä voidaan käyttää.

Mitä po­ly­fil­lit ovat ja millä kielillä ne voidaan kir­joit­taa?

Polyfill, jota joskus kutsutaan myös nimellä Po­ly­fil­ler, on vaih­te­le­van mo­ni­mut­kai­suusas­teen koo­di­loh­ko, joka mah­dol­lis­taa ny­ky­ai­kais­ten HTML-, CSS- tai Ja­vaSc­ript-toi­min­to­jen käytön van­hem­mis­sa se­lai­mis­sa, jotka eivät tue niitä na­tii­vis­ti. Useimmat po­ly­fil­lit on kir­joi­tet­tu Ja­vaSc­ript-kielellä, mutta myös muut web-oh­jel­moin­ti­kie­let voivat toimia täy­tesc­rip­tien perustana. Tär­keim­piä po­ly­fil­lien eri se­lai­mis­sa mah­dol­lis­ta­mia omi­nai­suuk­sia ovat HTML5- kom­po­nen­tit, kuten bit­ti­kart­ta­poh­jai­set canvas-elementit gra­fiik­kaa, kaavioita ja ani­maa­tioi­ta varten.

Mitä erilaisia polyfill-tyyppejä on olemassa?

Se, että termi polyfill liittyy lä­hei­ses­ti HTML5:een, ei ole sattumaa. Edis­ty­neil­lä omi­nai­suuk­sil­laan, jotka ovat muun muassa tehneet flash-videoista tar­peet­to­mia, hy­per­teks­ti­merk­ki­kie­len viides versio on tullut pysyväksi osaksi verkkoa. HTML5:n tuki se­lai­mis­sa on kuitenkin ke­hit­ty­nyt melko hitaasti. HTML5-ele­men­teil­le luotujen po­ly­fil­lien lisäksi polyfill-koo­di­loh­ko­ja käytetään myös seu­raa­vien verk­koe­le­ment­tien in­tegroi­mi­seen:

• SVG-grafiikka: SVG-muoto SVG (Scalable Vector Graphics), jota W3C-konsortio alkoi suo­si­tel­la vek­to­rigra­fii­kan va­kio­muo­to­na vuonna 2001, sai en­sim­mäi­sen kerran suosiota HTML5:n myötä. Koska monet selaimet eivät vielä tue tätä muotoa, on olemassa SVG-po­ly­fil­le­jä, kuten svgweb.
• EC­MASc­ript: EC­MASc­ript on Ja­vaSc­rip­tin stan­dar­doi­tu ydin, jota päi­vi­te­tään sään­nöl­li­ses­ti kielen toi­min­nal­li­suu­den laa­jen­ta­mi­sek­si. Omi­nai­suu­det, kuten Promise-objektit tai Symbol-funktiot, ovat käy­tet­tä­vis­sä van­hem­mis­sa se­lai­mis­sa po­ly­fil­lien, kuten Ja­vaSc­ript-stan­dar­di­kir­jas­ton core-js, avulla.
• Verk­ko­tal­len­nus: Eväs­tei­den vaih­toeh­to­ja, kuten pai­kal­li­nen tallennus (pit­kä­ai­kai­nen tallennus asia­kas­puo­lel­la) ja is­tun­to­tal­len­nus (tallennus ra­joi­tet­tu nykyiseen istuntoon), joita kutsutaan yhdessä verk­ko­tal­len­nuk­sek­si tai DOM-tal­len­nuk­sek­si, eivät kaikki se­lain­ver­siot tue. MIT-li­sen­soi­tu webs­to­ra­ge-polyfill on tunnettu ratkaisu tähän ongelmaan.
• Cross-Origin Resource Sharing (CORS): CORS mah­dol­lis­taa web-so­vel­lus­ten pääsyn oman pal­ve­li­men ul­ko­puo­lel­la si­jait­se­viin web-re­surs­sei­hin. Monet vanhemmat selaimet eivät tue tätä tie­don­siir­toa. Ja­vaSc­ript-paketti XDomain ja CORS-polyfill XHook voivat auttaa rat­kai­se­maan tämän ongelman.
• CSS (Cascading Style Sheets): CSS on jo vuosia ollut yksi tär­keim­mis­tä työ­ka­luis­ta verk­ko­si­vus­to­jen vi­su­aa­li­sen ulkoasun suun­nit­te­lus­sa. Ajan myötä tyy­li­tie­dos­tot ovat tulleet mo­ni­puo­li­sem­mik­si, mikä on tehnyt po­ly­fil­leis­tä suo­sit­tu­ja van­hem­pien selainten kanssa käy­tet­tä­viä ra­ja­pin­to­ja. Yksi tun­ne­tuim­mis­ta työ­ka­luis­ta on css-polyfills.js.
• Geo­lo­kaa­tio: pitkään selaimet eivät tukeneet Geo­loca­tion API:ta (jota käytetään käyttäjän sijainnin vä­lit­tä­mi­seen), ja sitä voitiin käyttää vain li­sä­laa­jen­nuk­sen avulla. Po­ly­fil­lin avulla voit tarjota tämän toi­min­nal­li­suu­den käyt­tä­jil­le, joilla on vanhemmat se­lain­ver­siot, jotka eivät tue API:ta na­tii­vis­ti.

Miten po­ly­fil­le­jä käytetään? (Sisältää koo­die­si­merk­ke­jä)

Voit upottaa polyfill-Ja­vaSc­ript-koodin tai polyfill-skriptit suoraan verk­ko­si­vus­ton HTML-do­ku­ment­tiin. Ne in­tegroi­tu­vat sau­mat­to­mas­ti olemassa olevaan läh­de­koo­diin ja suo­ri­te­taan vain, jos selain ei tue tiettyä verk­ko­toi­min­toa. Tämä tehdään tyy­pil­li­ses­ti Ja­vaSc­rip­tin if, joka tarkistaa puuttuvan tuen. Tuen puut­tu­mi­nen voidaan sitten muuttaa ehdoksi skriptin ak­ti­voi­mi­sek­si. Seu­raa­vis­sa kahdessa esi­mer­kis­sä ha­vain­nol­lis­tam­me, miten tämä to­teu­te­taan, ja näytämme, miltä po­ly­fil­lin yleinen rakenne näyttää.

Esimerkki 1: Polyfill Ja­vaSc­ript-me­ne­tel­mäl­le startsWith()

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

Tämä pieni Ja­vaSc­ript-koo­din­pät­kä mah­dol­lis­taa kutsuvan selaimen käyttää startsWith(), vaikka se ei tu­ki­si­kaan sitä na­tii­vis­ti. Tämä menetelmä, joka on osa EC­MASc­ript 6 -spe­si­fi­kaa­tio­ta, tarkistaa, alkaako merk­ki­jo­no toisen merk­ki­jo­non merkillä tai merk­ki­jo­nol­la. Jos näin on, se palauttaa arvon “true”, muuten se palauttaa arvon “false”. Löydät mo­ni­mut­kai­sem­man, op­ti­moi­dun version startsWith() in­tegroi­mi­sek­si kehittäjä Mathias Bynensin GitHub-sivulta.

Esimerkki 2: Verk­ko­tal­len­nus­ti­lan polyfill

Tämä Ja­vaSc­ript-polyfill on yk­sin­ker­tai­nen koo­daus­rat­kai­su, joka mah­dol­lis­taa pai­kal­li­sen ja istunnon tal­len­nus­ti­lan käytön van­hem­mis­sa se­lain­mal­leis­sa.

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

Yllä oleva koodi on vä­lit­tö­mäs­ti kutsuttu funk­tio­lause­ke(IIFE). Ennen kuin selain lataa sen, en­sim­mäi­sen rivin komento if tarkistaa, tukeeko asiakas na­tii­vis­ti web-tal­len­nus­tek­nii­koi­ta. Jos tukee, lause if palauttaa arvon false, koska pai­kal­li­sen ja istunnon tal­len­nus­tyy­pit on jo mää­ri­tel­ty. Tämä johtaa po­ly­fil­lin hyl­kää­mi­seen.