Polyfill: یہ کیا ہے، کام کا اصول اور API ایمولیشن کے لیے لائبریریاں

Polyfill کیا ہے؟

Polyfill کوڈ کا ایک ٹکڑا ہے (عام طور پر JavaScript) جو ان فعالیتوں کو لاگو کرتا ہے جو رن ٹائم ماحول مقامی طور پر سپورٹ نہیں کرتا۔ یہ اصطلاح ریمی شارپ نے 2009 میں ایک لفظوں کے کھیل کے طور پر وضع کی تھی: Polyfill Polyfilla سے مشابہ ہے، جو دیوار میں دراڑیں بھرنے والی پٹین ہے۔ Polyfill معیار اور مخصوص براؤزر یا رن ٹائم میں اس کی حمایت کے درمیان خلا کو پُر کرتا ہے۔

Polyfill موجودہ کوڈ میں ترمیم نہیں کرتا — یہ رن ٹائم ماحول کو بڑھاتا ہے۔ اگر براؤزر Array.prototype.includes کو سپورٹ نہیں کرتا ہے، تو polyfill مرکزی کوڈ پر عمل درآمد سے پہلے اس طریقے کو Array پروٹوٹائپ میں شامل کرتا ہے۔ Polyfills نئے گلوبل آبجیکٹ (Promise, Map, Set, Symbol)، جامد طریقے (Array.from, Object.assign) اور پروٹوٹائپ طریقے نقل کر سکتے ہیں۔

فیچر ڈیٹیکشن polyfill انسٹال کرنے سے پہلے ایک لازمی طریقہ کار ہے۔ یوزر ایجنٹ (کون سا براؤزر) چیک کرنے کے بجائے، طریقہ کار کے وجود کی جانچ کرنی چاہیے: if (!Array.prototype.includes) { Array.prototype.includes = ... }۔ یہ یقینی بناتا ہے کہ اگر مقامی نفاذ پہلے سے موجود ہے تو polyfill اسے اوور رائٹ نہ کرے۔ Google Analytics اور دیگر خدمات تجزیہ کے لیے API سپورٹ ڈیٹا اکٹھا کرتی ہیں۔

Polyfills کب ظاہر ہوئے

پہلے polyfills Internet Explorer 6–8 دور (2005–2009) میں نمودار ہوئے، جب ڈویلپرز نے W3C معیارات اور براؤزر نفاذ کے درمیان فرق دریافت کیا۔ یہ اصطلاح ریمی شارپ نے 2009 میں BarCamp London میں متعارف کرائی تھی۔ پہلا بڑے پیمانے پر polyfill html5shiv (2009) تھا — ایک لائبریری جو Internet Explorer میں HTML5 ٹیگز (<section>، <article>، <nav>) کے لیے سپورٹ شامل کرتی ہے۔

ES6 (2015) اور سالانہ ECMAScript اپڈیٹ سائیکل کی آمد کے ساتھ، ضروری polyfills کی تعداد بڑھ گئی۔ ہر سال معیار میں نئے طریقے شامل ہوتے ہیں (Array.includes، String.padStart، Object.fromEntries، Promise.allSettled) جو پرانے براؤزرز سپورٹ نہیں کرتے۔ core-js، جو 2014 میں es6-shim کے طور پر شروع ہوا، ایک عالمگیر حل بن گیا۔ 2026 تک، core-js میں ES5–ES2025 کے لیے 5,000 سے زیادہ polyfill ماڈیولز ہیں۔

کیا Polyfill کیا جا سکتا ہے اور کیا نہیں

Polyfill بمقابلہ ٹرانسپائلیشن: فرق اور تعامل

ٹرانسپائلیشن نئے نحو کو پرانے نحو میں تبدیل کرتا ہے (const → var، () => {} → function() {})۔ Polyfill گمشدہ طریقوں اور اشیاء کو شامل کرتا ہے (Promise, Array.includes)۔ یہ دو میکانزم ایک دوسرے کی تکمیل کرتے ہیں: ٹرانسپائلیشن کوڈ کو نحوی طور پر مطابقت پذیر بناتا ہے، polyfills API مکمل کو یقینی بناتے ہیں۔ Babel + core-js مکمل سپورٹ کے لیے معیاری مجموعہ ہے۔

Babel @babel/preset-env آپشن useBuiltIns کے ساتھ ہدف براؤزرز کی بنیاد پر طے کرتا ہے کہ کن polyfills کی ضرورت ہے۔ useBuiltIns: "usage" تجزیہ کرتا ہے کہ کوڈ میں کون سی APIs استعمال ہوتی ہیں اور core-js سے صرف ضروری polyfills درآمد کرتا ہے۔ useBuiltIns: "entry" ایک واحد core-js/stable درآمد کے ذریعے ہدف براؤزرز کے لیے تمام polyfills درآمد کرتا ہے۔

