Polyfill: stringhe di codice per moderne funzioni web

Quando si tratta di scegliere il browser per le quotidiane ricerche in rete, molti utenti puntano sulla tradizione: un’interfaccia conosciuta e una raccolta di preferiti messa assieme negli anni sono per molti utenti dei motivi decisivi per restare fedeli al solito browser. Nemmeno al tema degli aggiornamenti si attribuisce la giusta importanza, perciò potete star certi che molti visitatori navigano sul vostro sito Internet con browser che non supportano le moderne funzioni del web come elementi HTML5 o grafici SVG.

Per recuperare anche questi utenti consigliamo di utilizzare i cosiddetti polyfill. Queste pratiche stringhe di codice rendono utilizzabili le più recenti funzioni del web anche a browser che nella forma nativa non supportano queste componenti. In questo articolo scoprirete cos’è esattamente un polyfill e come utilizzarlo.

Cos’è un polyfill?

Con polyfill o polyfiller si indica una stringa di codice di portata variabile 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 full 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.

N.B.

Il termine “polyfill” deriva dal marchio Polyfilla, molto diffuso in Gran Bretagna per identificare uno stucco per lavori di ammodernamento e risanamento. Lo sviluppatore web Remy Sharp ha pensato che lo stucco, la cui funzione è quella di riempire i fori nelle pareti, fosse una similitudine adatta al pratico codice workaround, per questo gli ha attribuito questo nome nel libro Introducing HTML5, scritto nel 2009 assieme a Bruce Lawson. In seguito polyfill è diventato il nome ufficiale.

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 del 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 e anche le nuove edizioni spesso non hanno implementato completamente i moderni standard di markup. 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) a dire il vero è consigliato già dal 2001 dal consorzio WRC come formato per l’inserimento di grafici vettoriali, ma sta guadagnando terreno dalla comparsa di HTML5. Siccome molti browser difficilmente tengono il passo ci sono polyfill SV come svgweb.
  • ECMAScript: ECMAScript è il linguaggio di programmazione standard di JavaScript costantemente modificato per ampliare passo dopo passo l’insieme delle funzioni del linguaggio script. Le nuove funzionalità come oggetti Promise e simboli funzioni usano i polyfill della libreria standard JavaScript core-js anche in 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, dato in licenza da 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 CORS-Polyfill XHook.
  • CSS (Cascading Style Sheets): CSS da anni è 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 workaround è polyfill css.js.
  • Geolocation: Geolocation-API, per trasmettere la posizione, per lungo tempo si è potuto utilizzare solo con l’aiuto di plug-in aggiuntivi e non era supportato di default 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 (con esempi)?

In generale il codice polyfill JavaScript e gli script polyfill possono essere inseriti direttamente nel documento HTML di un sito Internet. Si integrano senza problemi 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’if-condizionale, 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 in GitHub ha messo a disposizione una variante più complessa e ottimizzata per l’inclusione del metodo “startsWith()”.

N.B.

Il codice illustrato non funziona quando il JavaScript o questo linguaggio script viene disattivato nelle impostazione del browser utilizzato.

Esempio 2: Web-Storage-Polyfill

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

if (typeof window.localStorage == 'undefined' || typeof window.sessionStorage == 'undefined') (function () {
// Define the storage type (local or session)
var Storage = function (type) {
	// Define the storage type (local or session)
	function setData(data) {
		// Sets the data into storage
	}
	function clearData() {
		// clears data from storage
	}
	return {
		length: 0,
		clear: function () {
			clearData();
		},
		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;
				else ctr++;
			}
			return null;
		},
		removeItem: function (key) {
			delete data[key];
			this.length--;
			setData(data);
		},
		setItem: function (key, value) {
			data[key] = value + '';
			this.length++;
			setData(data);
		}
	};
};
// 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 immediatamente invocata. Prima che il browser lo carichi, è verificato, come nel primo esempio con l’if-condizionale nella prima riga di codice, se il client supporti già in origine le tecnologie web storage. In caso affermativo, per l’if-condizionale 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.

Per offrirti una migliore esperienza di navigazione online questo sito web usa dei cookie, propri e di terze parti. Continuando a navigare sul sito acconsenti all’utilizzo dei cookie. Scopri di più sull’uso dei cookie e sulla possibilità di modificarne le impostazioni o negare il consenso.