Polyfill: ano ito, prinsipyo ng paggawa, at mga aklatan para sa emulasyon ng API

Ano ang Polyfill?

Polyfill — isang piraso ng code (karaniwang JavaScript) na nag-iimplementa ng functionality na hindi native sinusuportahan ng execution environment. Ang termino ay iminungkahi ni Remy Sharp noong 2009 bilang isang paglalaro ng salita: Polyfill — analogo ng masilya (Polyfilla) na pumupuno ng mga bitak sa dingding. Pinupuno ng Polyfill ang mga puwang sa pagitan ng standard at suporta sa isang partikular na browser o runtime.

Hindi binabago ng Polyfill ang umiiral na code — pinapalawak nito ang execution environment. Kung hindi sinusuportahan ng browser ang Array.prototype.includes, idinadagdag ng polyfill ang method na ito sa prototype ng Array bago isagawa ang pangunahing code. Maaaring i-emulate ng mga polyfill ang mga bagong global object (Promise, Map, Set, Symbol), static method (Array.from, Object.assign), at prototype method.

Feature detection — mandatoryong mekanismo bago i-install ang polyfill. Sa halip na suriin ang user-agent (kung anong browser), dapat suriin ang pagkakaroon ng method: if (!Array.prototype.includes) { Array.prototype.includes = ... }. Ginagarantiyahan nito na hindi i-overwrite ng polyfill ang native na implementasyon kung mayroon na. Ang Google Analytics at iba pang serbisyo ay nangongolekta ng data tungkol sa suporta ng API para sa pagsusuri.

Kailan lumitaw ang mga polyfill

Ang unang polyfill ay lumitaw sa panahon ng Internet Explorer 6–8 (2005–2009), nang matuklasan ng mga developer ang agwat sa pagitan ng mga standard ng W3C at implementasyon sa mga browser. Ang termino ay ipinakilala ni Remy Sharp noong 2009 sa kumperensya ng BarCamp London. Ang unang malawakang polyfill ay html5shiv (2009) — isang aklatan na nagdagdag ng suporta para sa HTML5 tags (<section>, <article>, <nav>) sa Internet Explorer.

Sa pagdating ng ES6 (2015) at taunang siklo ng pag-update ng ECMAScript, dumami ang bilang ng mga kinakailangang polyfill. Bawat taon, nagdaragdag ang standard ng mga bagong method (Array.includes, String.padStart, Object.fromEntries, Promise.allSettled) na hindi sinusuportahan ng mga lumang browser. Ang core-js, na nagsimula bilang es6-shim noong 2014, ay naging universal na solusyon. Pagsapit ng 2026, ang core-js ay naglalaman ng mahigit 5000 module ng polyfill para sa ES5–ES2025.

Ano ang maaari at hindi maaaring i-polyfill

Polyfill vs transpilation: pagkakaiba at interaksyon

Transpilation ay nagko-convert ng bagong syntax sa luma (const → var, () => {} → function() {}). Polyfill ay nagdaragdag ng mga nawawalang method at object (Promise, Array.includes). Ang dalawang mekanismong ito ay nagpupuno sa isa’t isa: tinitiyak ng transpilation ang syntactic compatibility, tinitiyak ng polyfill ang pagkakumpleto ng API. Ang Babel + core-js — standard na kombinasyon para sa buong suporta.

Ang Babel @babel/preset-env na may opsyon na useBuiltIns ay tumutukoy kung aling polyfill ang kailangan batay sa target browser. Ang useBuiltIns: “usage” ay sumusuri kung aling API ang ginagamit sa code at nagkokonekta lamang ng mga kinakailangang polyfill mula sa core-js. Ang useBuiltIns: “entry” ay nagkokonekta ng lahat ng polyfill para sa target browser sa pamamagitan ng isang import ng core-js/stable.

Halimbawa: polyfill para sa Array.prototype.includes

// Pagsusuri ng pagkakaroon at pagdaragdag ng polyfill
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,
  });
}

// Paggamit — ngayon ligtas sa anumang browser
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true

Ang polyfill para sa Array.prototype.includes ay sumusuri kung ang method ay tinukoy sa prototype ng Array. Kung hindi — gumagawa ito ng property sa pamamagitan ng Object.defineProperty na may flag na writable: true, configurable: true. Ang implementasyon ay sumusunod sa ES2016 specification: pagsusuri ng null/undefined, conversion sa object, paggawa sa negatibong fromIndex. Pagkatapos idagdag ang polyfill, ang pagtawag sa arr.includes(3) ay gumagana sa lahat ng browser, kabilang ang Internet Explorer 11.

core-js: standard library ng mga polyfill

core-js — ang pinakakumpletong polyfill library para sa JavaScript, na sumusuporta sa lahat ng stage-4 proposal ng TC39 (ECMAScript standard). Ang core-js ay naglalaman ng polyfill para sa Promise, Symbol, Map, Set, WeakMap, WeakSet, Array method, String method, Object method, Number method, Math method, Reflect, globalThis at lahat ng stage-4 proposals. Ang kasalukuyang bersyon na core-js 3.38+ ay sumasaklaw sa ES5–ES2025.

Ang core-js ay nag-iintegrate sa Babel sa pamamagitan ng @babel/preset-env at opsyon na useBuiltIns. Kung wala ang integration na ito, kailangang manual na i-import ng developer ang bawat polyfill: import “core-js/stable/array/includes”. Awtomatikong nagdaragdag ang @babel/preset-env ng mga kinakailangang import batay sa target browser mula sa .browserslistrc. Pinapaliit nito ang laki ng bundle — tanging ang mga kinakailangang polyfill ang nakokonekta.

Halimbawa: polyfill para sa fetch

