O que são polyfills?

Os polyfills são componentes de código que tornam os recursos mais recentes da Web utilizáveis em navegadores que não oferecem suporte nativo a esses recursos. Este artigo explica o que são esses componentes de código práticos e como você pode usá-los.

O que são polyfills e em quais linguagens eles podem ser escritos?

Um polyfill, às vezes chamado de Polyfiller, é um bloco de código de complexidade variável que torna as funções modernas de HTML, CSS ou JavaScript disponíveis em navegadores mais antigos que não são compatíveis com elas nativamente. A maioria dos polyfills é escrita em JavaScript, mas outras linguagens de programação da Web também podem servir de base para scripts de preenchimento. Alguns dos recursos mais importantes que os polyfills disponibilizam em diferentes navegadores da Web são os componentes HTML5, como os elementos de tela baseados em bitmap para gráficos, tabelas e animações.

Quais são os tipos de polyfills existentes?

O fato de o termo polyfill estar intimamente associado ao HTML5 não é coincidência. Com seus recursos avançados que tornaram, entre outras coisas, a necessidade de vídeos em flash passé, a quinta versão da linguagem de marcação de hipertexto tornou-se um recurso permanente da Web. No entanto, o suporte ao HTML5 nos navegadores tem se desenvolvido de forma bastante lenta. Além dos polyfills criados para elementos HTML5, os blocos de código polyfill também são usados para integrar os seguintes elementos da Web:

• Gráficos SVG: O formato SVG SVG (Scalable Vector Graphics), que o consórcio W3C começou a recomendar como o formato padrão para gráficos vetoriais em 2001, ganhou força com o HTML5. Porém, como muitos navegadores ainda não oferecem suporte a esse formato, existem polyfills de SVG, como svgweb.
• ECMAScript: o ECMAScript é o núcleo padronizado do JavaScript e é atualizado regularmente para expandir a funcionalidade da linguagem. Recursos como objetos Promise ou funções Symbol são disponibilizados em navegadores mais antigos por meio de polyfills, como a biblioteca padrão JavaScript core-js.
• Armazenamento na Web: Alternativas de cookies como armazenamento local (armazenamento de longo prazo no lado do cliente) e armazenamento de sessão (armazenamento limitado à sessão atual), conhecidos coletivamente como armazenamento na Web ou armazenamento DOM, não são compatíveis com todas as versões de navegadores. O MIT-licensed webstorage-polyfill é uma solução bem conhecida para esse problema.
• Cross-Origin Resource Sharing (CORS): CORS permite que os aplicativos da Web acessem recursos da Web localizados fora do próprio servidor. Muitos navegadores mais antigos não oferecem suporte a essa troca de dados. O pacote JavaScript XDomain e o CORS polyfill XHook podem ajudar a resolver esse problema.
• CSS (Cascading Style Sheets): Há anos, o CSS tem sido uma das ferramentas mais importantes para projetar o layout visual de sites. Com o tempo, as folhas de estilo se tornaram mais versáteis, tornando os polyfills populares para a interface com navegadores mais antigos. Uma das ferramentas mais conhecidas é css-polyfills.js.
• Geolocation: Por muito tempo, a API de geolocalização (usada para transmitir a localização de um usuário) não era compatível com os navegadores e só podia ser usada com a ajuda de um plug-in de navegador adicional. Com um polyfill, é possível fornecer essa funcionalidade aos usuários com versões mais antigas de navegadores que não suportam nativamente a API.

Como os polyfills são usados? (Exemplos de código incluídos)

Você pode incorporar diretamente o código JavaScript do polyfill ou os scripts do polyfill no documento HTML de um site. Esses scripts se integram perfeitamente ao código-fonte existente e são executados somente se o navegador não for compatível com o recurso específico da Web. Normalmente, isso é feito usando a declaração do JavaScript para verificar a falta de suporte. A falta de suporte pode então ser transformada em uma condição para ativar o script. Nos dois exemplos a seguir, ilustraremos como implementar isso e mostraremos como é a estrutura geral de um polyfill.

Exemplo 1: Polyfill para o método JavaScript startsWith()

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

Esse pequeno trecho de JavaScript permite que o navegador de chamada use o método startsWith() , mesmo que não seja compatível com ele nativamente. Esse método, que faz parte da especificação ECMAScript 6, verifica se uma string começa com o caractere ou a série de caracteres de outra string. Se isso acontecer, ele retornará “true” (verdadeiro), caso contrário, retornará “false” (falso). Você pode encontrar uma versão mais complexa e otimizada para integrar startsWith() na página do GitHub do desenvolvedor Mathias Bynens.

Exemplo 2: polyfill de armazenamento na Web

Esse polyfill JavaScript é uma solução de codificação simples que torna o armazenamento local e de sessão disponível em modelos de navegadores mais antigos.

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

O código fornecido acima é um Immediately Invoked Function Expression (IIFE). Antes de o navegador carregá-lo, no entanto, um comando na primeira linha de código verifica se o cliente suporta nativamente as tecnologias de armazenamento na Web. Em caso afirmativo, a instrução retornará um valor falso, pois os tipos de armazenamento local e de sessão já estão definidos. Isso faz com que o polyfill seja descartado.