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

Os chamados polyfills permitem usar novas fun­ci­o­na­li­da­des da web em na­ve­ga­do­res que já não têm suporte nativo. Neste artigo, des­co­brirá o que são esses módulos de código e como pode usar essa tec­no­lo­gia.

O que significa polyfill?

Um polyfill ou poly­fil­ler é um módulo de código mais ou menos extenso que torna as funções modernas de HTML, CSS ou Ja­vaS­cript dis­po­ní­veis em na­ve­ga­do­res antigos que já não são com­pa­tí­veis com elas. Na maioria dos casos, os polyfills são escritos em Ja­vaS­cript, mas existem outras lin­gua­gens de pro­gra­ma­ção web que podem ser usadas como base para esses scripts de pre­en­chi­mento. Entre as funções mais im­por­tan­tes que podem ser adaptadas aos na­ve­ga­do­res com polyfills estão com­po­nen­tes HTML5 como o canvas-element, baseado em mapas de bits, para gráficos, diagramas e animações.

Que tipos de polyfills existem?

O facto de o termo polyfill estar tão in­ti­ma­mente ligado ao HTML5 não é uma coin­ci­dên­cia: com as suas ca­rac­te­rís­ti­cas avançadas, que tornaram obsoletos os vídeos em flash, entre outras coisas, a quinta versão da linguagem de marcação de hi­per­texto tornou-se ra­pi­da­mente um elemento per­ma­nente na web. No que diz respeito à com­pa­ti­bi­li­dade do HTML5 com os na­ve­ga­do­res, no entanto, o de­sen­vol­vi­mento foi re­la­ti­va­mente lento. Além dos polyfills para HTML5, também são ne­ces­sá­rios módulos de código polyfill para a in­te­gra­ção dos seguintes elementos web:

• Gráficos SVG: embora o formato SVG (Scalable Vector Graphics) tenha sido re­co­men­dado pelo W3C Kon­sor­tium como formato padrão para gráficos vetoriais desde 2001, ele só avançou a partir do HTML5. Como muitos na­ve­ga­do­res ainda não oferecem com­pa­ti­bi­li­dade, existem polyfills de SGV, como o svgweb.
• EC­MAS­cript: EC­MAS­cript é o núcleo da linguagem declarada padrão do Ja­vaS­cript, que passa por revisões pe­rió­di­cas para ampliar gra­du­al­mente a fun­ci­o­na­li­dade da linguagem de scripting. As fun­ci­o­na­li­da­des mais recentes, como objetos-promessa ou funções-símbolo, também funcionam nas versões mais antigas dos na­ve­ga­do­res graças aos polyfills da bi­bli­o­teca padrão do Java Script core-js.
• Ar­ma­ze­na­mento web: as al­ter­na­ti­vas aos cookies Local Storage (ar­ma­ze­na­mento per­ma­nente nas páginas do cliente) e Session Storage (ar­ma­ze­na­mento apenas da sessão atual), que podem ser resumidas sob o termo genérico de ar­ma­ze­na­mento web (Web Storage) ou ar­ma­ze­na­mento DOM (DOM Storage), também não são com­pa­tí­veis com todas as versões dos na­ve­ga­do­res. Um polyfill famoso, escrito para responder a estes problemas, é o polyfill de ar­ma­ze­na­mento web, li­cen­ci­ado pelo MIT.
• Cross-Origin Resource Sharing (CORS): o CORS permite que as apli­ca­ções web acedam a recursos web fora do seu próprio servidor. Muitos na­ve­ga­do­res antigos já não são com­pa­tí­veis com esta troca de dados. Isto é resolvido com uma com­bi­na­ção do pacote Ja­vaS­cript XDomain e do polyfill CORS XHook.
• CSS (Cascading Style Sheets): o CSS é uma das fer­ra­men­tas mais im­por­tan­tes para o design gráfico de páginas web há muitos anos. Com o passar dos anos, as folhas de estilo tornaram-se cada vez mais versáteis, pelo que são cada vez mais uti­li­za­dos polyfills como interface para os modelos de na­ve­ga­do­res mais antigos. Uma das soluções mais famosas é o css-polyfills.js.
• Ge­o­lo­ca­li­za­ção: durante muitos anos, a API de ge­o­lo­ca­li­za­ção, usada para enviar a própria lo­ca­li­za­ção, só podia ser utilizada com a ajuda de com­ple­men­tos adi­ci­o­nais do navegador e não era com­pa­tí­vel com os na­ve­ga­do­res padrão. Se quiser que a função esteja dis­po­ní­vel para uti­li­za­do­res de versões an­te­ri­o­res de clientes web sem extensões, pode utilizar um polyfill.

Como se utilizam os polyfills? Exemplos incluídos

Os polyfills Ja­vaS­cript, ou os scripts polyfill em geral, podem ser in­cor­po­ra­dos di­re­ta­mente no documento HTML de um projeto web. Eles se integram per­fei­ta­mente ao código-fonte existente e, se pro­gra­ma­dos cor­re­ta­mente, só são exe­cu­ta­dos se o navegador de acesso não for com­pa­tí­vel com a função web cor­res­pon­dente. Para isso, o Ja­vaS­cript utiliza, por exemplo, a expressão if, que pode ser usada para definir a com­pa­ti­bi­li­dade ausente como condição para ativar o script. Estes dois exemplos ilustram como isso deve ser re­gis­trado exa­ta­mente no código e como é a estrutura de um polyfill em geral.

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; 
    };

Este pequeno fragmento de Ja­vaS­cript permite que o navegador chamado utilize o método Ja­vaS­cript startsWith(), mesmo que não seja com­pa­tí­vel com ele. Este método, que faz parte da es­pe­ci­fi­ca­ção EC­MAS­cript 6, determina se uma de­ter­mi­nada cadeia ou string começa com os ca­rac­te­res ou com a sequência de outra string. Se for esse o caso, retorna o valor true, caso contrário, retorna o valor false. A primeira linha de código faz com que o script seja de­sa­ti­vado se o navegador suportar o método de forma nativa.

O pro­gra­ma­dor Mathias Bynens dis­po­ni­bi­li­zou uma variante mais complexa e otimizada do polyfill para integrar o método startsWith() no GitHub.

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

O segundo exemplo de polyfill Ja­vaS­cript apresenta uma solução de código simples que permite que o ar­ma­ze­na­mento local ou de sessão esteja 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 aqui indicado é uma Im­me­di­a­tely Invoked Function Ex­pres­sion (IIFE), ou seja, uma expressão de função executada ime­di­a­ta­mente. No entanto, antes que o navegador a carregue, verifica-se se o cliente é com­pa­tí­vel de forma nativa com as tec­no­lo­gias de ar­ma­ze­na­mento web, como no primeiro exemplo, uti­li­zando a expressão if na primeira linha de código. Se for esse o caso, a expressão if retorna false (não aplicável), uma vez que os tipos de ar­ma­ze­na­mento local e de sessão estão definidos. Con­se­quen­te­mente, o polyfill é des­car­tado.