مثال: Array.prototype.includes کے لیے polyfill

// 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,
  });
}

// استعمال — اب کسی بھی براؤزر میں محفوظ
const arr = [1, 2, 3, 4, 5];
console.log(arr.includes(3)); // true

Array.prototype.includes کے لیے Polyfill چیک کرتا ہے کہ آیا طریقہ Array پروٹوٹائپ میں متعرف ہے۔ اگر نہیں، تو یہ Object.defineProperty کے ذریعے writable: true، configurable: true جھنڈوں کے ساتھ خاصیت بناتا ہے۔ نفاذ ES2016 تفصیلات پر عمل کرتا ہے: null/undefined چیک، آبجیکٹ میں تبدیلی، منفی fromIndex کو ہینڈل کرنا۔ polyfill شامل کرنے کے بعد، arr.includes(3) کال Internet Explorer 11 سمیت تمام براؤزرز میں کام کرتی ہے۔

core-js: معیاری Polyfill لائبریری

core-js سب سے جامع JavaScript polyfill لائبریری ہے، جو TC39 کی تمام stage-4 تجاویز (ECMAScript معیار) کو سپورٹ کرتی ہے۔ core-js میں Promise، Symbol، Map، Set، WeakMap، WeakSet، Array طریقے، String طریقے، Object طریقے، Number طریقے، Math طریقے، Reflect، globalThis اور تمام stage-4 تجاویز کے لیے polyfills شامل ہیں۔ موجودہ ورژن core-js 3.38+ ES5–ES2025 کا احاطہ کرتا ہے۔

core-js @babel/preset-env اور useBuiltIns آپشن کے ذریعے Babel کے ساتھ ضم ہوتا ہے۔ اس انضمام کے بغیر، ڈویلپرز کو دستی طور پر ہر polyfill درآمد کرنا پڑتا: import "core-js/stable/array/includes"۔ @babel/preset-env .browserslistrc سے ہدف براؤزرز کی بنیاد پر خود بخود ضروری درآمدات شامل کرتا ہے۔ یہ بنڈل سائز کو کم کرتا ہے — صرف ضروری polyfills شامل کیے جاتے ہیں۔

مثال: fetch کے لیے polyfill

Fetch API سب سے زیادہ polyfill کی جانے والی Web APIs میں سے ایک ہے۔ مقامی fetch نفاذ Chrome 42+ (2015)، Safari 10.1+ (2017)، Firefox 39+ (2015) میں دستیاب ہے، لیکن Internet Explorer اور پرانے WebViews میں موجود نہیں ہے۔ whatwg-fetch polyfill XMLHttpRequest کے ذریعے fetch کی نقل کرتا ہے۔ متبادل — isomorphic-fetch (Node.js اور براؤزر کے لیے polyfill) یا عالمگیر axios لائبریری استعمال کرنا، جسے polyfills کی ضرورت نہیں ہے۔

// صرف پرانے براؤزرز کے لیے fetch polyfill لوڈ کرنا
if (typeof self.fetch !== "function") {
  import("whatwg-fetch").then(module => {
    self.fetch = module.fetch;
    console.log("fetch polyfill loaded");
  });
}

// Fetch کا استعمال (polyfill اور مقامی 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);
  }
}

متحرک درآمد import() کے ذریعے fetch polyfill اس بات کو یقینی بناتا ہے کہ جدید براؤزر غیر ضروری کوڈ لوڈ نہ کریں۔ Polyfill غیر متزامن طور پر لوڈ ہوتا ہے اور مرکزی دھاگے کو مسدود نہیں کرتا۔ لوڈ کرنے کے بعد، self.fetch مقامی نفاذ کو بدل دیتا ہے یا گمشدہ نفاذ شامل کرتا ہے۔ یہ تدریجی بہتری کی تکنیک ہے: جدید براؤزر صرف مقامی کوڈ حاصل کرتے ہیں، پرانے براؤزر اضافی polyfill حاصل کرتے ہیں۔

Babel کے ساتھ core-js کا انضمام

// 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 — ہدف براؤزر
> 0.5%
last 2 versions
not dead
not op_mini all
ie >= 11
not ios_saf < 12

useBuiltIns: "usage" کوڈ کا تجزیہ کرتا ہے اور صرف حقیقت میں استعمال ہونے والے polyfills شامل کرتا ہے۔ corejs.version پروجیکٹ میں core-js ورژن بتاتا ہے۔ targets.browsers کم از کم براؤزر کی سطح کی وضاحت کرتا ہے — ہدف براؤزر جتنے پرانے ہوں گے، اتنے ہی زیادہ polyfills شامل ہوں گے۔ .browserslistrc صرف Babel ہی نہیں بلکہ Autoprefixer، PostCSS اور Stylelint بھی مستقل ہدف بندی کے لیے استعمال کرتے ہیں۔

