Web API — clipboard, geolocation, notification আর observer

১ · DOM-এর বাইরে — ব্রাউজার আসলে একটি পুরো প্ল্যাটফর্ম

পর্ব ৩৭ থেকে ৪০-এ আপনি DOM, event, form আর storage দেখেছেন — সবই পাতার ভেতরের জিনিস। কিন্তু আজকের একটি ই-কমার্স অ্যাপ আরও অনেক কিছু করে: “লিংক কপি করুন” চাপলে লিংক clipboard-এ যায়; “কাছের পিকআপ পয়েন্ট” চাপলে ফোনের অবস্থান থেকে দূরত্ব হিসাব হয়; অর্ডার রওনা হলে notification আসে; মোবাইলে “শেয়ার” চাপলে WhatsApp বা Messenger-এর তালিকা খোলে। এগুলোর কোনোটিই JavaScript ভাষার অংশ নয় — সবই ব্রাউজারের দেওয়া Web API.

সব API মুখস্থ করা সম্ভব নয়, দরকারও নেই। এই পর্বের লক্ষ্য একটি মানসিক কাঠামো: যেকোনো নতুন API হাতে পেলে চারটি প্রশ্ন — সব ব্রাউজারে আছে? https লাগে? ক্লিক লাগে? অনুমতি লাগে, আর না দিলে কী হবে?

কেন এত সাবধানতা? একটি লিংকে ক্লিক করলেই অচেনা একজনের লেখা কোড আপনার যন্ত্রে চলতে শুরু করে — কোনো install নেই, কোনো যাচাই নেই। তাই ব্রাউজার প্রতিটি পাতাকে একটি sandbox-এ রাখে, আর ক্ষমতা দেয় ধাপে ধাপে, ব্যবহারকারীর হাতে নিয়ন্ত্রণ রেখে।

২ · তিনটি দরজা — secure context, user activation আর permission

প্রথম দরজা: secure context

যে পাতা https দিয়ে এসেছে, তাকে ব্রাউজার বলে secure context. যুক্তি সহজ: http পাতার কোড পথে যে কেউ বদলে দিতে পারে — একটি পাবলিক Wi-Fi-র রাউটারও। এমন পাতাকে অবস্থান দেওয়া মানে অচেনা মধ্যস্থতাকারীকে দেওয়া। তাই Geolocation, Clipboard-এর async API, Notification, Service Worker, Web Share, Screen Wake Lock — শুধু secure context-এ। Chrome ২০১৬ সালে (Chrome 50) http পাতা থেকে geolocation সরিয়ে দেয়।

যাচাই করতে window.isSecureContext দেখুন। ব্যতিক্রম: http://localhost আর http://127.0.0.1-কেও ব্রাউজার secure ধরে, যাতে ডেভেলপাররা certificate ছাড়াই কাজ করতে পারেন। কিন্তু একই অ্যাপ ফোনে http://192.168.0.5:5173 দিয়ে খুললে সেটি secure নয় — তখন clipboard বা geolocation হঠাৎ ব্যর্থ হয়, আর নতুনরা ভাবেন কোড ভাঙা। কারণটি কোড নয়, ঠিকানা।

দ্বিতীয় দরজা: user activation

কিছু কাজ শুধু তখনই করা যায়, যখন ব্যবহারকারী এইমাত্র পাতায় কিছু করেছেন — ক্লিক, ট্যাপ বা কী-প্রেস। একে বলে transient user activation (ক্ষণস্থায়ী সক্রিয়তা): ক্লিকের পরে অল্প কিছুক্ষণ (Chrome-এ প্রায় ৫ সেকেন্ড) পাতাটি “সক্রিয়” থাকে। Popup, fullscreen, অনেক ব্রাউজারে clipboard-এ লেখা, Web Share, vibration আর notification-এর অনুমতি চাওয়া — সবই এই নিয়মের অধীনে। নিয়মটি না থাকলে যেকোনো পাতা খোলামাত্র দশটি popup খুলত — ২০০০-এর দশকের ওয়েব ঠিক এমনই ছিল।

ব্যবহারিক ফল: এমন API click handler-এর ভেতর থেকে ডাকুন, আর তার আগে লম্বা await রাখবেন না। আগে কয়েক সেকেন্ডের একটি fetch থাকলে activation ফুরিয়ে যেতে পারে, আর navigator.share ব্যর্থ হবে NotAllowedError দিয়ে। ডেটা আগেই তৈরি রাখুন।

