O que são polyfills?

Os polyfills são com­po­nen­tes de código que tornam os recursos mais recentes da Web uti­li­zá­veis em na­ve­ga­do­res que não oferecem suporte nativo a esses recursos. Este artigo explica o que são esses com­po­nen­tes de código práticos e como você pode usá-los.

O que são polyfills e em quais lin­gua­gens eles podem ser escritos?

Um polyfill, às vezes chamado de Poly­fil­ler, é um bloco de código de com­ple­xi­dade variável que torna as funções modernas de HTML, CSS ou Ja­vaS­cript dis­po­ní­veis em na­ve­ga­do­res mais antigos que não são com­pa­tí­veis com elas na­ti­va­mente. A maioria dos polyfills é escrita em Ja­vaS­cript, mas outras lin­gua­gens de pro­gra­ma­ção da Web também podem servir de base para scripts de pre­en­chi­mento. Alguns dos recursos mais im­por­tan­tes que os polyfills dis­po­ni­bi­li­zam em di­fe­ren­tes na­ve­ga­do­res da Web são os com­po­nen­tes HTML5, como os elementos de tela baseados em bitmap para gráficos, tabelas e animações.

Quais são os tipos de polyfills exis­ten­tes?

O fato de o termo polyfill estar in­ti­ma­mente associado ao HTML5 não é coin­ci­dên­cia. Com seus recursos avançados que tornaram, entre outras coisas, a ne­ces­si­dade de vídeos em flash passé, a quinta versão da linguagem de marcação de hi­per­texto tornou-se um recurso per­ma­nente da Web. No entanto, o suporte ao HTML5 nos na­ve­ga­do­res tem se de­sen­vol­vido 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 re­co­men­dar como o formato padrão para gráficos vetoriais em 2001, ganhou força com o HTML5. Porém, como muitos na­ve­ga­do­res ainda não oferecem suporte a esse formato, existem polyfills de SVG, como svgweb.
• EC­MAS­cript: o EC­MAS­cript é o núcleo pa­dro­ni­zado do Ja­vaS­cript e é atu­a­li­zado re­gu­lar­mente para expandir a fun­ci­o­na­li­dade da linguagem. Recursos como objetos Promise ou funções Symbol são dis­po­ni­bi­li­za­dos em na­ve­ga­do­res mais antigos por meio de polyfills, como a bi­bli­o­teca padrão Ja­vaS­cript core-js.
• Ar­ma­ze­na­mento na Web: Al­ter­na­ti­vas de cookies como ar­ma­ze­na­mento local (ar­ma­ze­na­mento de longo prazo no lado do cliente) e ar­ma­ze­na­mento de sessão (ar­ma­ze­na­mento limitado à sessão atual), co­nhe­ci­dos co­le­ti­va­mente como ar­ma­ze­na­mento na Web ou ar­ma­ze­na­mento DOM, não são com­pa­tí­veis com todas as versões de na­ve­ga­do­res. O MIT-licensed webs­to­rage-polyfill é uma solução bem conhecida para esse problema.
• Cross-Origin Resource Sharing (CORS): CORS permite que os apli­ca­ti­vos da Web acessem recursos da Web lo­ca­li­za­dos fora do próprio servidor. Muitos na­ve­ga­do­res mais antigos não oferecem suporte a essa troca de dados. O pacote Ja­vaS­cript XDomain e o CORS polyfill XHook podem ajudar a resolver esse problema.
• CSS (Cascading Style Sheets): Há anos, o CSS tem sido uma das fer­ra­men­tas mais im­por­tan­tes 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 na­ve­ga­do­res mais antigos. Uma das fer­ra­men­tas mais co­nhe­ci­das é css-polyfills.js.
• Ge­o­lo­ca­tion: Por muito tempo, a API de ge­o­lo­ca­li­za­ção (usada para trans­mi­tir a lo­ca­li­za­ção de um usuário) não era com­pa­tí­vel com os na­ve­ga­do­res e só podia ser usada com a ajuda de um plug-in de navegador adicional. Com um polyfill, é possível fornecer essa fun­ci­o­na­li­dade aos usuários com versões mais antigas de na­ve­ga­do­res que não suportam na­ti­va­mente a API.

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

Você pode in­cor­po­rar di­re­ta­mente o código Ja­vaS­cript do polyfill ou os scripts do polyfill no documento HTML de um site. Esses scripts se integram per­fei­ta­mente ao código-fonte existente e são exe­cu­ta­dos somente se o navegador não for com­pa­tí­vel com o recurso es­pe­cí­fico da Web. Nor­mal­mente, isso é feito usando a de­cla­ra­ção do Ja­vaS­cript para verificar a falta de suporte. A falta de suporte pode então ser trans­for­mada em uma condição para ativar o script. Nos dois exemplos a seguir, ilus­tra­re­mos como im­ple­men­tar isso e mos­tra­re­mos como é a estrutura geral de um polyfill.

Exemplo 1: Polyfill para o método Ja­vaS­cript startsWith()

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

Esse pequeno trecho de Ja­vaS­cript permite que o navegador de chamada use o método startsWith() , mesmo que não seja com­pa­tí­vel com ele na­ti­va­mente. Esse método, que faz parte da es­pe­ci­fi­ca­ção EC­MAS­cript 6, verifica se uma string começa com o caractere ou a série de ca­rac­te­res de outra string. Se isso acontecer, ele retornará “true” (ver­da­deiro), 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 de­sen­vol­ve­dor Mathias Bynens.

Exemplo 2: polyfill de ar­ma­ze­na­mento na Web

Esse polyfill Ja­vaS­cript é uma solução de co­di­fi­ca­ção simples que torna o ar­ma­ze­na­mento local e de sessão dis­po­ní­vel em modelos de na­ve­ga­do­res 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 Imme­di­a­tely 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 na­ti­va­mente as tec­no­lo­gias de ar­ma­ze­na­mento na Web. Em caso afir­ma­tivo, a instrução retornará um valor falso, pois os tipos de ar­ma­ze­na­mento local e de sessão já estão definidos. Isso faz com que o polyfill seja des­car­tado.