Les polyfills : des bouts de code pour mettre à jour vos fonc­tion­na­li­tés Web

Les polyfills per­met­tent d’utiliser les nouvelles fonc­tion­na­li­tés du Web dans les na­vi­ga­teurs Internet qui ne sup­por­tent pas ces com­po­sants de manière native. Dans cet article, nous exa­mi­ne­rons en détail ces éléments de code et vous découvrez comment utiliser cette tech­no­lo­gie.

Qu’est-ce qu’un polyfill ?

On désigne par polyfill ou po­ly­fil­ler un module de code plus ou moins vo­lu­mi­neux per­met­tant d’utiliser des fonctions HTML, CSS ou Ja­vaS­cript modernes dans les anciens na­vi­ga­teurs ne les sup­por­tant pas à l’origine. Dans la plupart des cas, un polyfill est écrit en Ja­vaS­cript ; mais en principe, d’autres langages de pro­gram­ma­tion Web peuvent être utilisés pour ces scripts de « rem­plis­sage ». Parmi les fonc­tion­na­li­tés les plus im­por­tantes mises à dis­po­si­tion par les polyfills de manière trans­ver­sale ou in­dé­pen­dante du na­vi­ga­teur, on trouve des com­po­sants HTML5 tels que l’élément Canvas basé sur Bitmap pour les gra­phiques, les dia­grammes et les ani­ma­tions.

Quels sont les polyfills existants ?

Ce n’est pas un hasard si les termes Polyfill et HTML5 sont étroi­te­ment liés : grâce à ses fonc­tion­na­li­tés avancées, qui ont notamment rendu obsolète le besoin de vidéos Flash, la cinquième version du Hypertext Markup Language s’est ra­pi­de­ment imposée comme une valeur sûre sur le Web. En ce qui concerne le support du HTML5 par les na­vi­ga­teurs, le dé­ve­lop­pe­ment a toutefois été re­la­ti­ve­ment lent. Outre les polyfills pour les éléments HTML5, les blocs de code Polyfill sont également requis, entre autres, pour l’in­té­gra­tion des éléments Web suivants :

• Gra­phiques SVG : le format SVG (Scalable Vector Graphics) est re­com­mandé depuis 2001 par le con­sor­tium W3C comme format standard pour les gra­phiques vec­to­riels, mais n’est répandu que depuis HTML5. Comme de nombreux na­vi­ga­teurs sont à la traîne en matière de support, il existe des polyfills SVG comme svgweb.
• EC­MAS­cript : EC­MAS­cript est le noyau stan­dar­disé de Ja­vaS­cript et est ré­gu­liè­re­ment mis à jour afin d’élargir les fonc­tion­na­li­tés du langage de script. Les fonc­tion­na­li­tés les plus récentes, telles que les objets Promise ou les fonctions Symbol, fonc­tion­nent également dans les versions plus anciennes des na­vi­ga­teurs grâce aux polyfills de la bi­blio­thèque Ja­vaS­cript standard core-js.
• Web Storage : les al­ter­na­tives aux cookies Local Storage (stockage permanent sur les pages clientes) et Session Storage (stockage limité à la session en cours), qui peuvent être re­grou­pées sous le terme générique de Web Storage ou DOM Storage, ne sont pas non plus sup­por­tées par toutes les versions de na­vi­ga­teur. Un polyfill connu, écrit pour résoudre ce problème, est le webs­to­rage-polyfill, sous licence du MIT.
• Cross-Origin Resource Sharing (CORS) : CORS permet aux ap­pli­ca­tions Web d’accéder à des res­sources Web qui se trouvent en dehors de leur propre serveur. De nombreux anciens na­vi­ga­teurs ne sup­por­tent pas cet échange de données. La solution consiste à combiner le package Ja­vaS­cript XDomain et le polyfill CORS XHook.
• CSS (Cascading Style Sheets) : le CSS est depuis des années l’un des prin­ci­paux outils de con­cep­tion graphique des sites Web. Au fil du temps, les feuilles de style sont devenues de plus en plus po­ly­va­lentes, raison pour laquelle les polyfills sont très demandés comme interface avec les anciens modèles de na­vi­ga­teurs. L’un des outils de wor­ka­round les plus connus est css-polyfills.js.
• Géo­lo­ca­li­sa­tion : l’API de géo­lo­ca­li­sa­tion, qui permet de trans­mettre sa propre position, n’a longtemps été uti­li­sable qu’à l’aide de plugins de na­vi­ga­teur sup­plé­men­taires et n’était pas supportée par défaut par les na­vi­ga­teurs. Si l’on souhaite rendre la fonction dis­po­nible pour les uti­li­sa­teurs d’anciennes versions de clients Web sans extension, on peut également y parvenir avec un polyfill.

Comment utiliser les polyfills ?

Vous pouvez intégrer le code Ja­vaS­cript Polyfill ou les scripts Polyfill di­rec­te­ment dans le document HTML d’un projet Web. Ce faisant, ils s’intègrent de manière trans­pa­rente dans le code source existant et, s’ils sont cor­rec­te­ment pro­gram­més, ne sont exécutés que si le na­vi­ga­teur utilisé ne prend ef­fec­ti­ve­ment pas en charge la fonc­tion­na­lité Web en question. Pour ce faire, Ja­vaS­cript utilise par exemple l’ins­truc­tion if, qui permet de définir l’absence de prise en charge comme condition d’ac­ti­va­tion du script. Les deux exemples suivants il­lustrent exac­te­ment comment cela doit être consigné dans le code et à quoi ressemble la structure d’un polyfill en général.

Exemple 1 : polyfill pour Ja­vaS­cript 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 Ja­vaS­cript permet au na­vi­ga­teur d’utiliser la méthode Ja­vaS­cript startsWith(), même s’il ne la supporte pas Cette méthode fait partie de la spé­ci­fi­ca­tion EC­MAS­cript 6 et détermine si une chaîne de ca­rac­tères donnée doit débuter par des ca­rac­tères ou la chaîne de ca­rac­tè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). La première ligne de code veille à ce que le script ne soit pas utilisé si le na­vi­ga­teur supporte la méthode de manière native.

Le dé­ve­lop­peur Mathias Bynens a mis à dis­po­si­tion une variante de polyfill plus complexe et optimisée pour l’in­té­gra­tion de la méthode startsWith() sur GitHub.

Exemple 2 : polyfill de stockage Web

Le deuxième exemple de polyfill Ja­vaS­cript présente une solution de code simple qui rend le stockage local ou de session dis­po­nible dans tous les anciens modèles de na­vi­ga­teur.

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

Le code indiqué est une Imediately Invoked Function Expression (IIFE), c’est-à-dire une ex­pres­sion de fonction im­mé­dia­te­ment exécutée. Cependant, avant de la charger, le na­vi­ga­teur vérifie comme dans le premier exemple, en activant l’ins­truc­tion if dans la première ligne de code, si le client est capable de supporter na­ti­ve­ment la tech­no­lo­gie Web Storage. Si tel est le cas, l’ins­truc­tion if prend la* valeur de retour* « false » (faux) puisque les pa­ra­mètres pour les in­ter­faces de Local et de Session Storage sont définis. Par con­sé­quent, le polyfill est supprimé.