Polyfill: módulos de código para la web moderna

Los llamados polyfills permiten usar nuevas funciones web en navegadores que ya no tienen soporte nativo. En este artículo, descubrirás qué son estos módulos de código y cómo puedes usar esta tecnología.

¿Qué quiere decir polyfill?

Un polyfill o polyfiller es un módulo de código más o menos extenso que hace que las funciones modernas de HTML, CSS o JavaScript estén disponibles en navegadores antiguos que ya no son compatibles con estas. En la mayoría de los casos, los polyfills están escritos en JavaScript, pero hay otros lenguajes de programación web que se pueden usar de base para estos scripts de llenado. Entre las funciones más importantes que pueden adaptarse a los navegadores con polyfills se incluyen componentes HTML5 como el canvas-element, basado en mapas de bits, para gráficos, diagramas y animaciones.

¿Qué tipos de polyfills existen?

El hecho de que el término polyfill esté tan estrechamente ligado al HTML5 no es una coincidencia: con sus características avanzadas, que han dejado obsoletos a los vídeos en flash, entre otras cosas, la quinta versión del lenguaje de marcado de hipertexto se ha convertido rápidamente en un elemento permanente en la web. Respecto a la compatibilidad de HTML5 con los navegadores, sin embargo, el desarrollo fue relativamente lento. Además de los polyfills para HTML5, también se necesitan módulos de código polyfill para la integración de los siguientes elementos web:

• Gráficos SVG: aunque el formato SVG (Scalable Vector Graphics) ha sido recomendado por el W3C Konsortium como formato estándar para gráficos vectoriales desde 2001, solo ha avanzado desde HTML5. Dado que muchos navegadores aún no ofrecen compatibilidad, existen polyfills de SGV, como svgweb.
• ECMAScript: ECMAScript es el núcleo del lenguaje declarado estándar de JavaScript, que pasa revisiones periódicas para ampliar gradualmente la funcionalidad del lenguaje de scripting. Las últimas funcionalidades, como los objetos-promesa o las funciones-símbolo, funcionan también en las versiones más antiguas de navegadores gracias a polyfills de la biblioteca estándar de Java Script core-js.
• Almacenamiento web: las alternativas a cookies Local Storage (almacenamiento permanente en las páginas del cliente) y Session Storage (almacenamiento solo de sesión actual), que pueden resumirse bajo el término genérico de almacenamiento web (Web Storage) o almacenamiento DOM (DOM Storage), tampoco son compatibles con todas las versiones de los navegadores. Un polyfill famoso, escrito para responder a estos problemas, es el polyfill de almacenamiento web, con licencia del MIT.
• Cross-Origin Resource Sharing (CORS): CORS permite a las aplicaciones web acceder a recursos web fuera de su propio servidor. Muchos navegadores antiguos no son ya compatibles con este intercambio de datos. Se soluciona con una combinación del paquete JavaScript XDomain y el polyfill CORS XHook.
• CSS (Cascading Style Sheets): CSS es una de las herramientas más importantes para el diseño gráfico de páginas web desde hace años. Con el paso de los años, las hojas de estilo se han vuelto cada vez más versátiles, por lo que se emplean cada vez más polyfills como interfaz para los modelos de navegadores más antiguos. Una de las soluciones más famosas es css-polyfills.js.
• Geolocalización: durante muchos años, la API de geolocalización, usada para enviar la propia ubicación, solo se podía utilizar con la ayuda de complementos adicionales del navegador y no era compatible con los navegadores por defecto. Si quieres que la función esté disponible para los usuarios de versiones anteriores de clientes web sin extensiones, puedes utilizar un polyfill.

¿Cómo se utilizan los polyfills? Ejemplos incluidos

Los polyfills de JavaScript, o los scripts de polyfill en general, se pueden incrustar directamente en el documento HTML de un proyecto web. Se integran a la perfección en el código fuente existente y, si se programan correctamente, solo se ejecutan si el navegador de acceso no es compatible con la función web correspondiente. Para esto, JavaScript utiliza por ejemplo la expresión if que se puede emplear para definir la compatibilidad que falta como condición para activar el script. En estos dos ejemplos se ilustra cómo se debe registrar esto exactamente en el código y cómo se ve la estructura de un polyfill en general.

Ejemplo 1: polyfill para el método JavaScript startsWith()

if (!String.prototype.startsWith) { 
    String.prototype.startsWith = function (searchString, position) { 
        position = position || 0; 
        return this.indexOf(searchString, position) === position; 
    };

Este pequeño fragmento de JavaScript permite al navegador al que llama utilizar el método JavaScript startsWith(), incluso si no es compatible con él. Este método, que forma parte de la especificación de ECMAScript 6, determina si una cadena o string determinado comienza con los caracteres o con la secuencia de otro string. Si este es el caso, devuelve el valor true, de lo contrario devuelve el valor false. La primera línea de código hace que se desactive el script si el navegador soporta el método de forma nativa.

El desarrollador Mathias Bynens ha proporcionado una variante más compleja y optimizada de polyfill para integrar el método startsWith() en GitHub.

Ejemplo 2: polyfill de almacenamiento web

El segundo ejemplo de polyfill JavaScript presenta una solución de código simple que permite que el almacenamiento local o de sesión estén disponibles en los modelos de navegadores más antiguos.

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

El código aquí indicado es una Immediately Invoked Function Expression (IIFE), o sea, una expresión de función ejecutada inmediatamente. Sin embargo, antes de que el navegador la cargue, se comprueba si el cliente es compatible de forma nativa con las tecnologías de almacenamiento web, como en el primer ejemplo, utilizando la expresión if en la primera línea de código. Si este es el caso, la expresión if devuelve false (no aplicable), ya que los tipos de almacenamiento locales y de sesión están definidos. En consecuencia, el polyfill se descarta.