Les polyfills : des bouts de code pour mettre à jour vos fonctionnalités Web

Les polyfills permettent d’utiliser les nouvelles fonctionnalités du Web dans les navigateurs Internet qui ne supportent pas ces composants de manière native. Dans cet article, nous examinerons en détail ces éléments de code et vous découvrez comment utiliser cette technologie.

Qu’est-ce qu’un polyfill ?

On désigne par polyfill ou polyfiller un module de code plus ou moins volumineux permettant d’utiliser des fonctions HTML, CSS ou JavaScript modernes dans les anciens navigateurs ne les supportant pas à l’origine. Dans la plupart des cas, un polyfill est écrit en JavaScript ; mais en principe, d’autres langages de programmation Web peuvent être utilisés pour ces scripts de « remplissage ». Parmi les fonctionnalités les plus importantes mises à disposition par les polyfills de manière transversale ou indépendante du navigateur, on trouve des composants HTML5 tels que l’élément Canvas basé sur Bitmap pour les graphiques, les diagrammes et les animations.

Quels sont les polyfills existants ?

Ce n’est pas un hasard si les termes Polyfill et HTML5 sont étroitement liés : grâce à ses fonctionnalité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 rapidement imposée comme une valeur sûre sur le Web. En ce qui concerne le support du HTML5 par les navigateurs, le développement a toutefois été relativement lent. Outre les polyfills pour les éléments HTML5, les blocs de code Polyfill sont également requis, entre autres, pour l’intégration des éléments Web suivants :

• Graphiques SVG : le format SVG (Scalable Vector Graphics) est recommandé depuis 2001 par le consortium W3C comme format standard pour les graphiques vectoriels, mais n’est répandu que depuis HTML5. Comme de nombreux navigateurs sont à la traîne en matière de support, il existe des polyfills SVG comme svgweb.
• ECMAScript : ECMAScript est le noyau standardisé de JavaScript et est régulièrement mis à jour afin d’élargir les fonctionnalités du langage de script. Les fonctionnalités les plus récentes, telles que les objets Promise ou les fonctions Symbol, fonctionnent également dans les versions plus anciennes des navigateurs grâce aux polyfills de la bibliothèque JavaScript standard core-js.
• Web Storage : les alternatives aux cookies Local Storage (stockage permanent sur les pages clientes) et Session Storage (stockage limité à la session en cours), qui peuvent être regroupées sous le terme générique de Web Storage ou DOM Storage, ne sont pas non plus supportées par toutes les versions de navigateur. Un polyfill connu, écrit pour résoudre ce problème, est le webstorage-polyfill, sous licence du MIT.
• Cross-Origin Resource Sharing (CORS) : CORS permet aux applications Web d’accéder à des ressources Web qui se trouvent en dehors de leur propre serveur. De nombreux anciens navigateurs ne supportent pas cet échange de données. La solution consiste à combiner le package JavaScript XDomain et le polyfill CORS XHook.
• CSS (Cascading Style Sheets) : le CSS est depuis des années l’un des principaux outils de conception graphique des sites Web. Au fil du temps, les feuilles de style sont devenues de plus en plus polyvalentes, raison pour laquelle les polyfills sont très demandés comme interface avec les anciens modèles de navigateurs. L’un des outils de workaround les plus connus est css-polyfills.js.
• Géolocalisation : l’API de géolocalisation, qui permet de transmettre sa propre position, n’a longtemps été utilisable qu’à l’aide de plugins de navigateur supplémentaires et n’était pas supportée par défaut par les navigateurs. Si l’on souhaite rendre la fonction disponible pour les utilisateurs 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 JavaScript Polyfill ou les scripts Polyfill directement dans le document HTML d’un projet Web. Ce faisant, ils s’intègrent de manière transparente dans le code source existant et, s’ils sont correctement programmés, ne sont exécutés que si le navigateur utilisé ne prend effectivement pas en charge la fonctionnalité Web en question. Pour ce faire, JavaScript utilise par exemple l’instruction if, qui permet de définir l’absence de prise en charge comme condition d’activation du script. Les deux exemples suivants illustrent exactement comment cela doit être consigné dans le code et à quoi ressemble la structure d’un polyfill en général.

Exemple 1 : polyfill pour 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 d’utiliser la méthode JavaScript startsWith(), même s’il ne la supporte pas 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). La première ligne de code veille à ce que le script ne soit pas utilisé si le navigateur supporte la méthode de manière native.

Le développeur Mathias Bynens a mis à disposition une variante de polyfill plus complexe et optimisée pour l’intégration de la méthode startsWith() sur GitHub.

Exemple 2 : polyfill de stockage Web

Le deuxième exemple de polyfill JavaScript présente une solution de code simple qui rend le stockage local ou de session disponible dans tous les anciens modèles de navigateur.

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 expression de fonction immédiatement exécuté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é.