Polyfill.io اور متحرک Polyfill لوڈنگ

Polyfill.io ایک خدمت ہے (اور اسی نام کی لائبریری) جو متحرک طور پر طے کرتی ہے کہ صارف کے براؤزر کو کن polyfills کی ضرورت ہے اور صرف وہی لوٹاتی ہے۔ Polyfill.io براؤزر ورژن کا تعین کرنے کے لیے User-Agent ہیڈر استعمال کرتا ہے اور polyfills کا کم سے کم سیٹ فراہم کرتا ہے۔ یہ عالمگیر polyfill بنڈل کے مقابلے میں منتقل کردہ ڈیٹا کی مقدار کو کم کرتا ہے۔

Polyfill.io کا کنکشن مرکزی ایپلیکیشن کوڈ سے پہلے <script> ٹیگ کے ذریعے کیا جاتا ہے۔ سروس User-Agent کا تجزیہ کرتی ہے اور صرف اس براؤزر کے لیے polyfills کے ساتھ JavaScript فائل لوٹاتی ہے۔ Chrome کو کوئی polyfill نہیں ملے گا، IE 11 کو مکمل سیٹ ملے گا۔ یہ کارکردگی کے لیے بہترین طریقہ ہے: جدید براؤزر غیر ضروری کوڈ لوڈ نہیں کرتے۔

Polyfill.io کا کنکشن

<!-- Polyfill.io: متحرک لوڈنگ -->
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=Promise%2CArray.prototype.includes%2CObject.assign%2Cfetch"></script>

<!-- مقامی Polyfill.io ورژن -->
<script src="/js/polyfill.js"></script>
<script>
  // feature detection for fetch
  if (!self.fetch) {
    loadScript("/js/fetch-polyfill.js");
  }
</script>

URL میں features پیرامیٹر Polyfill.io میں بتاتا ہے کہ کون سے polyfills لوڈ کرنے ہیں۔ ممکنہ اقدار: طریقے کے نام (Array.prototype.includes)، عالمی اشیاء (Promise)، یا جھنڈے (es6, es2016)۔ "default" جھنڈا جدید JavaScript کے لیے ایک بنیادی سیٹ لوڈ کرتا ہے۔ پروڈکشن پروجیکٹس کے لیے، Polyfill.io کو اپنے CDN پر میزبانی کرنے یا دستیابی کے کنٹرول کے لیے لائبریری کے مقامی ورژن استعمال کرنے کی سفارش کی جاتی ہے۔

موبائل ایپلیکیشنز اور WebView میں Polyfills

WebView موبائل ایپلیکیشنز میں (Android WebView، iOS پر WKWebView) polyfills کے لیے ایک خاص ماحول ہے۔ WebView ورژن OS ورژن اور انسٹال کردہ Chrome System WebView اپ ڈیٹ (Android) یا iOS Safari سے WKWebView پر منحصر ہے۔ Android (4.4، 5.0) کے پرانے ورژنز میں، WebView Chromium 30–37 پر مبنی ہے — fetch، Promise، IntersectionObserver کی حمایت کے بغیر۔

React Native JavaScriptCore (iOS) یا Hermes (Android) استعمال کرتا ہے — یہ انجن ES6+ کو مختلف طریقے سے لاگو کرتے ہیں۔ iOS پر JavaScriptCore زیادہ تر ES6 خصوصیات کو سپورٹ کرتا ہے لیکن کچھ stage-3 تجاویز سے محروم ہو سکتا ہے۔ Hermes (React Native 0.70+ میں بطور ڈیفالٹ استعمال ہوتا ہے) ES معیار کے ایک محدود سیٹ کو سپورٹ کرتا ہے — اس کے لیے polyfills لازمی ہیں۔

WebView میں حمایت کی جانچ

// WebView کے لیے feature detection
const polyfills = [];

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

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

// IntersectionObserver (سست لوڈنگ کے لیے ضروری)
if (typeof IntersectionObserver === "undefined") {
  polyfills.push("IntersectionObserver");
}

// متحرک 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);
}

WebView کے لیے فیچر ڈیٹیکشن اہم APIs (Promise، fetch، IntersectionObserver) کی موجودگی کی جانچ کرتا ہے اور صرف گمشدہ APIs کے لیے متحرک طور پر polyfills لوڈ کرتا ہے۔ یہ یقینی بناتا ہے کہ جدید WebViews (Android 12 پر Chrome 100+) غیر ضروری کوڈ لوڈ نہ کریں، جبکہ پرانے WebViews (Android 5.0) کو ضروری حمایت ملے۔