Polyfill: nədir, iş prinsipi və API emulyasiyası üçün kitabxanalar

Polyfill nədir?

Polyfill — icra mühitinin native dəstəkləmədiyi funksionallığı tətbiq edən kod parçası (adətən JavaScript). Termin Remy Sharp tərəfindən 2009-cu ildə söz oyunu olaraq təklif edilmişdir: Polyfill — divardakı çatları dolduran macun (Polyfilla) analoqu. Polyfill standartla müəyyən brauzer və ya icra mühitindəki dəstək arasındakı boşluqları doldurur.

Polyfill mövcud kodu dəyişmir — o, icra mühitini genişləndirir. Brauzer Array.prototype.includes-i dəstəkləmirsə, polifill əsas kod icra olunmamışdan əvvəl bu metodu Array prototipinə əlavə edir. Polifillər yeni qlobal obyektləri (Promise, Map, Set, Symbol), statik metodları (Array.from, Object.assign) və prototip metodlarını emulyasiya edə bilər.

Feature detection — polifill quraşdırmazdan əvvəl məcburi mexanizm. User-agent yoxlamaq (hansı brauzer) əvəzinə metodun mövcudluğunu yoxlamaq lazımdır: if (!Array.prototype.includes) { Array.prototype.includes = ... }. Bu, polifillin mövcud native tətbiqi üstünə yazmamasına zəmanət verir. Google Analytics və digər xidmətlər təhlil üçün API dəstəyi haqqında məlumat toplayır.

Polifillər nə vaxt ortaya çıxdı

İlk polifillər Internet Explorer 6–8 dövründə (2005–2009), tərtibatçılar W3C standartları ilə brauzer tətbiqləri arasında uyğunsuzluq aşkar etdikdə ortaya çıxdı. Termin Remy Sharp tərəfindən 2009-cu ildə BarCamp London konfransında təqdim edildi. İlk kütləvi polifill html5shiv (2009) oldu — Internet Explorer-də HTML5 teqlərini (<section>, <article>, <nav>) dəstəkləmək üçün kitabxana.

ES6 (2015) və ECMAScript-in illik yeniləmə dövrü ilə lazımi polifillərin sayı artdı. Hər il standart köhnə brauzerlər tərəfindən dəstəklənməyən yeni metodlar (Array.includes, String.padStart, Object.fromEntries, Promise.allSettled) əlavə edir. 2014-cü ildə es6-shim kimi başlayan core-js universal həll yoluna çevrildi. 2026-cı ilə qədər core-js ES5–ES2025 üçün 5000-dən çox polifill modulu ehtiva edir.

Nəyi polifill etmək olar və nəyi etmək olmaz

Polyfill vs transpilyasiya: fərqlər və qarşılıqlı əlaqə

Transpilyasiya yeni sintaksisi köhnəyə çevirir (const → var, () => {} → function() {}). Polyfill çatışmayan metodları və obyektləri əlavə edir (Promise, Array.includes). Bu iki mexanizm bir-birini tamamlayır: transpilyasiya sintaktik uyğunluğu təmin edir, polifilllər API-nin tamlığını təmin edir. Babel + core-js — tam dəstək üçün standart kombinasiya.

Babel @babel/preset-env useBuiltIns seçimi ilə hədəf brauzerlər əsasında hansı polifillərin lazım olduğunu müəyyən edir. useBuiltIns: “usage” kodda hansı API-lərin istifadə edildiyini təhlil edir və core-js-dən yalnız lazımi polifilləri birləşdirir. useBuiltIns: “entry” tək core-js/stable idxalı ilə hədəf brauzerlər üçün bütün polifillləri birləşdirir.

Nümunə: Array.prototype.includes üçün polifill

// Polifillin mövcudluğunun yoxlanılması və əlavə edilməsi
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,
  });
}

// İstifadə — indi istənilən brauzerdə təhlükəsizdir
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true

Polifill Array.prototype.includes üçün metodun Array prototipində təyin edilib-edilmədiyini yoxlayır. Əgər yoxsa — Object.defineProperty vasitəsilə writable: true, configurable: true bayraqları ilə xassə yaradır. Tətbiq ES2016 spesifikasiyasına uyğundur: null/undefined yoxlanışı, obyektə çevirmə, mənfi fromIndex ilə iş. Polifill əlavə edildikdən sonra arr.includes(3) çağırışı Internet Explorer 11 də daxil olmaqla bütün brauzerlərdə işləyir.

core-js: standart polifill kitabxanası

core-js — TC39-un bütün stage-4 təkliflərini (ECMAScript standartı) dəstəkləyən ən tam JavaScript polifill kitabxanası. core-js Promise, Symbol, Map, Set, WeakMap, WeakSet, Array metodları, String metodları, Object metodları, Number metodları, Math metodları, Reflect, globalThis və bütün stage-4 proposals üçün polifillləri ehtiva edir. Cari core-js 3.38+ versiyası ES5–ES2025-i əhatə edir.

core-js Babel ilə @babel/preset-env və useBuiltIns seçimi vasitəsilə inteqrasiya olunur. Bu inteqrasiya olmadan tərtibatçı hər polifilli əl ilə idxal etməli olardı: import “core-js/stable/array/includes”. @babel/preset-env .browserslistrc-dəki hədəf brauzerlər əsasında avtomatik olaraq lazımi idxalları əlavə edir. Bu, bundle ölçüsünü azaldır — yalnız lazımi polifilllər birləşdirilir.

Nümunə: fetch üçün polifill