তৃতীয় দরজা: permission, আর Permissions API

সবচেয়ে সংবেদনশীল API — অবস্থান, notification, ক্যামেরা, মাইক্রোফোন, clipboard থেকে পড়া — ব্যবহারকারীর স্পষ্ট অনুমতি চায়। প্রথমবার ডাকলে ব্রাউজার নিজে একটি permission prompt দেখায়: “abcltech.com আপনার অবস্থান জানতে চায় — Allow / Block”. এই বাক্সের লেখা বা নকশা আপনি বদলাতে পারবেন না — ইচ্ছাকৃতভাবেই। ব্যবহারকারী Block করলে সিদ্ধান্তটি সাধারণত মনে রাখা হয়; ব্যবহারকারী নিজে সেটিংসে না বদলালে আপনার কোড আর prompt দেখাতে পারবে না।

তাই prompt দেখানোর আগেই জানা দরকার অবস্থা কী। navigator.permissions.query() তিনটি অবস্থার একটি জানায়: "granted" (আগেই অনুমতি আছে), "denied" (ব্লক করা), "prompt" (এখনো জিজ্ঞেস করা হয়নি — ডাকলে prompt আসবে)।

async function locationButtonLabel() {
  if (!navigator.permissions) return "কাছের পিকআপ খুঁজুন";        // পুরোনো ব্রাউজার
  const status = await navigator.permissions.query({ name: "geolocation" });
  status.onchange = () => updateButton(status.state);           // সেটিংসে বদলালেও জানব
  if (status.state === "granted") return "📍 কাছের পিকআপ (অবস্থান চালু)";
  if (status.state === "denied")  return "এলাকা বেছে নিন";       // আর জিজ্ঞেস নয়
  return "📍 অবস্থান দিয়ে কাছের পিকআপ খুঁজুন";                  // "prompt"
}
// প্রত্যাশিত: প্রথমবার "prompt" → তৃতীয় লেখা; Allow করার পরে "granted"

এবার পুরো প্রবাহটি একসাথে দেখুন — একটি “কাছের পিকআপ পয়েন্ট খুঁজুন” বোতাম চাপা থেকে ফল পর্যন্ত:

if (!('geolocation' in navigator)) {
  showAreaPicker();   // সরাসরি বিকল্পে
  return;
}

isSecureContext   // https://shop.example.com → true
                  // http://localhost         → true
                  // http://192.168.0.5       → false

findBtn.addEventListener('click', () => {
  navigator.geolocation.getCurrentPosition(ok, fail);
});   // পাতা খোলামাত্র নয়!

┌───────────────────────────────────────┐
  shop.example.com আপনার অবস্থান জানতে চায়
       [ Block ]        [ Allow ]
└───────────────────────────────────────┘

ok(pos)   → pos.coords.latitude, longitude, accuracy
fail(err) → err.code === 1 (PERMISSION_DENIED)
            2 = POSITION_UNAVAILABLE, 3 = TIMEOUT

fail = (err) => {
  showAreaPicker();   // মিরপুর, ধানমন্ডি, উত্তরা…
  note('অবস্থান ছাড়াও এলাকা বেছে খুঁজতে পারেন');
};

৩ · Clipboard API — একটি নির্ভরযোগ্য “লিংক কপি করুন” বোতাম

পণ্যের পাতায় “লিংক কপি করুন” বোতাম খুব সাধারণ। আধুনিক Clipboard API দুটি সহজ method দেয়: navigator.clipboard.writeText(text) আর navigator.clipboard.readText(). দুটোই async — একটি Promise ফেরত দেয়, কারণ ব্রাউজারকে অনুমতি যাচাই করতে হতে পারে।

লেখা আর পড়ার নিরাপত্তা-নিয়ম আলাদা, আর পার্থক্যটি যুক্তিসংগত। লেখা তুলনামূলক নিরীহ — বড়জোর ব্যবহারকারীর আগের কপি করা জিনিস মুছে যায়; তাই সাধারণত একটি ক্লিকই যথেষ্ট (Chrome-এ পাতা focus-এ থাকলেই চলে, Firefox আর Safari-তে user activation লাগে)। পড়া বিপজ্জনক — clipboard-এ হয়তো এইমাত্র কপি করা পাসওয়ার্ড, OTP বা bKash নম্বর আছে। তাই readText()-এ Chrome অনুমতি চায়, আর Safari ও Firefox একটি ছোট “Paste” বোতাম দেখায়, যা ব্যবহারকারীকে নিজে চাপতে হয়।

