Polyfill: pezzi di codice per moderne funzioni web

Grazie ai polyfill è possibile uti­liz­za­re le nuove fun­zio­na­li­tà web nei browser internet che non di­spon­go­no di un supporto nativo per questi com­po­nen­ti. In questo articolo, scoprirai in dettaglio cosa sono i pratici blocchi di codice e come puoi uti­liz­za­re questa tec­no­lo­gia.

Cos’è un polyfill?

Con polyfill o po­ly­fil­ler si indica un pezzo di codice che consente di accedere alle moderne funzioni HTML, CSS o Ja­va­Script nei vecchi browser, ai quali in origine manca tale supporto. Nella maggior parte dei casi, un polyfill è scritto in Ja­va­Script, però sono possibili anche altri linguaggi di pro­gram­ma­zio­ne web come base per questi script. Tra le più im­por­tan­ti funzioni che possono essere rese di­spo­ni­bi­li tramite polyfill in tutti i browser e in­di­pen­den­te­men­te da quale sia uti­liz­za­to, troviamo com­po­nen­ti HTML5 come l’elemento Canvas su Bitmap per grafici, diagrammi e ani­ma­zio­ni.

Quali tipi di polyfill ci sono?

Non è un caso che il termine polyfill sia stret­ta­men­te collegato a HTML5: con le sue funzioni straor­di­na­rie, che hanno reso obsoleta la necessità di uti­liz­za­re Fla­sh­vi­deo, la quinta versione dell’Hypertext Markup Language è diventata un elemento im­pre­scin­di­bi­le nel web. Re­la­ti­va­men­te al supporto HTML5 da parte dei browser, lo sviluppo ha avuto un decorso re­la­ti­va­men­te dif­fi­col­to­so. Oltre ai polyfill per gli elementi HTML5, i pezzi di codice polyfill sono richiesti anche per l’in­te­gra­zio­ne dei seguenti com­po­nen­ti web:

• Grafici SVG: il formato SVG (Scalable Vector Graphics) è stato già con­si­glia­to dal 2001 dal consorzio W3C come formato standard per i grafici vet­to­ria­li, ma si sta dif­fon­den­do dalla comparsa di HTML5. Siccome molti browser dif­fi­cil­men­te tengono il passo, ci sono polyfill SVG come svgweb.
• EC­MA­Script: EC­MA­Script è il nucleo stan­dar­diz­za­to di Ja­va­Script e viene re­go­lar­men­te ag­gior­na­to per estendere le funzioni del lin­guag­gio di scripting. Le nuove fun­zio­na­li­tà, come oggetti Promise e simboli, usano i polyfill della libreria standard Ja­va­Script core-js anche nelle versioni pre­ce­den­ti del browser.
• Web Storage: anche le opzioni cookie Local Storage (sal­va­tag­gio per­ma­nen­te lato client) e Session Storage (sal­va­tag­gio limitato all’attuale sessione), che si possono rag­grup­pa­re sotto l’iperonimo Web Storage o DOM Storage, non sono sup­por­ta­te da tutte le versioni dei browser. Un polyfill co­no­sciu­to, creato per superare questo problema è web­sto­ra­ge-polyfill, provvisto di licenza MIT.
• Cross-Origin Resource Sharing (CORS): CORS consente alle ap­pli­ca­zio­ni web l’accesso alle risorse web che si trovano al di fuori del proprio server. Molti vecchi browser non sup­por­ta­no questo scambio di dati. Un aiuto è fornito dal pacchetto Ja­va­Script XDomain e da Polyfill CORS XHook.
• CSS (Cascading Style Sheets): da anni, CSS è uno dei prin­ci­pa­li strumenti per la con­fi­gu­ra­zio­ne grafica dei siti web. Nel corso del tempo gli sty­le­sheet (fogli di stile) sono diventati sempre più numerosi e quindi i polyfill sono richiesti sempre di più come in­ter­fac­cia per i vecchi modelli di browser. Uno dei più co­no­sciu­ti strumenti di questo tipo è polyfill css.js.
• Geo­lo­ca­tion: l’API Geo­lo­ca­tion, per tra­smet­te­re la posizione, per lungo tempo si è potuta uti­liz­za­re solo con l’aiuto di plugin ag­giun­ti­vi e non era sup­por­ta­ta per im­po­sta­zio­ne pre­de­fi­ni­ta dai browser. Se si vuole rendere di­spo­ni­bi­le questa funzione anche ai browser pre­ce­den­ti senza un’esten­sio­ne, si può uti­liz­za­re un polyfill.

Come sono uti­liz­za­ti i polyfill? Alcuni esempi

Puoi inserire il codice polyfill Ja­va­Script o gli script polyfill di­ret­ta­men­te nel documento HTML di un sito internet. Si integrano fa­cil­men­te nel codice sorgente esistente e, in caso di pro­gram­ma­zio­ne corretta, vengono impiegati quando il browser non supporta ef­fet­ti­va­men­te alcune ca­rat­te­ri­sti­che. In Ja­va­Script si utilizza ad esempio l’istru­zio­ne if, con il quale il supporto mancante è definito come con­di­zio­ne per l’at­ti­va­zio­ne dello script. I due seguenti esempi spiegano come fissare tutto ciò in un codice e come appare la struttura di un polyfill.

Esempio 1: polyfill per il sistema Ja­va­Script startsWith()

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

Questo snippet Ja­va­Script permette al browser che invia la richiesta di uti­liz­za­re il metodo Ja­va­Script startsWith() anche quando realmente non lo supporta. Questo metodo, che fa parte della specifica EC­MA­Script-6, sta­bi­li­sce se una de­ter­mi­na­ta stringa inizia con il segno o la suc­ces­sio­ne di segni di un’altra stringa. Nel caso sia così fornisce il valore “true” (vero), in caso contrario “false” (falso). La prima riga del codice fa in modo che lo script non sia uti­liz­za­to nel caso in cui il browser supporti già in origine il metodo.

Lo svi­lup­pa­to­re Mathias Bynens su GitHub ha messo a di­spo­si­zio­ne una variante più complessa e ot­ti­miz­za­ta per l’in­clu­sio­ne del metodo “starts­With()”.

Esempio 2: Polyfill Web Storage

Il secondo esempio di polyfill Ja­va­Script presenta una semplice soluzione di codice, che rende di­spo­ni­bi­le il sal­va­tag­gio locale o di sessione in tutte le versioni di browser pre­ce­den­ti.

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

Il codice ri­chia­ma­to è un Imme­dia­te­ly Invoked Function Expression (IIFE), ossia un’espres­sio­ne di funzione eseguita im­me­dia­ta­men­te. Prima che il browser lo carichi, viene ve­ri­fi­ca­to come nel primo esempio con l’istru­zio­ne if nella prima riga di codice, se il client supporti già in origine le tec­no­lo­gie di web storage. In caso af­fer­ma­ti­vo, per l’istru­zio­ne if vi è un valore di ritorno “false” (falso), perché ci sono già definiti dei modelli per il sal­va­tag­gio locale e di sessione. Ne consegue che il polyfill venga rifiutato.