Polyfill: mi ez, működési elv és könyvtárak API-emulációhoz

Mi az a Polyfill?

Polyfill — egy kódrészlet (általában JavaScript), amely olyan funkciót implementál, amelyet a végrehajtási környezet nem támogat natívan. A kifejezést Remy Sharp javasolta 2009-ben szójátékként: Polyfill — a gitt (Polyfilla) analógiája, amely kitölti a repedéseket a falon. A Polyfill kitölti a szabvány és az adott böngésző vagy futási környezet támogatása közötti réseket.

A Polyfill nem változtatja meg a meglévő kódot — kiterjeszti a végrehajtási környezetet. Ha a böngésző nem támogatja az Array.prototype.includes-t, a polifill hozzáadja ezt a metódust az Array prototípushoz a fő kód végrehajtása előtt. A polifillek képesek emulálni új globális objektumokat (Promise, Map, Set, Symbol), statikus metódusokat (Array.from, Object.assign) és prototípus metódusokat.

Feature detection — kötelező mechanizmus a polifill telepítése előtt. A user-agent ellenőrzése (melyik böngésző) helyett ellenőrizni kell a metódus meglétét: if (!Array.prototype.includes) { Array.prototype.includes = ... }. Ez garantálja, hogy a polifill nem írja felül a natív implementációt, ha az már létezik. A Google Analytics és más szolgáltatások adatokat gyűjtenek az API támogatásáról elemzés céljából.

Mikor jelentek meg a polifillek

Az első polifillek az Internet Explorer 6–8 korszakában (2005–2009) jelentek meg, amikor a fejlesztők felfedezték a szakadékot a W3C szabványok és a böngészők implementációja között. A kifejezést Remy Sharp vezette be 2009-ben a BarCamp London konferencián. Az első tömeges polifill a html5shiv (2009) volt — egy könyvtár, amely HTML5-címkék (<section>, <article>, <nav>) támogatását adta hozzá az Internet Explorer-hez.

Az ES6 (2015) megjelenésével és az ECMAScript éves frissítési ciklusával a szükséges polifillek száma megnőtt. Minden évben a szabvány új metódusokat ad hozzá (Array.includes, String.padStart, Object.fromEntries, Promise.allSettled), amelyeket a régi böngészők nem támogatnak. A core-js, amely 2014-ben es6-shimként indult, univerzális megoldássá vált. 2026-ra a core-js több mint 5000 polifill modult tartalmaz ES5–ES2025-höz.

Mit lehet és mit nem lehet polifillálni

Polyfill vs transzpiláció: különbségek és kölcsönhatás

Transzpiláció átalakítja az új szintaxist régire (const → var, () => {} → function() {}). Polyfill hozzáadja a hiányzó metódusokat és objektumokat (Promise, Array.includes). Ez a két mechanizmus kiegészíti egymást: a transzpiláció szintaktikai kompatibilitást biztosít, a polifillek az API teljességét biztosítják. A Babel + core-js — a szabványos kombináció a teljes támogatáshoz.

A Babel @babel/preset-env a useBuiltIns opcióval meghatározza, hogy mely polifillekre van szükség a célböngészők alapján. A useBuiltIns: „usage” elemzi, hogy mely API-kat használják a kódban, és csak a szükséges polifilleket csatlakoztatja a core-js-ből. A useBuiltIns: „entry” az összes polifillt csatlakoztatja a célböngészőkhöz egyetlen core-js/stable importon keresztül.

Példa: polifill az Array.prototype.includes-hoz

// Polifill meglétének ellenőrzése és hozzáadása
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,
  });
}

// Használat — mostantól biztonságos bármely böngészőben
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true

A polifill az Array.prototype.includes-hoz ellenőrzi, hogy a metódus definiálva van-e az Array prototípusban. Ha nem — létrehoz egy tulajdonságot az Object.defineProperty-n keresztül writable: true, configurable: true flag-ekkel. Az implementáció követi az ES2016 specifikációt: null/undefined ellenőrzés, objektummá konvertálás, negatív fromIndex-szel való munka. A polifill hozzáadása után az arr.includes(3) hívás minden böngészőben működik, beleértve az Internet Explorer 11-et is.

core-js: a szabványos polifill könyvtár

core-js — a legteljesebb JavaScript polifill könyvtár, amely támogatja a TC39 (ECMAScript szabvány) összes stage-4 javaslatát. A core-js polifilleket tartalmaz a Promise, Symbol, Map, Set, WeakMap, WeakSet, Array metódusok, String metódusok, Object metódusok, Number metódusok, Math metódusok, Reflect, globalThis és az összes stage-4 proposals számára. A jelenlegi core-js 3.38+ verzió lefedi az ES5–ES2025-öt.

A core-js integrálódik a Babellal a @babel/preset-env és a useBuiltIns opció segítségével. Ezen integráció nélkül a fejlesztőnek manuálisan kellene importálnia minden polifillt: import „core-js/stable/array/includes”. A @babel/preset-env automatikusan hozzáadja a szükséges importokat a .browserslistrc-ben lévő célböngészők alapján. Ez csökkenti a bundle méretét — csak a szükséges polifillek csatlakoznak.

Példa: polifill a fetch-hez

