Wat zijn polyfills?
Polyfills zijn codecomponenten die nieuwere webfuncties bruikbaar maken in browsers die dergelijke functies niet standaard ondersteunen. In dit artikel wordt uitgelegd wat deze praktische codecomponenten zijn en hoe u ze kunt gebruiken.
Wat zijn polyfills en in welke talen kunnen ze worden geschreven?
Een polyfill, ook wel polyfiller genoemd, is een codeblok van verschillende complexiteit dat moderne HTML-, CSS- of JavaScript-functies beschikbaar maakt in oudere browsers die deze niet standaard ondersteunen. De meeste polyfills zijn geschreven in JavaScript, maar ook andere webprogrammeertalen kunnen als basis dienen voor fillerscripts. Enkele van de belangrijkste functies die polyfills beschikbaar maken in verschillende webbrowsers zijn HTML5-componenten zoals de op bitmaps gebaseerde canvaselementen voor afbeeldingen, grafieken en animaties.
De term ‘polyfill’ is afgeleid van het populaire Britse merk Polyfilla, een vulmiddel voor renovatie- en restauratiewerkzaamheden. Webontwikkelaar Remy Sharp zag een passende vergelijking tussen de vulstof en deze handige workaround-codes, aangezien beide bedoeld zijn om hiaten op te vullen. Bij deze laatste zijn de hiaten die moeten worden opgevuld hiaten in de functionaliteit van de browser. Het concept werd bedacht in Sharps boek Introducing HTML5 uit 2009, dat hij samen met Bruce Lawson schreef. Polyfill werd vervolgens de officiële benaming voor dergelijke codecomponenten.
Welke soorten polyfills zijn er?
Het feit dat de term polyfill nauw verbonden is met HTML5 is geen toeval. Met zijn geavanceerde functies, die onder andere de noodzaak van flashvideo’s overbodig hebben gemaakt, is de vijfde versie van de hypertext markup language een vast onderdeel van het web geworden. De ondersteuning voor HTML5 in browsers heeft zich echter vrij langzaam ontwikkeld. Naast de polyfills die voor HTML5-elementen zijn gemaakt, worden polyfill-codeblokken ook gebruikt om de volgende webelementen te integreren:
- SVG-afbeeldingen: het SVG-formaat SVG (Scalable Vector Graphics), dat het W3C-consortium in 2001 begon aan te bevelen als standaardformaat voor vectorafbeeldingen, werd voor het eerst populair met HTML5. Maar omdat veel browsers dit formaat nog niet ondersteunen, zijn er SVG-polyfills zoals svgweb.
- ECMAScript: ECMAScript is de gestandaardiseerde kern van JavaScript en wordt regelmatig bijgewerkt om de functionaliteit van de taal uit te breiden. Functies zoals Promise-objecten of Symbol-functies worden in oudere browsers beschikbaar gemaakt via polyfills zoals de JavaScript-standaardbibliotheek core-js.
- Webopslag: alternatieven voor cookies zoals lokale opslag (langdurige opslag aan de clientzijde) en sessieopslag (opslag beperkt tot de huidige sessie), gezamenlijk bekend als webopslag of DOM-opslag, worden niet door alle browserversies ondersteund. De MIT-gelicentieerde webstorage-polyfill is een bekende oplossing voor dit probleem.
- Cross-Origin Resource Sharing (CORS): CORS stelt webapplicaties in staat om toegang te krijgen tot webbronnen die zich buiten de eigen server bevinden. Veel oudere browsers ondersteunen deze gegevensuitwisseling niet. Het JavaScript-pakket XDomain en de CORS-polyfill XHook kunnen hierbij helpen.
- CSS (Cascading Style Sheets): CSS is al jaren een van de belangrijkste tools voor het ontwerpen van de visuele lay-out van websites. In de loop der tijd zijn stylesheets veelzijdiger geworden, waardoor polyfills populair zijn geworden voor de koppeling met oudere browsers. Een van de bekendste tools is css-polyfills.js.
- Geolocatie: lange tijd werd de Geolocation API (die wordt gebruikt om de locatie van een gebruiker door te geven) niet ondersteund door browsers en kon deze alleen worden gebruikt met behulp van een extra browserplugin. Met een polyfill kunt u deze functionaliteit aanbieden aan gebruikers met oudere browserversies die de API niet native ondersteunen.
Hoe worden polyfills gebruikt? (Inclusief codevoorbeelden)
Je kunt polyfill JavaScript-code of polyfill-scripts rechtstreeks in het HTML-document van een website insluiten. Deze worden naadloos geïntegreerd in de bestaande broncode en worden alleen uitgevoerd als de browser de betreffende webfunctie niet ondersteunt. Dit gebeurt doorgaans met behulp van if van JavaScript om te controleren of er ondersteuning ontbreekt. Het ontbreken van ondersteuning kan dan worden omgezet in een voorwaarde voor het activeren van het script. In de volgende twee voorbeelden laten we zien hoe u dit kunt implementeren en laten we u zien hoe de algemene structuur van een polyfill eruitziet.
Voorbeeld 1: Polyfill voor de JavaScript-methode startsWith()
if (!String.prototype.startsWith) {
String.prototype.startsWith = function (searchString, position) {
position = position || 0;
return this.indexOf(searchString, position) === position;
};
}Met dit kleine JavaScript-fragment kan de oproepende browser de startsWith() gebruiken, zelfs als deze niet standaard wordt ondersteund. Deze methode, die deel uitmaakt van de ECMAScript 6-specificatie, controleert of een tekenreeks begint met het teken of de tekenreeks van een andere tekenreeks. Als dat het geval is, wordt ‘true’ geretourneerd, anders wordt ‘false’ geretourneerd. Een complexere, geoptimaliseerde versie voor integratie van startsWith() vindt u op de GitHub-pagina van ontwikkelaar Mathias Bynens.
De hier gepresenteerde code werkt niet als de webclient JavaScript blokkeert of de scripttaal in de instellingen heeft uitgeschakeld.
Voorbeeld 2: Polyfill voor webopslag
Deze JavaScript-polyfill is een eenvoudige codeeroplossing die lokale opslag en sessieopslag beschikbaar maakt in oudere browsermodellen.
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');
})();
}De bovenstaande code is een Immediately Invoked Function Expression(IIFE). Voordat de browser deze laadt, controleert een if in de eerste regel van de code echter of de client de webopslagtechnologieën native ondersteunt. Als dat het geval is, retourneert de if een false-waarde, omdat de typen voor lokale en sessieopslag al zijn gedefinieerd. Dit heeft tot gevolg dat de polyfill wordt verwijderd.