copyBtn.addEventListener("click", async () => {
  const url = location.href;
  try {
    if (!navigator.clipboard?.writeText) throw new Error("no-clipboard-api");
    await navigator.clipboard.writeText(url);      // ক্লিকের ভেতরেই, আগে কোনো লম্বা await নেই
    showToast("✅ লিংক কপি হয়েছে");
  } catch (err) {
    // http পাতা, পুরোনো ব্রাউজার, iframe-এর নিষেধ বা ব্যবহারকারীর নিষেধ — সব এখানে
    linkInput.value = url;
    linkInput.hidden = false;
    linkInput.select();                            // অন্তত সিলেক্ট করে দিই
    showToast("কপি করা গেল না — লিংকটি সিলেক্ট করা আছে, Ctrl+C চাপুন");
  }
});
// প্রত্যাশিত: https-এ "✅ লিংক কপি হয়েছে"; ব্যর্থ হলে সিলেক্ট-করা লিংক আর নির্দেশনা

পুরোনো পথ: document.execCommand('copy')

Clipboard API আসার আগে (Chrome-এ ২০১৮ সালে) উপায় ছিল একটি লুকানো <textarea>-এ লেখা সিলেক্ট করে document.execCommand('copy'). এটি synchronous, ফলাফল শুধু true/false, আর MDN একে deprecated বলে। কিছু লাইব্রেরি এটিকে fallback হিসেবে রাখে, কিন্তু নতুন কোডের প্রধান পথ নয়। এই কোর্সের কোড-বক্সের “কপি” বোতামও আগে navigator.clipboard চেষ্টা করে, না পেলে তবেই execCommand.

৪ · Geolocation — অবস্থান থেকে নিকটতম পিকআপ পয়েন্ট

Geolocation API যন্ত্রের অবস্থান দেয় — অক্ষাংশ (latitude), দ্রাঘিমাংশ (longitude) আর নির্ভুলতা (accuracy, মিটারে)। অবস্থান কোথা থেকে আসছে, তা ব্রাউজার আপনাকে বলে না: ফোনে GPS হতে পারে (কয়েক মিটার নির্ভুল), ল্যাপটপে আশেপাশের Wi-Fi নেটওয়ার্ক বা IP ঠিকানা থেকে অনুমান (কয়েকশো মিটার থেকে কয়েক কিলোমিটার ভুল)। তাই accuracy সবসময় দেখুন।

তিনটি option: enableHighAccuracy: true (GPS চালু করে — বেশি নির্ভুল, কিন্তু ধীর আর ব্যাটারি বেশি খায়), timeout (কত ms-এর মধ্যে উত্তর না এলে code 3), maximumAge (কত পুরোনো cache-করা অবস্থা চলবে)। আর error-এর তিনটি code: 1 PERMISSION_DENIED, 2 POSITION_UNAVAILABLE (যন্ত্র অবস্থান বের করতে পারেনি — ঘরের ভেতরে, বা লোকেশন সার্ভিস বন্ধ), 3 TIMEOUT.

দূরত্ব হিসাব — haversine সূত্র

অবস্থান পেলে পরের কাজ গণিত: চারটি পিকআপ পয়েন্টের কোনটি সবচেয়ে কাছে? অক্ষাংশ-দ্রাঘিমাংশ সমতলের x-y নয়, গোলকের ওপরের বিন্দু — তাই সাধারণ পিথাগোরাস কাজ করে না (দ্রাঘিমাংশের এক ডিগ্রি বিষুবরেখায় প্রায় ১১১ km, কিন্তু মেরুর কাছে প্রায় শূন্য)। গোলকের ওপর দুটি বিন্দুর সবচেয়ে ছোট দূরত্ব (great-circle distance) বের করার প্রচলিত উপায় haversine সূত্র। পৃথিবী নিখুঁত গোলক নয়, তাই সামান্য (প্রায় ০.৫%-এর মধ্যে) ভুল থাকে — দোকান খোঁজার জন্য যথেষ্ট। আর এটি সোজা দূরত্ব, রাস্তার নয়।