Fetch API — ən çox polifill edilən Web API-lərdən biridir. fetch-in native tətbiqi Chrome 42+ (2015), Safari 10.1+ (2017), Firefox 39+ (2015) mövcuddur, lakin Internet Explorer və köhnə WebView-də yoxdur. whatwg-fetch polifilli fetch-i XMLHttpRequest vasitəsilə emulyasiya edir. Alternativ — isomorphic-fetch (Node.js və brauzer üçün polifill) və ya polifill tələb etməyən universal axios kitabxanasından istifadə.

// Fetch polifillinin yalnız köhnə brauzerlər üçün yüklənməsi
if (typeof self.fetch !== "function") {
  import("whatwg-fetch").then(module => {
    self.fetch = module.fetch;
    console.log("fetch polyfill loaded");
  });
}

// Fetch istifadəsi (həm polifill, həm də native API ilə işləyir)
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);
  }
}

Dinamik import fetch polifillinin import() vasitəsilə yüklənməsi müasir brauzerlərin artıq kod yükləməməsinə zəmanət verir. Polifill asinxron yüklənir və əsas axını bloklamır. Yükləndikdən sonra self.fetch native tətbiqi əvəz edir və ya çatışmayanı əlavə edir. Bu mütərəqqi enhancement texnikasıdır: müasir brauzerlər yalnız native kod alır, köhnələr — əlavə polifill.

core-js-in Babel ilə inteqrasiyası

// 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 — hədəf brauzerlər
> 0.5%
last 2 versions
not dead
not op_mini all
ie >= 11
not ios_saf < 12

useBuiltIns: “usage” kodu təhlil edir və yalnız həqiqətən istifadə olunan polifillləri əlavə edir. corejs.version layihədə core-js versiyasını göstərir. targets.browsers brauzerlərin minimum səviyyəsini müəyyən edir — brauzerlər nə qədər köhnədirsə, bir o qədər çox polifill birləşdiriləcək. .browserslistrc təkcə Babel tərəfindən deyil, həm də Autoprefixer, PostCSS və Stylelint tərəfindən ardıcıl hədəfləmə üçün istifadə olunur.

Polyfill.io və polifillərin dinamik yüklənməsi

Polyfill.io — istifadəçinin brauzerinə hansı polifilllərin lazım olduğunu dinamik olaraq müəyyən edən və yalnız onları qaytaran xidmət (və eyniadlı kitabxana). Polyfill.io brauzer versiyasını müəyyən etmək üçün User-Agent başlığından istifadə edir və minimal polifill dəstini təqdim edir. Bu, universal polifill bundle ilə müqayisədə ötürülən məlumatların həcmini azaldır.

Polyfill.io-nun qoşulması tətbiqin əsas kodundan əvvəl <script> teqi vasitəsilə həyata keçirilir. Xidmət User-Agent-i təhlil edir və yalnız bu brauzer üçün polifillləri olan JavaScript faylını qaytarır. Chrome heç bir polifill almır, IE 11 tam dəst alır. Bu performans üçün optimal yanaşmadır: müasir brauzerlər artıq kod yükləmir.

Polyfill.io-nun qoşulması

<!-- Polyfill.io: dinamik yükləmə -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Promise%2CArray.prototype.includes%2CObject.assign%2Cfetch"></script>

<!-- Polyfill.io-nun lokal versiyası -->
<script src="/js/polyfill.js"></script>
<script>
  // fetch üçün feature detection
  if (!self.fetch) {
    loadScript("/js/fetch-polyfill.js");
  }
</script>

Parametr features Polyfill.io URL-də hansı polifilllərin yüklənəcəyini göstərir. Mümkün dəyərlər: metod adları (Array.prototype.includes), qlobal obyektlər (Promise) və ya bayraqlar (es6, es2016). “Default” bayrağı müasir JavaScript üçün əsas dəsti birləşdirir. İstehsal layihələri üçün Polyfill.io-nun öz CDN-də yerləşdirilməsi və ya əlçatanlığa nəzarət üçün kitabxananın lokal versiyasından istifadə edilməsi tövsiyə olunur.

Mobil tətbiqlərdə və WebView-də polifillər

WebView mobil tətbiqlərdə (Android WebView, iOS-da WKWebView) — polifilllər üçün xüsusi mühitdir. WebView versiyası OS versiyasından və quraşdırılmış Chrome System WebView (Android) və ya iOS Safari-dən WKWebView yeniləməsindən asılıdır. Köhnə Android versiyalarında (4.4, 5.0) WebView Chromium 30–37 əsasında işləyir — fetch, Promise, IntersectionObserver dəstəyi yoxdur.

React Native JavaScriptCore (iOS) və ya Hermes (Android) istifadə edir — bu mühərriklər ES6+-nı fərqli şəkildə tətbiq edir. iOS-da JavaScriptCore əksər ES6 xüsusiyyətlərini dəstəkləyir, lakin bəzi stage-3 təklifləri olmaya bilər. Hermes (React Native 0.70+-də standart) məhdud ES standartı dəstinə malikdir — onun üçün polifilllər məcburidir.

WebView-də dəstəyin yoxlanılması

// WebView üçün feature detection
const polyfills = [];

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

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

// IntersectionObserver (tənbəl yükləmə üçün lazımdır)
if (typeof IntersectionObserver === "undefined") {
  polyfills.push("IntersectionObserver");
}

// Polifilllərin dinamik yüklənməsi
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 WebView üçün kritik API-lərin (Promise, fetch, IntersectionObserver) mövcudluğunu yoxlayır və yalnız çatışmayanlar üçün polifillləri dinamik yükləyir. Bu, müasir WebView (Android 12-də Chrome 100+) artıq kod yükləməməsinə, köhnə WebView (Android 5.0) isə lazımi dəstəyi almasına zəmanət verir.