Polyfill: pezzi di codice per moderne funzioni web

Grazie ai polyfill è possibile utilizzare le nuove funzionalità web nei browser internet che non dispongono di un supporto nativo per questi componenti. In questo articolo, scoprirai in dettaglio cosa sono i pratici blocchi di codice e come puoi utilizzare questa tecnologia.

Cos’è un polyfill?

Con polyfill o polyfiller si indica un pezzo di codice che consente di accedere alle moderne funzioni HTML, CSS o JavaScript nei vecchi browser, ai quali in origine manca tale supporto. Nella maggior parte dei casi, un polyfill è scritto in JavaScript, però sono possibili anche altri linguaggi di programmazione web come base per questi script. Tra le più importanti funzioni che possono essere rese disponibili tramite polyfill in tutti i browser e indipendentemente da quale sia utilizzato, troviamo componenti HTML5 come l’elemento Canvas su Bitmap per grafici, diagrammi e animazioni.

Quali tipi di polyfill ci sono?

Non è un caso che il termine polyfill sia strettamente collegato a HTML5: con le sue funzioni straordinarie, che hanno reso obsoleta la necessità di utilizzare Flashvideo, la quinta versione dell’Hypertext Markup Language è diventata un elemento imprescindibile nel web. Relativamente al supporto HTML5 da parte dei browser, lo sviluppo ha avuto un decorso relativamente difficoltoso. Oltre ai polyfill per gli elementi HTML5, i pezzi di codice polyfill sono richiesti anche per l’integrazione dei seguenti componenti web:

• Grafici SVG: il formato SVG (Scalable Vector Graphics) è stato già consigliato dal 2001 dal consorzio W3C come formato standard per i grafici vettoriali, ma si sta diffondendo dalla comparsa di HTML5. Siccome molti browser difficilmente tengono il passo, ci sono polyfill SVG come svgweb.
• ECMAScript: ECMAScript è il nucleo standardizzato di JavaScript e viene regolarmente aggiornato per estendere le funzioni del linguaggio di scripting. Le nuove funzionalità, come oggetti Promise e simboli, usano i polyfill della libreria standard JavaScript core-js anche nelle versioni precedenti del browser.
• Web Storage: anche le opzioni cookie Local Storage (salvataggio permanente lato client) e Session Storage (salvataggio limitato all’attuale sessione), che si possono raggruppare sotto l’iperonimo Web Storage o DOM Storage, non sono supportate da tutte le versioni dei browser. Un polyfill conosciuto, creato per superare questo problema è webstorage-polyfill, provvisto di licenza MIT.
• Cross-Origin Resource Sharing (CORS): CORS consente alle applicazioni web l’accesso alle risorse web che si trovano al di fuori del proprio server. Molti vecchi browser non supportano questo scambio di dati. Un aiuto è fornito dal pacchetto JavaScript XDomain e da Polyfill CORS XHook.
• CSS (Cascading Style Sheets): da anni, CSS è uno dei principali strumenti per la configurazione grafica dei siti web. Nel corso del tempo gli stylesheet (fogli di stile) sono diventati sempre più numerosi e quindi i polyfill sono richiesti sempre di più come interfaccia per i vecchi modelli di browser. Uno dei più conosciuti strumenti di questo tipo è polyfill css.js.
• Geolocation: l’API Geolocation, per trasmettere la posizione, per lungo tempo si è potuta utilizzare solo con l’aiuto di plugin aggiuntivi e non era supportata per impostazione predefinita dai browser. Se si vuole rendere disponibile questa funzione anche ai browser precedenti senza un’estensione, si può utilizzare un polyfill.

Come sono utilizzati i polyfill? Alcuni esempi

Puoi inserire il codice polyfill JavaScript o gli script polyfill direttamente nel documento HTML di un sito internet. Si integrano facilmente nel codice sorgente esistente e, in caso di programmazione corretta, vengono impiegati quando il browser non supporta effettivamente alcune caratteristiche. In JavaScript si utilizza ad esempio l’istruzione if, con il quale il supporto mancante è definito come condizione per l’attivazione 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 JavaScript startsWith()

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

Questo snippet JavaScript permette al browser che invia la richiesta di utilizzare il metodo JavaScript startsWith() anche quando realmente non lo supporta. Questo metodo, che fa parte della specifica ECMAScript-6, stabilisce se una determinata stringa inizia con il segno o la successione 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 utilizzato nel caso in cui il browser supporti già in origine il metodo.

Lo sviluppatore Mathias Bynens su GitHub ha messo a disposizione una variante più complessa e ottimizzata per l’inclusione del metodo “startsWith()”.

Esempio 2: Polyfill Web Storage

Il secondo esempio di polyfill JavaScript presenta una semplice soluzione di codice, che rende disponibile il salvataggio locale o di sessione in tutte le versioni di browser precedenti.

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 richiamato è un Immediately Invoked Function Expression (IIFE), ossia un’espressione di funzione eseguita immediatamente. Prima che il browser lo carichi, viene verificato come nel primo esempio con l’istruzione if nella prima riga di codice, se il client supporti già in origine le tecnologie di web storage. In caso affermativo, per l’istruzione if vi è un valore di ritorno “false” (falso), perché ci sono già definiti dei modelli per il salvataggio locale e di sessione. Ne consegue che il polyfill venga rifiutato.