নিচের কোড এই পর্বের মূল শিক্ষা একসাথে দেখায়: feature detection, অনুমতি-নির্ভর API চেষ্টা, ব্যর্থ হলে বিকল্প, আর বিশুদ্ধ গণিত। কোডটি চলে একটি sandbox-করা iframe-এ, যার অনুমতি দেওয়ার ক্ষমতা নেই — তাই এখানে clipboard আর geolocation ইচ্ছাকৃতভাবে ব্যর্থ হবে, আর আপনি দেখবেন কোড সেটি কীভাবে সামলায়। স্থানাঙ্কগুলো আনুমানিক।

const rad = (deg) => (deg * Math.PI) / 180;
function km(a, b) {                                   // haversine: গোলকের ওপর সোজা দূরত্ব
  const h = Math.sin(rad(b.lat - a.lat) / 2) ** 2 +
    Math.cos(rad(a.lat)) * Math.cos(rad(b.lat)) * Math.sin(rad(b.lon - a.lon) / 2) ** 2;
  return 2 * 6371 * Math.asin(Math.sqrt(h));          // 6371 km = পৃথিবীর গড় ব্যাসার্ধ
}
const POINTS = [{ name: 'ধানমন্ডি ২৭', lat: 23.7561, lon: 90.3742 }, { name: 'আগারগাঁও', lat: 23.7783, lon: 90.3797 },
  { name: 'উত্তরা ৭', lat: 23.8719, lon: 90.3984 }, { name: 'মতিঝিল', lat: 23.7330, lon: 90.4172 }];
const nearest = (me) => POINTS.map((p) => ({ name: p.name, km: +km(me, p).toFixed(1) })).toSorted((x, y) => x.km - y.km);
const getPosition = () => new Promise((ok, fail) =>
  navigator.geolocation.getCurrentPosition(ok, fail, { timeout: 5000 }));
(async () => {
  console.log('secure context:', isSecureContext, '| geolocation আছে:', 'geolocation' in navigator,
    '| Notification:', window.Notification?.permission ?? 'নেই');
  try { await navigator.clipboard.writeText('https://shop.example.com/p/42'); console.log('লিংক কপি হয়েছে'); }
  catch (e) { console.log('কপি হলো না:', e.name, '→ লিংকটি সিলেক্ট করে দেখান'); }
  let me = { lat: 23.8069, lon: 90.3687 };            // বিকল্প: তালিকা থেকে বাছা "মিরপুর ১০"
  try { const { coords } = await getPosition(); me = { lat: coords.latitude, lon: coords.longitude }; }
  catch (e) { console.log('অবস্থান মিলল না: code', e.code ?? 'API নেই', '→ হাতে বাছা এলাকা ব্যবহার'); }
  console.log(nearest(me).slice(0, 2));
})();

৫ · Notification, Web Share আর যন্ত্রের অন্যান্য ক্ষমতা

Notification বনাম push notification

Notifications API অপারেটিং সিস্টেমের notification দেখায় — ফোনের ওপরের বার বা Windows-এর কোণের বাক্স। দুই ধাপ: অনুমতি চাওয়া (Notification.requestPermission(), ফল "granted", "denied" বা "default"), তারপর new Notification(title, { body, icon }). মনে রাখবেন, এখানে অবস্থার নাম "default" — Permissions API-র "prompt"-এর সমান।

notifyBtn.addEventListener("click", async () => {           // ক্লিকের উত্তরে চাওয়া
  if (!("Notification" in window)) return showInPageBanner();
  const result = await Notification.requestPermission();      // "granted" | "denied" | "default"
  if (result !== "granted") return showInPageBanner();        // পাতার ভেতরেই জানাব
  new Notification("অর্ডার #4521 রওনা হয়েছে", { body: "রাইডার ৩০ মিনিটে পৌঁছাবেন", tag: "order-4521" });
});
// প্রত্যাশিত: Allow করলে সিস্টেম notification; Block করলে পাতার ভেতরের ব্যানার

Web Share — মোবাইলের নিজস্ব শেয়ার তালিকা

