Polyfill: এটি কী, কার্যনীতি এবং API ইমুলেশনের জন্য লাইব্রেরি

Polyfill কী?

Polyfill হল কোডের একটি অংশ (সাধারণত JavaScript) যা সেই কার্যকারিতা বাস্তবায়ন করে যা রানটাইম পরিবেশ নেটিভভাবে সমর্থন করে না। শব্দটি রেমি শার্প 2009 সালে একটি শব্দের খেলা হিসাবে তৈরি করেছিলেন: পলিফিল হল পলিফিলার অনুরূপ, যা দেয়ালের ফাটল পূরণ করার একটি পুটি। Polyfill একটি নির্দিষ্ট ব্রাউজার বা রানটাইমে মান এবং তার সমর্থনের মধ্যে ফাঁক পূরণ করে।

Polyfill বিদ্যমান কোড পরিবর্তন করে না — এটি রানটাইম পরিবেশকে প্রসারিত করে। যদি একটি ব্রাউজার Array.prototype.includes সমর্থন না করে, পলিফিল প্রধান কোড কার্যকর হওয়ার আগে Array প্রোটোটাইপে এই পদ্ধতি যোগ করে। পলিফিলগুলি নতুন গ্লোবাল অবজেক্ট (Promise, Map, Set, Symbol), স্ট্যাটিক পদ্ধতি (Array.from, Object.assign) এবং প্রোটোটাইপ পদ্ধতি অনুকরণ করতে পারে।

ফিচার ডিটেকশন পলিফিল ইনস্টল করার আগে একটি বাধ্যতামূলক প্রক্রিয়া। ইউজার-এজেন্ট (কোন ব্রাউজার) পরীক্ষা করার পরিবর্তে, পদ্ধতির অস্তিত্ব পরীক্ষা করা উচিত: if (!Array.prototype.includes) { Array.prototype.includes = ... }। এটি নিশ্চিত করে যে নেটিভ বাস্তবায়ন ইতিমধ্যে থাকলে পলিফিল তা ওভাররাইট না করে। Google Analytics এবং অন্যান্য পরিষেবা বিশ্লেষণের জন্য API সমর্থন ডেটা সংগ্রহ করে।

কখন পলিফিল আবির্ভূত হয়েছিল

প্রথম পলিফিলগুলি Internet Explorer 6–8 যুগে (2005–2009) আবির্ভূত হয়েছিল, যখন ডেভেলপাররা W3C মান এবং ব্রাউজার বাস্তবায়নের মধ্যে ফাঁক আবিষ্কার করেছিলেন। শব্দটি রেমি শার্প 2009 সালে BarCamp London-এ প্রবর্তন করেছিলেন। প্রথম ব্যাপক পলিফিল ছিল html5shiv (2009) — একটি লাইব্রেরি যা Internet Explorer-এ HTML5 ট্যাগ (<section>, <article>, <nav>) এর জন্য সমর্থন যোগ করে।

ES6 (2015) এবং বার্ষিক ECMAScript আপডেট চক্রের আগমনের সাথে, প্রয়োজনীয় পলিফিলের সংখ্যা বেড়ে গিয়েছিল। প্রতি বছর মান নতুন পদ্ধতি যোগ করে (Array.includes, String.padStart, Object.fromEntries, Promise.allSettled) যা পুরোনো ব্রাউজারগুলি সমর্থন করে না। core-js, যা 2014 সালে es6-shim হিসাবে শুরু হয়েছিল, একটি সার্বজনীন সমাধান হয়ে ওঠে। 2026 সাল নাগাদ, core-js-এ ES5–ES2025-এর জন্য 5000-এর বেশি পলিফিল মডিউল রয়েছে।

কী পলিফিল করা যায় এবং কী যায় না

Polyfill বনাম ট্রান্সপাইলেশন: পার্থক্য এবং মিথস্ক্রিয়া

ট্রান্সপাইলেশন নতুন সিনট্যাক্সকে পুরোনো সিনট্যাক্সে রূপান্তর করে (const → var, () => {} → function() {})। Polyfill অনুপস্থিত পদ্ধতি এবং অবজেক্ট যোগ করে (Promise, Array.includes)। এই দুটি প্রক্রিয়া একে অপরের পরিপূরক: ট্রান্সপাইলেশন কোডকে সিনট্যাক্টিকভাবে সামঞ্জস্যপূর্ণ করে, পলিফিলগুলি API সম্পূর্ণতা নিশ্চিত করে। Babel + core-js সম্পূর্ণ সমর্থনের জন্য মানক সংমিশ্রণ।