Fetch API — isa sa mga pinakamadalas na pino-polyfill na Web API. Ang native na implementasyon ng fetch ay available sa Chrome 42+ (2015), Safari 10.1+ (2017), Firefox 39+ (2015), ngunit wala sa Internet Explorer at lumang WebView. Ang polyfill na whatwg-fetch ay nag-e-emulate ng fetch sa pamamagitan ng XMLHttpRequest. Alternatibo — gamitin ang isomorphic-fetch (polyfill para sa Node.js at browser) o ang universal library na axios, na hindi nangangailangan ng polyfill.

// Pag-load ng fetch polyfill para lamang sa lumang browser
if (typeof self.fetch !== "function") {
  import("whatwg-fetch").then(module => {
    self.fetch = module.fetch;
    console.log("fetch polyfill loaded");
  });
}

// Paggamit ng fetch (gumagana sa parehong polyfill at native API)
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);
  }
}

Dynamic na import ng fetch polyfill sa pamamagitan ng import() ay ginagarantiyahan na ang mga modernong browser ay hindi mag-load ng labis na code. Ang polyfill ay na-load nang asynchronous at hindi hinaharangan ang main thread. Pagkatapos mag-load, pinapalitan ng self.fetch ang native na implementasyon o idinaragdag ang nawawala. Ito ay isang teknik ng progressive enhancement: ang mga modernong browser ay tumatanggap lamang ng native code, ang mga luma — karagdagang polyfill.

Integration ng core-js sa 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 — target browser
> 0.5%
last 2 versions
not dead
not op_mini all
ie >= 11
not ios_saf < 12

useBuiltIns: “usage” ay sumusuri sa code at nagdaragdag lamang ng mga polyfill na aktwal na ginagamit. Ang corejs.version ay nagpapahiwatig ng bersyon ng core-js sa proyekto. Ang targets.browsers ay tumutukoy sa minimal na antas ng browser — kung gaano katanda ang browser, mas maraming polyfill ang makokonekta. Ang .browserslistrc ay ginagamit hindi lamang ng Babel, kundi pati na rin ng Autoprefixer, PostCSS at Stylelint para sa consistent na pag-target.

Polyfill.io at dynamic na pag-load ng polyfill

Polyfill.io — isang serbisyo (at library na may parehong pangalan) na dynamic na tinutukoy kung aling polyfill ang kailangan ng browser ng user at ibinabalik lamang ang mga ito. Ginagamit ng Polyfill.io ang header na User-Agent upang matukoy ang bersyon ng browser at nagbibigay ng minimal na set ng polyfill. Binabawasan nito ang dami ng data na ipinapadala kumpara sa isang universal na polyfill bundle.

Ang pagkonekta ng Polyfill.io ay ginagawa sa pamamagitan ng isang <script> tag bago ang pangunahing code ng application. Sinusuri ng serbisyo ang User-Agent at nagbabalik ng JavaScript file na may polyfill para lamang sa browser na ito. Ang Chrome ay hindi makakatanggap ng anumang polyfill, ang IE 11 ay makakatanggap ng kumpletong set. Ito ang pinakamainam na approach para sa pagganap: ang mga modernong browser ay hindi nag-load ng labis na code.

Pagkonekta ng Polyfill.io

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

<!-- Lokal na bersyon ng Polyfill.io -->
<script src="/js/polyfill.js"></script>
<script>
  // feature detection para sa fetch
  if (!self.fetch) {
    loadScript("/js/fetch-polyfill.js");
  }
</script>

Parameter features sa URL ng Polyfill.io ay nagpapahiwatig kung aling polyfill ang dapat i-load. Mga posibleng halaga: pangalan ng method (Array.prototype.includes), global object (Promise), o flag (es6, es2016). Ang flag na “default” ay nagkokonekta ng base set para sa modernong JavaScript. Para sa production project, inirerekomenda na i-host ang Polyfill.io sa sariling CDN o gumamit ng lokal na bersyon ng library para sa kontrol ng availability.

Mga polyfill sa mobile apps at WebView

WebView sa mga mobile application (Android WebView, WKWebView sa iOS) — isang espesyal na kapaligiran para sa polyfill. Ang bersyon ng WebView ay depende sa bersyon ng OS at naka-install na update ng Chrome System WebView (Android) o WKWebView mula sa iOS Safari. Sa lumang bersyon ng Android (4.4, 5.0) ang WebView ay batay sa Chromium 30–37 — walang suporta para sa fetch, Promise, IntersectionObserver.

React Native ay gumagamit ng JavaScriptCore (iOS) o Hermes (Android) — iba-iba ang pag-implementa ng mga engine na ito sa ES6+. Sinusuportahan ng JavaScriptCore sa iOS ang karamihan sa mga feature ng ES6, ngunit maaaring walang ilang stage-3 proposal. Ang Hermes (default na ginagamit sa React Native 0.70+) ay sumusuporta sa limitadong set ng ES standard — para dito, ang polyfill ay mandatory.

Pagsusuri ng suporta sa WebView

// Feature detection para sa WebView
const polyfills = [];

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

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

// IntersectionObserver (kinakailangan para sa lazy loading)
if (typeof IntersectionObserver === "undefined") {
  polyfills.push("IntersectionObserver");
}

// Dynamic na pag-load ng polyfill
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 para sa WebView ay sumusuri sa pagkakaroon ng kritikal na API (Promise, fetch, IntersectionObserver) at dynamic na naglo-load ng polyfill para lamang sa mga nawawala. Ginagarantiyahan nito na ang modernong WebView (Chrome 100+ sa Android 12) ay hindi naglo-load ng labis na code, at ang lumang WebView (Android 5.0) ay nakakakuha ng kinakailangang suporta.