মোবাইলে Web Share API অপারেটিং সিস্টেমের শেয়ার শিট খোলে — ফোনে থাকা WhatsApp, Messenger, Gmail, যেকোনো অ্যাপ; প্রতিটির জন্য আলাদা বোতাম বা তৃতীয় পক্ষের script লাগে না। ডেস্কটপে সব ব্রাউজারে নেই — তাই feature detection, আর না থাকলে “লিংক কপি” বোতাম।

const data = { title: "জামদানি শাড়ি — ৳৮,৫০০", text: "এটা দেখো!", url: productUrl };
shareBtn.addEventListener("click", async () => {
  if (!navigator.canShare?.(data)) return copyLink(productUrl);   // ডেস্কটপ: কপি-বোতামে ফিরি
  try { await navigator.share(data); }                           // ক্লিকের ভেতরে, আগে await নেই
  catch (err) { if (err.name !== "AbortError") copyLink(productUrl); }  // বাতিল করা ভুল নয়
});
// প্রত্যাশিত: মোবাইলে শেয়ার শিট খোলে; ব্যবহারকারী বন্ধ করলে AbortError — চুপচাপ উপেক্ষা

আরও চারটি ছোট কিন্তু কাজের API

৬ · Page Visibility — কেউ না দেখলে কাজ থামান

একটি শেয়ারবাজারের দামের পাতা ভাবুন, যা প্রতি ৫ সেকেন্ডে দাম আনে। ব্যবহারকারী অন্য ট্যাবে গিয়ে ভুলে গেলেন — পাতাটি সারা রাত request পাঠাচ্ছে, কেউ দেখছে না: মোবাইল ডেটা, ব্যাটারি আর সার্ভারের অপচয়। ব্রাউজার নিজেও পেছনের ট্যাবের timer ধীর করে (Chrome-এ সাধারণত সেকেন্ডে বড়জোর একবার), কিন্তু সেটির ওপর ভরসা না করে নিজেই থামানো ভালো।

document.visibilityState হয় "visible", নয়তো "hidden"; বদলালে visibilitychange event আসে। ট্যাব বদল, ব্রাউজার minimize, ফোনের পর্দা লক — সবই "hidden".

let timer = null;
function startPolling() {
  refreshPrice();                                   // ফিরে এসেই তাজা দাম
  timer = setInterval(refreshPrice, 5000);
}
function stopPolling() { clearInterval(timer); timer = null; }

document.addEventListener("visibilitychange", () => {
  if (document.hidden) stopPolling();               // কেউ দেখছে না — থামো
  else startPolling();                              // আবার দেখা যাচ্ছে — চালু
});
if (!document.hidden) startPolling();
// প্রত্যাশিত: অন্য ট্যাবে গেলে request বন্ধ; ফিরলে সাথে সাথে একবার, তারপর প্রতি ৫ সেকেন্ডে

৭ · IntersectionObserver — কোনো element কখন দেখা দিল

একটি পণ্যের তালিকায় ২০০টি ছবি। সব ছবি একসাথে নামালে প্রথম পর্দা দেখাতেই অনেক দেরি, আর ব্যবহারকারী যেগুলো পর্যন্ত কখনো স্ক্রল করবেন না, সেগুলোর জন্যও ডেটা খরচ। সমাধান lazy loading: ছবি পর্দার কাছে এলে তবেই নামানো। প্রশ্ন হলো, “পর্দার কাছে এলো” কীভাবে জানবেন?

পুরোনো উপায় ছিল scroll event-এ প্রতিটি ছবির getBoundingClientRect() দেখা। scroll event সেকেন্ডে কয়েক ডজন বার আসে, প্রতিবার অবস্থান মাপতে ব্রাউজারকে layout হিসাব করতে হয়, আর সব চলে main thread-এ — ঠিক যখন ব্যবহারকারী মসৃণ স্ক্রল চাইছেন। পর্ব ৩৬-এর throttle কিছুটা সাহায্য করে, কিন্তু আপনি তবু বারবার জিজ্ঞেস করছেন, “এখন দেখা যাচ্ছে? এখন?”

IntersectionObserver প্রশ্নটি উল্টে দেয়: আপনি বলেন “এই element দেখা দিলে জানিও”, আর ব্রাউজার — যে প্রতিটি frame আঁকার সময় এমনিতেই সব element-এর অবস্থান জানে — শুধু সীমা পার হওয়ার মুহূর্তে callback ডাকে। Scroll চলাকালীন আপনার কোড একবারও চলে না।

