Hva er polyfills?

Contents

Polyfills er kodekomponenter som gjør nyere nettfunksjoner brukbare i nettlesere som ikke har innebygd støtte for slike funksjoner. Denne artikkelen forklarer hva disse praktiske kodekomponentene er og hvordan du kan bruke dem.

Hva er polyfills, og hvilke språk kan de skrives på?

En polyfill, noen ganger referert til som en Polyfiller, er en kodeblokk av varierende kompleksitet som gjør moderne HTML-, CSS- eller JavaScript-funksjoner tilgjengelige i eldre nettlesere som ikke støtter dem innbygget. De fleste polyfills er skrevet i JavaScript, men andre webprogrammeringsspråk kan også tjene som grunnlag for fyllskript. Noen av de viktigste funksjonene som polyfills gjør tilgjengelige på tvers av forskjellige nettlesere, er HTML5-komponenter som bitmap-baserte canvas-elementer for grafikk, diagrammer og animasjoner.

Note

Begrepet «polyfill» stammer fra det populære britiske merket Polyfilla, som er et fyllingsmiddel for renoverings- og restaureringsarbeid. Webutvikleren Remy Sharp så en passende sammenligning mellom fyllstoffet og disse nyttige omgåelseskodene, siden formålet med begge er å fylle ut hull. Med sistnevnte er hullene som skal fylles ut, hull i nettleserens funksjonalitet. Konseptet ble skapt i Sharps bok Introducing HTML5 fra 2009, som han skrev sammen med Bruce Lawson. Polyfill etablerte seg senere som den offisielle betegnelsen for slike kodekomponenter.

Hvilke typer polyfills finnes det?

Det er ingen tilfeldighet at begrepet polyfill er nært knyttet til HTML5. Med sine avanserte funksjoner, som blant annet har gjort flash-videoer overflødige, har den femte versjonen av hypertekstmarkeringsspråket blitt en fast del av nettet. Støtten for HTML5 i nettlesere har imidlertid utviklet seg ganske sakte. I tillegg til polyfills laget for HTML5-elementer, brukes polyfill-kodeblokker også til å integrere følgende webelementer:

SVG-grafikk: SVG-formatet SVG (Scalable Vector Graphics), som W3C-konsortiet begynte å anbefale som standardformat for vektorgrafikk i 2001, fikk først fotfeste med HTML5. Men fordi mange nettlesere ennå ikke støtter dette formatet, finnes det SVG-polyfills som svgweb.
ECMAScript: ECMAScript er den standardiserte kjernen i JavaScript og oppdateres jevnlig for å utvide språkets funksjonalitet. Funksjoner som Promise-objekter eller Symbol-funksjoner gjøres tilgjengelige i eldre nettlesere gjennom polyfills som JavaScript-standardbiblioteket core-js.
Weblagring: Alternativer til informasjonskapsler som lokal lagring (langtidslagring på klientsiden) og sesjonslagring (lagring begrenset til den aktuelle sesjonen), samlet kjent som web lagring eller DOM Storage, støttes ikke av alle nettleserversjoner. Den MIT-lisensierte webstorage-polyfill er en kjent løsning på dette problemet.
Cross-Origin Resource Sharing (CORS): CORS gjør det mulig for webapplikasjoner å få tilgang til webressurser som ligger utenfor ens egen server. Mange eldre nettlesere støtter ikke denne datautvekslingen. JavaScript-pakken XDomain og CORS-polyfill XHook kan bidra til å løse dette.
CSS (Cascading Style Sheets): I mange år har CSS vært et av de viktigste verktøyene for å designe det visuelle oppsettet til nettsteder. Over tid har stylesheets blitt mer allsidige, noe som har gjort polyfills populære for å kommunisere med eldre nettlesere. Et av de mest kjente verktøyene er css-polyfills.js.
Geolokalisering: I lang tid ble Geolocation API (som brukes til å overføre brukerens posisjon) ikke støttet av nettlesere og kunne bare brukes med hjelp av et ekstra nettleser-plugin. Med en polyfill kan du tilby denne funksjonaliteten til brukere med eldre nettleserversjoner som ikke støtter API-et innbygget.

Hvordan brukes polyfills? (Kodeeksempler inkludert)

Du kan direkte legge inn polyfill JavaScript-kode eller polyfill-skript i HTML-dokumentet til et nettsted. Disse integreres sømløst i den eksisterende kildekoden og utføres bare hvis nettleseren ikke støtter den aktuelle nettfunksjonen. Dette gjøres vanligvis ved hjelp av JavaScripts if for å sjekke om det mangler støtte. Manglende støtte kan da gjøres om til en betingelse for å aktivere skriptet. I de to følgende eksemplene illustrerer vi hvordan dette implementeres og viser deg hvordan den generelle strukturen til en polyfill ser ut.

Eksempel 1: Polyfill for JavaScript-metoden `startsWith()`

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

javascript

Dette lille JavaScript-utdraget gjør det mulig for den påkallende nettleseren å bruke startsWith(), selv om den ikke støtter den innbygget. Denne metoden, som er en del av ECMAScript 6-spesifikasjonen, sjekker om en streng begynner med tegnet eller tegnserien til en annen streng. Hvis den gjør det, returnerer den «true», ellers returnerer den «false». Du finner en mer kompleks, optimalisert versjon for integrering av startsWith() på GitHub-siden til utvikleren Mathias Bynens.

Note

Koden som presenteres her vil ikke fungere hvis nettklienten blokkerer JavaScript eller har deaktivert skriptspråket i innstillingene.

Eksempel 2: Polyfill for nettlagring

Denne JavaScript-polyfill er en enkel kodingsløsning som gjør lokal lagring og sesjonslagring tilgjengelig i eldre nettlesermodeller.

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