Les polyfills : des bouts de code pour mettre à jour vos fonctionnalités Web
Lorsqu’il s’agit d’utiliser son navigateur pour surfer au quotidien sur Internet, de nombreux internautes ne dérogent pas à leurs habitudes : une interface utilisateur qui leur est familière ainsi que des favoris accumulés au fil des ans constituent, aux yeux de bon nombre d’internautes, des arguments décisifs qui les poussent à rester fidèles au client Web qu’ils utilisent depuis toujours. La question des mises à jour ne recueille pas non plus toujours l’attention qu’elle devrait mériter. Ne soyez donc pas étonnés si bon nombre de visiteurs de votre site Web utilisent des navigateurs qui ne prennent pas en charge les dernières fonctionnalités Web comme les éléments HTML5 ou le format SVG.
Afin que vous parveniez également à capter ces utilisateurs, il est recommandé d’utiliser des polyfills. Ces bouts de codes sont pratiques. Ils permettent d’implémenter de nouvelles fonctionnalités, comme celles mentionnées ci-dessus, sur les navigateurs Web qui, à l'origine, ne les prenaient pas en charge. Cet article va vous expliquer ce qu’est exactement un polyfill et comment l’utiliser.
Qu’est-ce qu’un polyfill ?
Un polyfill ou shim désigne un bout de code plus ou moins long qui permet à d’anciens navigateurs de prendre en charge les fonctionnalités HTML, CSS ou JavaScript, qui n’y étaient nativement pas disponibles. Dans la plupart des cas, le polyfill est écrit en JavaScript. Néanmoins, d’autres langages de programmation Web peuvent être utilisés comme base pour ces scripts « de remplissage ». Parmi les fonctionnalités les plus importantes qui peuvent être implémentées sur les navigateurs au moyen des polyfills, citons les composants de HTML comme l’élément canvas, basé sur la technologie bitmap, pour faire des graphiques, des diagrammes et des animations.
Le terme « polyfill » vient de la marque Polyfilla largement répandue en Grande-Bretagne, et qui est en réalité un mastic destiné aux travaux de rénovation et de réfection. Le développeur Web Remy Sharp a estimé que cette matière de remplissage, destinée à combler les trous dans les murs, supportait bien la comparaison avec ces codes workaround pratiques. C’est pour cette raison qu’il leur a donné ce nom dans le livre qu’il a écrit en 2009 avec Bruce Lawson intitulé « Introducing HTML 5 ». Par la suite, polyfill est devenu le terme officiel.
Quels sont les polyfills existants ?
Le fait que le terme polyfill soit étroitement lié à l’HTML5 n’est pas un hasard : avec ses fonctionnalités avancées qui ont rendu obsolète le recours à Flash Video, la cinquième version de l’HyperText Markup Language (langage de balisage d’hypertexte) est vite devenue un incontournable sur le Web. Cependant, en ce qui concerne le support HTML5 par les navigateurs, le développement a été relativement lent. Les dernières versions n'ont souvent pas encore complètement implémenté le standard actuel des balises. Outre les polyfills pour les éléments HTML5, les bouts de code polyfill sont également nécessaires pour l’intégration des éléments Web suivants :
- Les graphiques SVG : le format SVG (Scalable Vector Graphics) est recommandé depuis 2001 par le consortium W3C pour l’intégration de graphiques vectoriels. Cependant, il n’a progressé que depuis l’arrivée du HTML5. Étant donné que de nombreux navigateurs ne prennent pas ce format en charge, il existe des polyfills SVG comme svgweb.
- ECMAScript : ECMAScript est par définition le standard du langage de programmation JavaScript. Il est mis à jour régulièrement afin d’augmenter progressivement l’éventail des fonctionnalités du langage de script. Les dernières fonctionnalités, comme les promesses ou les fonctions Symbol, fonctionnent grâce à des polyfills issus de la bibliothèque JavaScript standard core-js même sur les anciens navigateurs.
- Web Storage : les alternatives aux cookies comme les interfaces Local Storage (stockage permanent sur les pages clients) et Session Storage (stockage limité au temps de session de navigation), regroupées sous le terme générique Web Storage ou DOM Storage, ne sont pas non plus supportées par tous les modèles de navigateurs. Il existe un polyfill bien connu et conçu pour résoudre ce problème. Il s’agit du polyfill de Web Storage sous licence MIT.
- Cross-Origin Resource Sharing (CORS) : le CORS permet aux applications Web d’accéder à des ressources Web situées sur un serveur externe. Bon nombre d’anciens navigateurs ne prennent pas en charge ce partage de données. La solution réside dans l’association du package JavaScript XDomain et du polyfill CORS XHook.
- CSS (Cascading Style Sheets) : depuis des années, le CSS est l’un des outils les plus importants utilisé pour la conception graphique de sites Web. Au fil du temps, les feuilles de styles se sont multipliées, si bien que les polyfills sont devenus très recherchés en tant qu’interface pour les anciens modèles de navigateurs. L’un des outils de workaround le plus célèbre est le css-polyfills.js.
- Géolocalisation : pendant longtemps, l’API de géolocalisation permettant de transmettre sa position ne pouvait être utilisée qu’en rajoutant des plugins au navigateur et n’était pas prise en charge par les navigateurs par défaut. Si vous souhaitez que les utilisateurs des anciennes versions de client Web dépourvus d’extensions aient accès à cette fonctionnalité, il est possible de le faire en utilisant un polyfill.
Comment sont utilisés les polyfills (exemples) ?
Les codes polyfills en JavaScript, autrement dit les scripts de polyfill en général, peuvent être directement intégrés dans le document HTML d’un projet Web. Ils s’intègrent parfaitement dans le code source existant et, s’ils sont correctement programmés, ne sont exécutés que si le navigateur d’accès ne peut pas prendre en charge la fonction Web en question. Pour ce faire, JavaScript utilise la condition if qui permet de définir le support manquant comme une condition pour activer le script. Les deux exemples suivants expliquent comment écrire le code et à quoi ressemble la structure d’un polyfill en général.
Exemple 1 : polyfill pour la méthode JavaScript « startsWith »
if (!String.prototype.startsWith) {
String.prototype.startsWith = function (searchString, position) {
position = position || 0;
return this.indexOf(searchString, position) === position;
};
}Ce petit extrait de code JavaScript permet au navigateur demandeur de lancer la méthode JavaScript « startsWith() », même si dans les faits il ne la prend pas en charge. Cette méthode fait partie de la spécification ECMAScript 6 et détermine si une chaîne de caractères donnée doit débuter par des caractères ou la chaîne de caractères d’une autre chaîne. Si c’est le cas, elle renvoie la valeur « true » (vrai) ; dans le cas contraire, elle renvoie la valeur « false » (faux). Si le navigateur supporte nativement la méthode, la première ligne de code fait en sorte que le script ne soit pas exécuté.
Le développeur Mathias Bynens a proposé sur GitHub une version optimisée et plus complexe de polyfill pour intégrer la méthode « startsWith() ».
Le code affiché ne fonctionne pas si le client Web accédant bloque JavaScript ou si ce langage de script est désactivé dans les paramètres.
Exemple 2 : polyfill de Web Storage
Le deuxième exemple de polyfill JavaScript propose une implémentation de code simplifiée qui permet de disposer des interfaces Local et Session Storage sur tous les anciens modèles de navigateurs.
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');
})();Le code indiqué est une Immediately Invoked Function Expression (IIFE), c’est-à-dire l’expression de fonction immédiatement invoquée. Cependant, avant de la charger, le navigateur vérifie comme dans le premier exemple, en activant l’instruction if dans la première ligne de code, si le client est capable de supporter nativement la technologie Web Storage. Si tel est le cas, l’instruction if prend la valeur de retour « false » (faux) puisque les paramètres pour les interfaces de Local et de Session Storage sont définis. Par conséquent, le polyfill est supprimé.
Articles similaires
Les bibliothèques et frameworks JavaScript les plus populaires
Tout internaute ayant déjà travaillé avec JavaScript pour un projet de site Web connaît la complexité du Document Object Model (DOM). Les frameworks et les bibliothèques JavaScript permettent une prise en main facilitée et un large spectre de fonctionnalités pratiques et visant à faciliter le travail des développeurs et les soutenir dans leurs efforts. Mais quels sont les meilleurs frameworks et…
Apprendre le HTML : faire ses premiers pas avec ce langage Web standard
Avec la multiplication des systèmes de gestion de contenu et systèmes modulaires pour sites Web, on a vite l'impression qu’apprendre du HTML est une perte de temps. Mais tôt ou tard, si une page de votre site ne fonctionne plus ou si des éléments dynamiques doivent être ajoutés, vous ne pourrez aller très loin sans connaissance du langage Web. Dans ce tutoriel HTML, nous vous présenterons donc les…
Quelles nouveautés propose HTML 5.1 ?
Il a fallu attendre longtemps pour que HTML5 fasse son apparition en automne 2014. Sa première mise à jour, HTML 5.1, est désormais sortie. Elle apporte alors de nombreux changements : par-dessus tout, la une mise en place plus simple du responsive Web design est au cœur des attentions. Mais il faut ajouter à cela non seulement de nombreuses nouveautés HTML, mais aussi des attributs et éléments…
FlashMovieShutterstock Qu’est-ce qu’un wrapper en programmation ?
Les wrappers « enveloppent » les composants logiciels, comme une jaquette pour un livre. Le programme principal communique uniquement avec la fonction wrapper, qui a accès aux interfaces des parties enveloppées du programme. Cette technique offre aux développeurs logiciels une compatibilité inégalée autorisant l’utilisation de bibliothèques, bases de données et langages de programmation…