const io = new IntersectionObserver((entries, observer) => {
  for (const entry of entries) {
    if (!entry.isIntersecting) continue;
    const img = entry.target;
    img.src = img.dataset.src;                      // এবার আসল ছবি নামাও
    observer.unobserve(img);                        // কাজ শেষ — আর নজর নয়
  }
}, { rootMargin: "200px 0px", threshold: 0 });      // পর্দার ২০০px আগেই শুরু

document.querySelectorAll("img[data-src]").forEach((img) => io.observe(img));

একটি ছবি নিচ থেকে পর্দার দিকে উঠে আসার সময় ভেতরে কী ঘটে, ধাপে ধাপে দেখুন (viewport-এর উচ্চতা ৮০০px, rootMargin: "200px", তাই আসল সীমা ১০০০px):

1io.observe(img);2// … ব্যবহারকারী স্ক্রল করছেন …3(entries) => {4  if (!entry.isIntersecting) continue;5  img.src = img.dataset.src;6  observer.unobserve(img);7}

loading="lazy" — অনেক সময় JavaScript-ই লাগে না

শুধু ছবি বা iframe দেরিতে নামাতে এখন HTML-ই যথেষ্ট: <img src="saree.webp" loading="lazy" width="300" height="400" alt="…">. সব আধুনিক ব্রাউজার এটি বোঝে, আর দূরত্বের সীমা নিজেই ঠিক করে। দুটি সতর্কতা: প্রথম পর্দার ছবিতে loading="lazy" দেবেন না — Core Web Vitals-এর LCP খারাপ হয়; আর width/height দিন, নইলে লেখা লাফিয়ে সরে যায়। IntersectionObserver লাগে যখন “দেখা দিল” মুহূর্তে আরও কিছু করতে হয়: infinite scroll, অ্যানিমেশন, ভিডিও চালানো-থামানো, বা “seen” analytics — একটি পণ্যের কার্ড সত্যিই চোখে পড়েছে কি না।

৮ · ResizeObserver আর MutationObserver — আকার আর DOM-এর পরিবর্তন

ResizeObserver — element-এর নিজের আকার

window-এর resize event শুধু পুরো জানালার কথা জানায়। কিন্তু একটি পণ্যের কার্ডের আকার জানালা না বদলেও বদলাতে পারে: ফিল্টার-প্যানেল খুললে, বা একই কার্ড সরু sidebar-এ বসালে। ResizeObserver প্রতিটি element-এর নিজের আকার দেখে, আর বদলালে callback-এ contentRect দেয় — কার্ডটি নিজের জায়গা বুঝে layout বদলাতে পারে।

শুধু style বদলানোর কাজ হলে আজ CSS container queries (@container (width < 400px) { … }) আরও ভালো, যা ২০২৩ সাল থেকে সব প্রধান ব্রাউজারে চলে। ResizeObserver লাগে যখন আকার অনুযায়ী JavaScript-এর কিছু করতে হয় — chart নতুন করে আঁকা, canvas-এর resolution ঠিক করা, বা কতগুলো ট্যাব “আরও” মেনুতে যাবে তা হিসাব।

MutationObserver — DOM কখন বদলাল

কখনো এমন DOM-এ নজর রাখতে হয়, যা আপনার কোড বদলায় না: একটি তৃতীয় পক্ষের chat widget বা পেমেন্ট গেটওয়ের embed নিজের মতো element যোগ করে। MutationObserver child যোগ-বিয়োগ (childList), attribute বদল (attributes) বা লেখা বদল (characterData) হলে জানায় — subtree: true দিলে পুরো উপ-গাছে। আগের প্রজন্ম “Mutation Events” (DOMNodeInserted ইত্যাদি) প্রতিটি পরিবর্তনে synchronous-ভাবে চলত আর DOM-কে ভীষণ ধীর করত; Chrome ২০২৪ সালে সেগুলো সরিয়ে দেয়। MutationObserver-এর মূল কৌশল batching: পরিবর্তন জমিয়ে একটি microtask-এ একবারে জানানো।

1mo.observe(cart, { childList: true, attributes: true, subtree: true });2cart.append(li1);          // বদল ১3cart.append(li2);          // বদল ২4li1.dataset.qty = "2";     // বদল ৩5console.log("তিনটি বদল শেষ");6// → mo-এর callback(records)