Babel @babel/preset-env অপশন useBuiltIns সহ লক্ষ্য ব্রাউজারের ভিত্তিতে কোন পলিফিল প্রয়োজন তা নির্ধারণ করে। useBuiltIns: "usage" বিশ্লেষণ করে কোডে কোন API ব্যবহার করা হয়েছে এবং core-js থেকে শুধুমাত্র প্রয়োজনীয় পলিফিল আমদানি করে। useBuiltIns: "entry" একটি একক core-js/stable আমদানির মাধ্যমে লক্ষ্য ব্রাউজারের জন্য সমস্ত পলিফিল আমদানি করে।

উদাহরণ: Array.prototype.includes-এর জন্য পলিফিল

// অস্তিত্ব পরীক্ষা এবং পলিফিল যোগ করা
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

Polyfill Array.prototype.includes-এর জন্য পরীক্ষা করে যে পদ্ধতিটি Array প্রোটোটাইপে সংজ্ঞায়িত কিনা। যদি না হয়, তাহলে এটি writable: true, configurable: true ফ্ল্যাগ সহ Object.defineProperty-এর মাধ্যমে বৈশিষ্ট্য তৈরি করে। বাস্তবায়ন ES2016 স্পেসিফিকেশন অনুসরণ করে: null/undefined পরীক্ষা, অবজেক্টে রূপান্তর, নেতিবাচক fromIndex হ্যান্ডলিং। পলিফিল যোগ করার পরে, arr.includes(3) কল Internet Explorer 11 সহ সমস্ত ব্রাউজারে কাজ করে।

core-js: স্ট্যান্ডার্ড পলিফিল লাইব্রেরি

core-js হল সবচেয়ে ব্যাপক JavaScript পলিফিল লাইব্রেরি, যা TC39-এর সমস্ত stage-4 প্রস্তাবনা (ECMAScript মান) সমর্থন করে। core-js-এ Promise, Symbol, Map, Set, WeakMap, WeakSet, Array পদ্ধতি, String পদ্ধতি, Object পদ্ধতি, Number পদ্ধতি, Math পদ্ধতি, Reflect, globalThis এবং সমস্ত stage-4 প্রস্তাবনার জন্য পলিফিল অন্তর্ভুক্ত রয়েছে। বর্তমান সংস্করণ core-js 3.38+ ES5–ES2025 কভার করে।

core-js @babel/preset-env এবং useBuiltIns অপশনের মাধ্যমে Babel-এর সাথে একীভূত হয়। এই একীকরণ ছাড়া, ডেভেলপারদের ম্যানুয়ালি প্রতিটি পলিফিল আমদানি করতে হত: import "core-js/stable/array/includes"। @babel/preset-env .browserslistrc থেকে লক্ষ্য ব্রাউজারের ভিত্তিতে স্বয়ংক্রিয়ভাবে প্রয়োজনীয় আমদানি যোগ করে। এটি বান্ডেল আকার হ্রাস করে — শুধুমাত্র প্রয়োজনীয় পলিফিল অন্তর্ভুক্ত করা হয়।

উদাহরণ: fetch-এর জন্য পলিফিল

Fetch API হল সবচেয়ে বেশি পলিফিল করা Web APIগুলির মধ্যে একটি। fetch-এর নেটিভ বাস্তবায়ন Chrome 42+ (2015), Safari 10.1+ (2017), Firefox 39+ (2015)-এ উপলব্ধ, কিন্তু Internet Explorer এবং পুরোনো WebViews-এ অনুপস্থিত। whatwg-fetch পলিফিল XMLHttpRequest-এর মাধ্যমে fetch অনুকরণ করে। বিকল্প — isomorphic-fetch (Node.js এবং ব্রাউজারের জন্য পলিফিল) বা সার্বজনীন axios লাইব্রেরি ব্যবহার করা, যার পলিফিল প্রয়োজন হয় না।

// শুধুমাত্র পুরোনো ব্রাউজারের জন্য fetch পলিফিল লোড করা
if (typeof self.fetch !== "function") {
  import("whatwg-fetch").then(module => {
    self.fetch = module.fetch;
    console.log("fetch polyfill loaded");
  });
}

