Polyfill: apa itu, prinsip kerja, dan pustaka untuk emulasi API

Apa itu Polyfill?

Polyfill — potongan kode (biasanya JavaScript) yang mengimplementasikan fungsionalitas yang tidak didukung secara native oleh lingkungan eksekusi. Istilah ini diusulkan oleh Remy Sharp pada tahun 2009 sebagai permainan kata: Polyfill — analogi dempul (Polyfilla) yang mengisi retakan di dinding. Polyfill mengisi celah antara standar dan dukungan di browser atau runtime tertentu.

Polyfill tidak mengubah kode yang ada — ia memperluas lingkungan eksekusi. Jika browser tidak mendukung Array.prototype.includes, polifil menambahkan metode ini ke prototipe Array sebelum menjalankan kode utama. Polifil dapat mengemulasi objek global baru (Promise, Map, Set, Symbol), metode statis (Array.from, Object.assign), dan metode prototipe.

Feature detection — mekanisme wajib sebelum menginstal polifil. Alih-alih memeriksa user-agent (browser apa), periksa keberadaan metode: if (!Array.prototype.includes) { Array.prototype.includes = ... }. Ini memastikan polifil tidak akan menimpa implementasi native jika sudah ada. Google Analytics dan layanan lain mengumpulkan data tentang dukungan API untuk analisis.

Kapan polifil muncul

Polifil pertama muncul di era Internet Explorer 6–8 (2005–2009), ketika pengembang menemukan kesenjangan antara standar W3C dan implementasi di browser. Istilah ini diperkenalkan oleh Remy Sharp pada tahun 2009 di konferensi BarCamp London. Polifil massal pertama adalah html5shiv (2009) — pustaka yang menambahkan dukungan untuk tag HTML5 (<section>, <article>, <nav>) di Internet Explorer.

Dengan munculnya ES6 (2015) dan siklus pembaruan tahunan ECMAScript, jumlah polifil yang diperlukan meningkat. Setiap tahun standar menambahkan metode baru (Array.includes, String.padStart, Object.fromEntries, Promise.allSettled) yang tidak didukung oleh browser lama. core-js, dimulai sebagai es6-shim pada 2014, menjadi solusi universal. Pada 2026, core-js berisi lebih dari 5000 modul polifil untuk ES5–ES2025.

Apa yang bisa dan tidak bisa dipolyfill

Polyfill vs transpilasi: perbedaan dan interaksi

Transpilasi mengubah sintaks baru menjadi lama (const → var, () => {} → function() {}). Polyfill menambahkan metode dan objek yang hilang (Promise, Array.includes). Kedua mekanisme ini saling melengkapi: transpilasi memastikan kompatibilitas sintaks, polifil memastikan kelengkapan API. Babel + core-js — kombinasi standar untuk dukungan penuh.

Babel @babel/preset-env dengan opsi useBuiltIns menentukan polifil apa yang diperlukan berdasarkan browser target. useBuiltIns: “usage” menganalisis API apa yang digunakan dalam kode dan menghubungkan hanya polifil yang diperlukan dari core-js. useBuiltIns: “entry” menghubungkan semua polifil untuk browser target melalui satu import core-js/stable.

Contoh: polifil untuk Array.prototype.includes

// Memeriksa keberadaan dan menambahkan polifil
if (typeof Array.prototype.includes !== "function") {
  Object.defineProperty(Array.prototype, "includes", {
    value: function(searchElement, fromIndex) {
      if (this == null) {
        throw new TypeError("Array.prototype.includes called on null or undefined");
      }
      var arr = Object(this);
      var len = arr.length >>> 0;
      if (len === 0) { return false; }
      var start = fromIndex | 0;
      var k = Math.max(start >= 0 ? start : len + start, 0);

      while (k < len) {
        if (arr[k] === searchElement) { return true; }
        k++;
      }
      return false;
    },
    writable: true,
    configurable: true,
  });
}

// Penggunaan — sekarang aman di browser mana pun
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true

Polifil untuk Array.prototype.includes memeriksa apakah metode didefinisikan dalam prototipe Array. Jika tidak — buat properti melalui Object.defineProperty dengan flag writable: true, configurable: true. Implementasi mengikuti spesifikasi ES2016: pemeriksaan null/undefined, konversi ke objek, bekerja dengan fromIndex negatif. Setelah menambahkan polifil, panggilan arr.includes(3) berfungsi di semua browser, termasuk Internet Explorer 11.

core-js: pustaka standar polifil

core-js — pustaka polifil JavaScript paling lengkap, yang mendukung semua proposal stage-4 TC39 (standar ECMAScript). core-js berisi polifil untuk Promise, Symbol, Map, Set, WeakMap, WeakSet, metode Array, metode String, metode Object, metode Number, metode Math, Reflect, globalThis dan semua stage-4 proposals. Versi saat ini core-js 3.38+ mencakup ES5–ES2025.

core-js terintegrasi dengan Babel melalui @babel/preset-env dan opsi useBuiltIns. Tanpa integrasi ini, pengembang harus mengimpor setiap polifil secara manual: import “core-js/stable/array/includes”. @babel/preset-env secara otomatis menambahkan import yang diperlukan berdasarkan browser target dari .browserslistrc. Ini mengurangi ukuran bundel — hanya polifil yang diperlukan yang dihubungkan.

Contoh: polifil untuk fetch

Fetch API — salah satu Web API yang paling sering dipolyfill. Implementasi native fetch tersedia di Chrome 42+ (2015), Safari 10.1+ (2017), Firefox 39+ (2015), tetapi tidak ada di Internet Explorer dan WebView lama. Polifil whatwg-fetch mengemulasi fetch melalui XMLHttpRequest. Alternatif — gunakan isomorphic-fetch (polifil untuk Node.js dan browser) atau pustaka universal axios yang tidak memerlukan polifil.