Fetch API — az egyik leggyakrabban polifillált Web API. A fetch natív implementációja elérhető a Chrome 42+-ban (2015), Safari 10.1+-ben (2017), Firefox 39+-ben (2015), de hiányzik az Internet Explorer-ből és a régi WebView-kból. A whatwg-fetch polifill a fetch-et XMLHttpRequest-en keresztül emulálja. Alternatíva — használjuk az isomorphic-fetch-et (polifill Node.js-hez és böngészőhöz) vagy az univerzális axios könyvtárat, amely nem igényel polifilleket.

// Fetch polifill betöltése csak régi böngészőkhöz
if (typeof self.fetch !== "function") {
  import("whatwg-fetch").then(module => {
    self.fetch = module.fetch;
    console.log("fetch polyfill loaded");
  });
}

// Fetch használata (működik polifill-lel és natív API-val is)
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);
  }
}

Dinamikus import a fetch polifill import() segítségével garantálja, hogy a modern böngészők ne töltsenek be felesleges kódot. A polifill aszinkron módon töltődik be, és nem blokkolja a fő szálat. Betöltés után a self.fetch helyettesíti a natív implementációt vagy hozzáadja a hiányzót. Ez a progresszív fejlesztés technikája: a modern böngészők csak natív kódot kapnak, a régiek — további polifillt.

A core-js integrációja a Babellal

// 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 — célböngészők
> 0.5%
last 2 versions
not dead
not op_mini all
ie >= 11
not ios_saf < 12

useBuiltIns: „usage” elemzi a kódot, és csak azokat a polifilleket adja hozzá, amelyeket ténylegesen használnak. A corejs.version jelzi a core-js verzióját a projektben. A targets.browsers meghatározza a böngészők minimális szintjét — minél régebbi a böngésző, annál több polifill lesz csatlakoztatva. A .browserslistrc-t nem csak a Babel, hanem az Autoprefixer, a PostCSS és a Stylelint is használja az egységes célzáshoz.

Polyfill.io és a polifillek dinamikus betöltése

Polyfill.io — szolgáltatás (és azonos nevű könyvtár), amely dinamikusan meghatározza, hogy a felhasználó böngészőjének milyen polifillekre van szüksége, és csak azokat adja vissza. A Polyfill.io a User-Agent fejlécet használja a böngésző verziójának meghatározásához, és a minimális polifill készletet szállítja. Ez csökkenti a továbbított adatok mennyiségét az univerzális polifill bundle-hez képest.

A Polyfill.io csatlakoztatása egy <script> tagen keresztül történik az alkalmazás fő kódja előtt. A szolgáltatás elemzi a User-Agent-et, és visszaad egy JavaScript fájlt, amely csak ehhez a böngészőhöz tartalmaz polifilleket. A Chrome nem kap egyetlen polifillt sem, az IE 11 megkapja a teljes készletet. Ez a teljesítmény szempontjából optimális megközelítés: a modern böngészők nem töltenek be felesleges kódot.

A Polyfill.io csatlakoztatása

<!-- Polyfill.io: dinamikus betöltés -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Promise%2CArray.prototype.includes%2CObject.assign%2Cfetch"></script>

<!-- A Polyfill.io helyi verziója -->
<script src="/js/polyfill.js"></script>
<script>
  // feature detection a fetch-hez
  if (!self.fetch) {
    loadScript("/js/fetch-polyfill.js");
  }
</script>

A features paraméter a Polyfill.io URL-jében megadja, hogy mely polifilleket kell betölteni. Lehetséges értékek: metódusnevek (Array.prototype.includes), globális objektumok (Promise) vagy flag-ek (es6, es2016). A „default” flag a modern JavaScript alapkészletét csatlakoztatja. Éles projektekhez ajánlott a Polyfill.io-t saját CDN-nel hosztolni vagy a könyvtár helyi verzióját használni az elérhetőség ellenőrzése érdekében.

Polifillek mobilalkalmazásokban és WebView-ban

WebView a mobilalkalmazásokban (Android WebView, WKWebView iOS-en) — különleges környezet a polifillek számára. A WebView verziója függ az operációs rendszer verziójától és a telepített Chrome System WebView (Android) vagy iOS Safari WKWebView frissítéstől. Az Android régi verzióiban (4.4, 5.0) a WebView a Chromium 30–37-en alapul — fetch, Promise, IntersectionObserver támogatás nélkül.

React Native a JavaScriptCore-t (iOS) vagy a Hermes-t (Android) használja — ezek a motorok eltérően implementálják az ES6+-ot. Az iOS JavaScriptCore támogatja a legtöbb ES6 funkciót, de előfordulhat, hogy néhány stage-3 javaslat hiányzik. A Hermes (alapértelmezés szerint használt a React Native 0.70+-ben) az ES szabvány korlátozott készletét támogatja — számára a polifillek kötelezőek.

Támogatás ellenőrzése WebView-ban

// Feature detection WebView-hoz
const polyfills = [];

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

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

// IntersectionObserver (szükséges a lusta betöltéshez)
if (typeof IntersectionObserver === "undefined") {
  polyfills.push("IntersectionObserver");
}

// Polifillek dinamikus betöltése
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 a WebView számára ellenőrzi a kritikus API-k (Promise, fetch, IntersectionObserver) meglétét, és dinamikusan tölti be a polifilleket csak a hiányzókhoz. Ez garantálja, hogy a modern WebView (Chrome 100+ Android 12-n) nem tölt be felesleges kódot, a régi WebView (Android 5.0) pedig megkapja a szükséges támogatást.