// fetch ব্যবহার (পলিফিল এবং নেটিভ 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 import()-এর মাধ্যমে fetch পলিফিল নিশ্চিত করে যে আধুনিক ব্রাউজারগুলি অপ্রয়োজনীয় কোড লোড না করে। পলিফিল অ্যাসিঙ্ক্রোনাসভাবে লোড হয় এবং মূল থ্রেড ব্লক করে না। লোড করার পরে, self.fetch নেটিভ বাস্তবায়ন প্রতিস্থাপন করে বা অনুপস্থিত বাস্তবায়ন যোগ করে। এটি প্রগতিশীল বর্ধনের কৌশল: আধুনিক ব্রাউজারগুলি শুধুমাত্র নেটিভ কোড পায়, পুরোনো ব্রাউজারগুলি অতিরিক্ত পলিফিল পায়।

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" কোড বিশ্লেষণ করে এবং শুধুমাত্র প্রকৃতপক্ষে ব্যবহৃত পলিফিল যোগ করে। corejs.version প্রকল্পে core-js সংস্করণ নির্দিষ্ট করে। targets.browsers ন্যূনতম ব্রাউজার স্তর নির্ধারণ করে — লক্ষ্য ব্রাউজার যত পুরোনো, তত বেশি পলিফিল অন্তর্ভুক্ত হবে। .browserslistrc শুধুমাত্র Babel নয়, Autoprefixer, PostCSS এবং Stylelint দ্বারাও সামঞ্জস্যপূর্ণ লক্ষ্য নির্ধারণের জন্য ব্যবহৃত হয়।

Polyfill.io এবং গতিশীল পলিফিল লোডিং

Polyfill.io হল একটি পরিষেবা (এবং একই নামের একটি লাইব্রেরি) যা গতিশীলভাবে নির্ধারণ করে যে ব্যবহারকারীর ব্রাউজারের কোন পলিফিল প্রয়োজন এবং শুধুমাত্র সেগুলি ফেরত দেয়। Polyfill.io, User-Agent হেডার ব্যবহার করে ব্রাউজার সংস্করণ নির্ধারণ করে এবং পলিফিলের ন্যূনতম সেট সরবরাহ করে। এটি সার্বজনীন পলিফিল বান্ডেলের তুলনায় স্থানান্তরিত ডেটার পরিমাণ হ্রাস করে।

Polyfill.io সংযোগ প্রধান অ্যাপ্লিকেশন কোডের আগে <script> ট্যাগের মাধ্যমে করা হয়। পরিষেবাটি User-Agent বিশ্লেষণ করে এবং শুধুমাত্র সেই ব্রাউজারের জন্য পলিফিল সহ একটি JavaScript ফাইল ফেরত দেয়। Chrome কোনো পলিফিল পাবে না, 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-তে নির্দিষ্ট করে কোন পলিফিল লোড করতে হবে। সম্ভাব্য মান: পদ্ধতির নাম (Array.prototype.includes), গ্লোবাল অবজেক্ট (Promise), বা ফ্ল্যাগ (es6, es2016)। "default" ফ্ল্যাগ আধুনিক JavaScript-এর জন্য একটি মৌলিক সেট লোড করে। উত্পাদন প্রকল্পের জন্য, নিজস্ব CDN-এ Polyfill.io হোস্ট করার বা প্রাপ্যতা নিয়ন্ত্রণের জন্য লাইব্রেরির স্থানীয় সংস্করণ ব্যবহার করার পরামর্শ দেওয়া হয়।

মোবাইল অ্যাপ্লিকেশন এবং WebView-এ পলিফিল

WebView মোবাইল অ্যাপ্লিকেশনে (Android WebView, iOS-এ WKWebView) পলিফিলের জন্য একটি বিশেষ পরিবেশ। 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 মানের একটি সীমিত সেট সমর্থন করে — এর জন্য পলিফিল বাধ্যতামূলক।

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");
}

// গতিশীল পলিফিল লোডিং
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-এর জন্য গুরুত্বপূর্ণ API (Promise, fetch, IntersectionObserver) এর উপস্থিতি পরীক্ষা করে এবং শুধুমাত্র অনুপস্থিতগুলির জন্য গতিশীলভাবে পলিফিল লোড করে। এটি নিশ্চিত করে যে আধুনিক WebViews (Android 12-এ Chrome 100+) অপ্রয়োজনীয় কোড লোড না করে, যখন পুরোনো WebViews (Android 5.0) প্রয়োজনীয় সমর্থন পায়।