এবার তিনটি observer নিজে চালিয়ে দেখুন। ওপরে একটি ছোট পাতা দেখা যাবে: খালি কার্ট-তালিকা, একটি পণ্যের কার্ড আর একটি scroll-বাক্স, যার নিচে একটি “ছবি” লুকানো। কোড নিজেই সব বদল করে, যাতে প্রতিবার একই আউটপুট আসে।

const $ = (sel) => document.querySelector(sel);
const wait = (ms) => new Promise((r) => setTimeout(r, ms));
const mo = new MutationObserver((recs) =>                  // ১) MutationObserver
  console.log(`Mutation: ${recs.length}টি record —`, recs.map((r) => r.type).join(', ')));
mo.observe($('#cart'), { childList: true, attributes: true, subtree: true });
$('#cart').insertAdjacentHTML('beforeend', '<li>চাল</li>');     // বদল ১
$('#cart').insertAdjacentHTML('beforeend', '<li>ডাল</li>');     // বদল ২
$('#cart li').dataset.qty = '2';                              // বদল ৩
console.log('তিনটি বদল শেষ — callback এখনো চলেনি');
new ResizeObserver(([entry]) => {                             // ২) ResizeObserver
  const w = Math.round(entry.contentRect.width);
  entry.target.className = w < 200 ? 'narrow' : 'wide';
  console.log(`Resize: ${w}px → ${entry.target.className}`);
}).observe($('#card'));
const io = new IntersectionObserver(([entry]) => {            // ৩) IntersectionObserver
  console.log('Intersect:', entry.isIntersecting ? 'দেখা যাচ্ছে — এবার লোড' : 'এখনো দেখা যায় না');
  if (entry.isIntersecting) { entry.target.textContent = 'ছবি লোড হলো'; io.unobserve(entry.target); }
}, { root: $('#feed') });
(async () => {
  await wait(150); $('#card').style.width = '150px';         // কার্ড সরু হলো
  await wait(150); io.observe($('#img'));
  await wait(150); $('#feed').scrollTop = 999;                // ব্যবহারকারী নিচে স্ক্রল করলেন
})();

আরেকটি observer-এর নাম জেনে রাখুন: PerformanceObserver. এটি পাতার পারফরম্যান্সের ঘটনা — লম্বা task, LCP, layout shift, নেটওয়ার্ক request-এর সময় — ঘটার সাথে সাথে জানায়; Core Web Vitals মাপার লাইব্রেরিগুলো এর ওপরই তৈরি। বিস্তারিত পর্ব ৫৩-এ। চারটি observer-এর নকশা একই — new XObserver(callback, options), observe(), unobserve(), disconnect() — এটি সফটওয়্যারের পুরোনো observer pattern-এর ব্রাউজার রূপ। কাজ শেষ হলে disconnect() ডাকতে ভুলবেন না, বিশেষত React-এর মতো framework-এ component সরানোর সময় — নইলে memory leak.

৯ · Feature detection, Baseline আর গোপনীয়তা — দায়িত্বশীল ব্যবহার

Feature detection বনাম browser sniffing

“এই ব্রাউজারে কি share আছে?” জানার দুটি উপায়। ভুল উপায় browser sniffing: navigator.userAgent string পড়ে ব্রাউজারের নাম আর version অনুমান করা — “Safari হলে এটা, Chrome হলে ওটা”. এটি ভঙ্গুর: প্রায় সব ব্রাউজারের string-এ আজও “Mozilla/5.0” লেখা, Edge-এর string-এ “Chrome” আছে, আর ব্রাউজারগুলো ইচ্ছা করে string-এর তথ্য কমাচ্ছে। নতুন version-এ API এলেও আপনার কোড জানবে না। ঠিক উপায় feature detection: সরাসরি দেখুন জিনিসটি আছে কি না।

// ✘ sniffing — ভঙ্গুর, ভুল ব্রাউজারকে বাদ দেয়
if (/Android|iPhone/.test(navigator.userAgent)) showShareButton();

// ✔ feature detection — ক্ষমতা দেখে সিদ্ধান্ত
if ("share" in navigator) showShareButton();
if ("IntersectionObserver" in window) lazyLoadWithObserver();
else loadAllImagesNow();                         // পুরোনো ব্রাউজার: সব ছবি এখনই — কাজ তবু চলে
if (CSS.supports("container-type: inline-size")) useContainerQueries();