// Memuat polifil fetch hanya untuk browser lama
if (typeof self.fetch !== "function") {
  import("whatwg-fetch").then(module => {
    self.fetch = module.fetch;
    console.log("fetch polyfill loaded");
  });
}

// Menggunakan fetch (bekerja dengan polifil dan API native)
async function loadData() {
  try {
    const response = await fetch("https://api.example.com/data");
    const json = await response.json();
    return json;
  } catch (error) {
    console.error("Failed to load:", error);
  }
}

Import dinamis polifil fetch melalui import() memastikan browser modern tidak memuat kode berlebih. Polifil dimuat secara asinkron dan tidak memblokir thread utama. Setelah dimuat, self.fetch menggantikan implementasi native atau menambahkan yang hilang. Ini adalah teknik progressive enhancement: browser modern hanya menerima kode native, yang lama — polifil tambahan.

Integrasi core-js dengan Babel

// babel.config.js — core-js + preset-env
module.exports = {
  presets: [
    ["@babel/preset-env", {
      useBuiltIns: "usage",
      corejs: {
        version: "3.38",
        proposals: true,
      },
      targets: {
        browsers: ["> 0.5%", "not dead", "not op_mini all"],
      },
    }],
  ],
};

# .browserslistrc — browser target
> 0.5%
last 2 versions
not dead
not op_mini all
ie >= 11
not ios_saf < 12

useBuiltIns: “usage” menganalisis kode dan menambahkan hanya polifil yang benar-benar digunakan. corejs.version menunjukkan versi core-js dalam proyek. targets.browsers menentukan tingkat minimum browser — semakin tua browser, semakin banyak polifil yang akan dihubungkan. .browserslistrc digunakan tidak hanya oleh Babel, tetapi juga oleh Autoprefixer, PostCSS, dan Stylelint untuk penargetan yang konsisten.

Polyfill.io dan pemuatan dinamis polifil

Polyfill.io — layanan (dan pustaka dengan nama yang sama) yang secara dinamis menentukan polifil apa yang dibutuhkan browser pengguna dan mengembalikan hanya polifil tersebut. Polyfill.io menggunakan header User-Agent untuk menentukan versi browser dan memberikan set polifil minimal. Ini mengurangi jumlah data yang dikirimkan dibandingkan dengan bundel polifil universal.

Menghubungkan Polyfill.io dilakukan melalui tag <script> sebelum kode utama aplikasi. Layanan menganalisis User-Agent dan mengembalikan file JavaScript dengan polifil hanya untuk browser ini. Chrome tidak menerima polifil sama sekali, IE 11 menerima set lengkap. Ini adalah pendekatan optimal untuk kinerja: browser modern tidak memuat kode berlebih.

Menghubungkan Polyfill.io

<!-- Polyfill.io: pemuatan dinamis -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Promise%2CArray.prototype.includes%2CObject.assign%2Cfetch"></script>

<!-- Versi lokal Polyfill.io -->
<script src="/js/polyfill.js"></script>
<script>
  // deteksi fitur untuk fetch
  if (!self.fetch) {
    loadScript("/js/fetch-polyfill.js");
  }
</script>

Parameter features di URL Polyfill.io menentukan polifil apa yang akan dimuat. Nilai yang mungkin: nama metode (Array.prototype.includes), objek global (Promise), atau flag (es6, es2016). Flag “default” menghubungkan set dasar untuk JavaScript modern. Untuk proyek produksi, disarankan untuk menghosting Polyfill.io di CDN sendiri atau menggunakan versi lokal pustaka untuk mengontrol ketersediaan.

Polifil dalam aplikasi mobile dan WebView

WebView dalam aplikasi mobile (Android WebView, WKWebView di iOS) — lingkungan khusus untuk polifil. Versi WebView tergantung pada versi OS dan pembaruan Chrome System WebView (Android) atau WKWebView dari iOS Safari yang terinstal. Di versi Android lama (4.4, 5.0) WebView berbasis Chromium 30–37 — tanpa dukungan untuk fetch, Promise, IntersectionObserver.

React Native menggunakan JavaScriptCore (iOS) atau Hermes (Android) — mesin ini mengimplementasikan ES6+ secara berbeda. JavaScriptCore di iOS mendukung sebagian besar fitur ES6, tetapi mungkin tidak memiliki beberapa proposal stage-3. Hermes (digunakan secara default di React Native 0.70+) mendukung set terbatas dari standar ES — untuk itu polifil wajib diperlukan.

Memeriksa dukungan di WebView

// Deteksi fitur untuk WebView
const polyfills = [];

// Promise
if (typeof Promise === "undefined") {
  polyfills.push("Promise");
}

// Fetch API
if (typeof self.fetch === "undefined") {
  polyfills.push("fetch");
}

// IntersectionObserver (diperlukan untuk lazy loading)
if (typeof IntersectionObserver === "undefined") {
  polyfills.push("IntersectionObserver");
}

// Pemuatan dinamis polifil
if (polyfills.length > 0) {
  const script = document.createElement("script");
  script.src = "https://cdn.polyfill.io/v3/polyfill.min.js"
    + "?features=" + polyfills.join(",");
  document.head.appendChild(script);
}

Feature detection untuk WebView memeriksa keberadaan API kritis (Promise, fetch, IntersectionObserver) dan memuat secara dinamis polifil hanya untuk yang hilang. Ini memastikan bahwa WebView modern (Chrome 100+ di Android 12) tidak memuat kode berlebih, dan WebView lama (Android 5.0) mendapatkan dukungan yang diperlukan.