Baseline — কোন API এখন নিশ্চিন্তে ব্যবহার করা যায়

২০২৩ সালে ব্রাউজার নির্মাতাদের একটি যৌথ দল (W3C-র WebDX Community Group) Baseline নামে একটি সহজ লেবেল চালু করে, যা এখন MDN আর web.dev-এ দেখা যায়। তিনটি অবস্থা: Limited availability — সব প্রধান ব্রাউজারে এখনো নেই; Newly available — Chrome, Edge, Firefox আর Safari-র (ডেস্কটপ ও মোবাইল) সর্বশেষ version-এ এসেছে; Widely available — তার প্রায় ৩০ মাস পরে। তিনটি observer অনেক আগেই widely available; Web Share বা Vibration এখনো সব ব্রাউজারে নেই। তবে Baseline একটি সংক্ষেপ, নিখুঁত সত্য নয় — বাংলাদেশে অনেকে পুরোনো Android ফোনে আপডেট-না-করা ব্রাউজার চালান। তাই feature detection কখনো বাদ দেবেন না।

গোপনীয়তা আর fingerprinting

প্রতিটি API একটি প্রশ্নের উত্তর দেয়: পর্দার আকার, ভাষা, font, CPU core, ব্যাটারি… আলাদাভাবে নিরীহ, কিন্তু একসাথে জুড়লে প্রায়ই একজন ব্যবহারকারীকে অনন্যভাবে চিনিয়ে দেয় — cookie ছাড়াই, আর cookie মুছলেও যা মোছে না। একে বলে browser fingerprinting. বিখ্যাত উদাহরণ Battery Status API: ২০১৫ সালের একটি গবেষণা দেখায়, ব্যাটারির সংখ্যাগুলো দিয়ে অল্প সময়ের জন্য ব্যবহারকারী শনাক্ত করা যায়; পরে Firefox API-টি সরিয়ে দেয়।

প্রতিরক্ষামূলক নিয়ম সহজ: শুধু সত্যিই দরকারি API ব্যবহার করুন; পাওয়া তথ্য যতটা সম্ভব ব্রাউজারেই রাখুন; আর মনে রাখুন, তৃতীয় পক্ষের script (বিজ্ঞাপন, analytics) আপনার পাতার সব অনুমতি পায়। Permissions Policy header দিয়ে অপ্রয়োজনীয় API বন্ধ রাখা যায় — পর্ব ৪৩-এর নিরাপত্তা-স্তরের অংশ।

১০ · AI-এর যুগে — AI-এর লেখা Web API কোড যাচাই করা

“একটি copy button বানিয়ে দাও” বললে AI কয়েক সেকেন্ডে কোড দেয়, আর আপনার localhost-এ, Allow চাপা অবস্থায় সেটি নিখুঁত চলে। সমস্যা দেখা দেয় আসল ব্যবহারকারীর কাছে — যিনি Block চেপেছেন বা পুরোনো ব্রাউজার চালান। পাঁচটি ভুল বিশেষভাবে দেখুন।

AI-এর লেখা Web API কোড হাতে পেলে — যাচাইয়ের চেকলিস্ট

• প্রতিটি API ব্যবহারের আগে feature detection আছে; কোথাও navigator.userAgent দিয়ে সিদ্ধান্ত নেই
• কোনো অনুমতি পাতা খোলার সময় চাওয়া হয় না — শুধু ব্যবহারকারীর ক্লিকের উত্তরে, কারণ বুঝিয়ে
• Denied, timeout আর “API নেই” — তিনটি অবস্থারই আলাদা, সম্মানজনক বিকল্প আছে
• User activation লাগে এমন কাজের (copy, share, fullscreen) আগে কোনো লম্বা await নেই
• Scroll/resize-এর কাজ observer দিয়ে; কাজ শেষে unobserve/disconnect
• পেছনের ট্যাবে polling, ভিডিও বা অ্যানিমেশন visibilitychange-এ থামে
• অবস্থানের মতো ব্যক্তিগত তথ্য অকারণে সার্ভারে যায় না; গেলে কম নির্ভুলতায় আর ব্যবহারকারীকে জানিয়ে
• http (LAN ঠিকানা) আর https দুই জায়গায় পরীক্ষা করা হয়েছে, Allow আর Block দুই অবস্থায়