বিশ্বাস ভাল, পর্যবেক্ষণ ভাল: ইন্টারসেকশন অবজারভার v2

ছেদ পর্যবেক্ষক v2 শুধুমাত্র প্রতি ছেদগুলি পর্যবেক্ষণ করার ক্ষমতা যোগ করে না, তবে ছেদ করার সময় ছেদকারী উপাদানটি দৃশ্যমান ছিল কিনা তাও সনাক্ত করতে।

Thomas Steiner

ইন্টারসেকশন অবজারভার v1 হল সেই APIগুলির মধ্যে একটি যা সম্ভবত সর্বজনীনভাবে প্রিয়, এবং এখন সাফারি এটিকে সমর্থন করে , এটি অবশেষে সমস্ত প্রধান ব্রাউজারে সর্বজনীনভাবে ব্যবহারযোগ্য। API-এর দ্রুত রিফ্রেশারের জন্য, আমি নীচে এম্বেড করা ইন্টারসেকশন অবজারভার v1-এ সুরমার সুপারচার্জড মাইক্রোটিপ দেখার পরামর্শ দিচ্ছি। আপনি সুরমার গভীর নিবন্ধটিও পড়তে পারেন। লোকেরা ইমেজ এবং ভিডিওগুলির অলস লোডিং , উপাদানগুলি position: sticky , ফায়ারিং অ্যানালিটিক্স ইভেন্ট এবং আরও অনেক কিছু৷

সম্পূর্ণ বিশদ বিবরণের জন্য, MDN এ ইন্টারসেকশন অবজারভার ডক্স দেখুন, কিন্তু একটি সংক্ষিপ্ত অনুস্মারক হিসাবে, সবচেয়ে মৌলিক ক্ষেত্রে ইন্টারসেকশন অবজারভার v1 API এর মতো দেখায়:

const onIntersection = (entries) => {
  for (const entry of entries) {
    if (entry.isIntersecting) {
      console.log(entry);
    }
  }
};

const observer = new IntersectionObserver(onIntersection);
observer.observe(document.querySelector('#some-target'));

ইন্টারসেকশন অবজারভার v1 এর সাথে কি চ্যালেঞ্জিং?

পরিষ্কার হওয়ার জন্য, ইন্টারসেকশন অবজারভার v1 দুর্দান্ত, তবে এটি নিখুঁত নয়। কিছু কোণার কেস আছে যেখানে API কম পড়ে। এর একটি ঘনিষ্ঠ চেহারা আছে! ইন্টারসেকশন অবজারভার v1 এপিআই আপনাকে জানাতে পারে যখন একটি উপাদান উইন্ডোর ভিউপোর্টে স্ক্রোল করা হয়, তবে এটি আপনাকে বলে না যে উপাদানটি অন্য কোনো পৃষ্ঠার বিষয়বস্তু দ্বারা আচ্ছাদিত কিনা (অর্থাৎ, যখন উপাদানটি বন্ধ করা হয়) বা উপাদানটির ভিজ্যুয়াল কিনা transform , opacity , filter , ইত্যাদির মত ভিজ্যুয়াল এফেক্ট দ্বারা ডিসপ্লেকে পরিবর্তন করা হয়েছে, যা কার্যকরভাবে এটিকে অদৃশ্য করে তুলতে পারে।

শীর্ষ-স্তরের নথিতে একটি উপাদানের জন্য, এই তথ্য জাভাস্ক্রিপ্টের মাধ্যমে DOM বিশ্লেষণ করে, উদাহরণস্বরূপ DocumentOrShadowRoot.elementFromPoint() এর মাধ্যমে এবং তারপর আরও গভীরে খনন করে নির্ধারণ করা যেতে পারে। বিপরীতে, একই তথ্য পাওয়া যাবে না যদি প্রশ্নে থাকা উপাদানটি তৃতীয় পক্ষের আইফ্রেমে থাকে।

কেন প্রকৃত দৃশ্যমানতা এত বড় চুক্তি?

ইন্টারনেট, দুর্ভাগ্যবশত, এমন একটি জায়গা যা খারাপ অভিপ্রায়ে খারাপ অভিনেতাদের আকর্ষণ করে। উদাহরণ স্বরূপ, একটি ছায়াময় প্রকাশক যেটি একটি বিষয়বস্তু সাইটে ক্লিক-প্রতি-প্রদান বিজ্ঞাপন পরিবেশন করে, প্রকাশকের বিজ্ঞাপনের অর্থ প্রদান (অন্তত অল্প সময়ের জন্য, বিজ্ঞাপন নেটওয়ার্ক তাদের ধরা না হওয়া পর্যন্ত) লোকেদেরকে তাদের বিজ্ঞাপনে ক্লিক করার জন্য প্রতারিত করতে প্ররোচিত হতে পারে। সাধারণত, এই ধরনের বিজ্ঞাপন আইফ্রেমে পরিবেশিত হয়। এখন প্রকাশক যদি ব্যবহারকারীদের এই ধরনের বিজ্ঞাপনে ক্লিক করতে চান, তাহলে তারা একটি CSS নিয়ম iframe { opacity: 0; } এবং আকর্ষণীয় কিছুর উপরে আইফ্রেমগুলিকে ওভারলে করা, যেমন একটি চতুর বিড়াল ভিডিও যা ব্যবহারকারীরা আসলে ক্লিক করতে চান৷ একে ক্লিকজ্যাকিং বলা হয়। আপনি এই ডেমোর উপরের বিভাগে এমন একটি ক্লিকজ্যাকিং আক্রমণ দেখতে পাবেন (বিড়ালের ভিডিও "দেখতে" চেষ্টা করুন এবং "ট্রিক মোড" সক্রিয় করুন)। আপনি লক্ষ্য করবেন যে আইফ্রেমের বিজ্ঞাপনটি "চিন্তা করে" এটি বৈধ ক্লিক পেয়েছে, এমনকি যদি আপনি (অনিচ্ছাকৃতভাবে) ক্লিক করার সময় এটি সম্পূর্ণ স্বচ্ছ ছিল।

ইন্টারসেকশন অবজারভার v2 কীভাবে এটি ঠিক করে?

ইন্টারসেকশন অবজারভার v2 একটি লক্ষ্য উপাদানের প্রকৃত "দৃশ্যমানতা" ট্র্যাক করার ধারণাটি প্রবর্তন করে কারণ একজন মানুষ এটিকে সংজ্ঞায়িত করবে। IntersectionObserver কনস্ট্রাক্টরে একটি বিকল্প সেট করার মাধ্যমে, IntersectionObserverEntry দৃষ্টান্তগুলিকে ছেদ করা হলে isVisible নামে একটি নতুন বুলিয়ান ক্ষেত্র থাকবে। isVisible এর জন্য একটি true মান হল অন্তর্নিহিত বাস্তবায়ন থেকে একটি দৃঢ় গ্যারান্টি যে লক্ষ্য উপাদানটি সম্পূর্ণরূপে অন্যান্য বিষয়বস্তু দ্বারা অবাধিত এবং এতে কোনো ভিজ্যুয়াল এফেক্ট প্রয়োগ করা হয়নি যা স্ক্রিনে এর প্রদর্শনকে পরিবর্তন বা বিকৃত করবে। বিপরীতে, একটি false মান মানে হল যে বাস্তবায়ন সেই গ্যারান্টি দিতে পারে না।

স্পেকের একটি গুরুত্বপূর্ণ বিশদটি হল যে বাস্তবায়নকে মিথ্যা নেতিবাচক রিপোর্ট করার অনুমতি দেওয়া হয় (অর্থাৎ, লক্ষ্য উপাদানটি সম্পূর্ণরূপে দৃশ্যমান এবং অপরিবর্তিত থাকা অবস্থায়ও isVisible থেকে false সেটিং)। পারফরম্যান্স বা অন্যান্য কারণে, ব্রাউজারগুলি বাউন্ডিং বাক্স এবং রেকটিলিনিয়ার জ্যামিতির সাথে কাজ করার জন্য নিজেদেরকে সীমাবদ্ধ রাখে; তারা border-radius মত পরিবর্তনের জন্য পিক্সেল-নিখুঁত ফলাফল অর্জন করার চেষ্টা করে না।

তাতে বলা হয়েছে, মিথ্যা ইতিবাচক কোনো অবস্থাতেই অনুমোদিত নয় (অর্থাৎ, লক্ষ্য উপাদানটি সম্পূর্ণরূপে দৃশ্যমান এবং অপরিবর্তিত না হলে true isVisible সেটিং)।

সতর্কতা: ছেদ করার চেয়ে দৃশ্যমানতা গণনা করা অনেক বেশি ব্যয়বহুল । সেই কারণে, ছেদ পর্যবেক্ষক v2 বিস্তৃতভাবে ব্যবহার করার উদ্দেশ্যে নয় যেভাবে ইন্টারসেকশন অবজারভার v1। ইন্টারসেকশন পর্যবেক্ষক v2 প্রতারণার বিরুদ্ধে লড়াই করার উপর দৃষ্টি নিবদ্ধ করে এবং শুধুমাত্র তখনই ব্যবহার করা উচিত যখন দৃশ্যমানতার তথ্য প্রয়োজন এবং যখন ইন্টারসেকশন অবজারভার v1 কার্যকারিতা তাই অপর্যাপ্ত।

অনুশীলনে নতুন কোডটি কেমন দেখাচ্ছে?

IntersectionObserver কনস্ট্রাক্টর এখন দুটি অতিরিক্ত কনফিগারেশন বৈশিষ্ট্য নেয়: delay এবং trackVisibility । delay হল একটি সংখ্যা যা একটি নির্দিষ্ট লক্ষ্যের জন্য পর্যবেক্ষকের কাছ থেকে বিজ্ঞপ্তিগুলির মধ্যে মিলিসেকেন্ডে ন্যূনতম বিলম্ব নির্দেশ করে৷ trackVisibility হল একটি বুলিয়ান যা নির্দেশ করে যে পর্যবেক্ষক লক্ষ্যের দৃশ্যমানতার পরিবর্তনগুলি ট্র্যাক করবে কিনা।

এখানে উল্লেখ করা গুরুত্বপূর্ণ যে যখন trackVisibility true হয়, তখন delay প্রয়োজন কমপক্ষে 100 (অর্থাৎ, প্রতি 100 মিসেলে একটির বেশি বিজ্ঞপ্তি নয়)। যেমন আগে উল্লেখ করা হয়েছে, দৃশ্যমানতা গণনা করা ব্যয়বহুল, এবং এই প্রয়োজনীয়তা কার্যক্ষমতার অবনতি এবং ব্যাটারি খরচের বিরুদ্ধে একটি সতর্কতা। দায়ী ডেভেলপার বিলম্বের জন্য সবচেয়ে বেশি সহনীয় মূল্য ব্যবহার করবে।

বর্তমান বৈশিষ্ট অনুযায়ী, দৃশ্যমানতা নিম্নরূপ গণনা করা হয়:

• যদি পর্যবেক্ষকের trackVisibility অ্যাট্রিবিউট false হয়, তাহলে লক্ষ্যটি দৃশ্যমান বলে বিবেচিত হয়। এটি বর্তমান v1 আচরণের সাথে মিলে যায়।

• যদি লক্ষ্যে একটি 2D অনুবাদ বা আনুপাতিক 2D আপস্কেলিং ব্যতীত একটি কার্যকর রূপান্তর ম্যাট্রিক্স থাকে, তবে লক্ষ্যটি অদৃশ্য হিসাবে বিবেচিত হয়।

• যদি লক্ষ্য, বা এর ব্লক চেইনের যেকোন উপাদানের 1.0 ব্যতীত একটি কার্যকর অস্বচ্ছতা থাকে, তাহলে লক্ষ্যটি অদৃশ্য বলে বিবেচিত হয়।

• লক্ষ্য, বা এর ব্লক চেইনের কোনো উপাদানে যদি কোনো ফিল্টার প্রয়োগ করা থাকে, তাহলে লক্ষ্যটি অদৃশ্য বলে বিবেচিত হয়।

• যদি বাস্তবায়ন নিশ্চিত করতে না পারে যে লক্ষ্যটি সম্পূর্ণরূপে অন্যান্য পৃষ্ঠার বিষয়বস্তু দ্বারা আবদ্ধ নয়, তাহলে লক্ষ্যটি অদৃশ্য হিসাবে বিবেচিত হবে।

এর মানে বর্তমান বাস্তবায়ন দৃশ্যমানতার গ্যারান্টি সহ বেশ রক্ষণশীল। উদাহরণস্বরূপ, filter: grayscale(0.01%) এর মতো প্রায় অলক্ষিত গ্রেস্কেল ফিল্টার প্রয়োগ করা বা opacity: 0.99 সমস্ত উপাদানটিকে অদৃশ্য করে দেবে।

নীচে একটি সংক্ষিপ্ত কোড নমুনা যা নতুন API বৈশিষ্ট্যগুলিকে চিত্রিত করে৷ আপনি ডেমোর দ্বিতীয় বিভাগে এটির ক্লিক ট্র্যাকিং যুক্তি দেখতে পারেন (তবে এখন, কুকুরছানা ভিডিওটি "দেখতে" চেষ্টা করুন)। অবিলম্বে নিজেকে একটি ছায়াময় প্রকাশক হিসাবে রূপান্তর করতে আবার "ট্রিক মোড" সক্রিয় করতে ভুলবেন না এবং দেখুন কিভাবে ইন্টারসেকশন অবজারভার v2 অ-বৈধ বিজ্ঞাপন ক্লিকগুলিকে ট্র্যাক করা থেকে বাধা দেয়৷ এই সময়, ইন্টারসেকশন অবজারভার v2 আমাদের পিছনে আছে! 🎉

দ্রষ্টব্য: সাধারণ অলস-লোডিং কোডের বিপরীতে, আপনি যদি এই ধরনের ক্লিকজ্যাকিং আক্রমণ প্রতিরোধ করতে ইন্টারসেকশন অবজারভার ব্যবহার করেন, তাহলে আপনাকে অবশ্যই প্রথম ইন্টারসেকশনের পরে উপাদানটিকে unobserve উচিত নয় ।

<!DOCTYPE html>
<!-- This is the ad running in the iframe -->
<button id="callToActionButton">Buy now!</button>

// This is code running in the iframe.

// The iframe must be visible for at least 800ms prior to an input event
// for the input event to be considered valid.
const minimumVisibleDuration = 800;

// Keep track of when the button transitioned to a visible state.
let visibleSince = 0;

const button = document.querySelector('#callToActionButton');
button.addEventListener('click', (event) => {
  if ((visibleSince > 0) &&
      (performance.now() - visibleSince >= minimumVisibleDuration)) {
    trackAdClick();
  } else {
    rejectAdClick();
  }
});

const observer = new IntersectionObserver((changes) => {
  for (const change of changes) {
    // ⚠️ Feature detection
    if (typeof change.isVisible === 'undefined') {
      // The browser doesn't support Intersection Observer v2, falling back to v1 behavior.
      change.isVisible = true;
    }
    if (change.isIntersecting && change.isVisible) {
      visibleSince = change.time;
    } else {
      visibleSince = 0;
    }
  }
}, {
  threshold: [1.0],
  // 🆕 Track the actual visibility of the element
  trackVisibility: true,
  // 🆕 Set a minimum delay between notifications
  delay: 100
}));

// Require that the entire iframe be visible.
observer.observe(document.querySelector('#ad'));

সম্পর্কিত লিংক

• ইন্টারসেকশন অবজারভার স্পেকের সর্বশেষ সম্পাদকের খসড়া।
• ক্রোম প্ল্যাটফর্ম স্ট্যাটাসে ইন্টারসেকশন অবজারভার v2।
• ইন্টারসেকশন অবজারভার v2 ক্রোমিয়াম বাগ ।
• পোস্টিং বাস্তবায়ন করার অভিপ্রায় ব্লিঙ্ক করুন।

স্বীকৃতি

এই নিবন্ধটি পর্যালোচনা করার জন্য Simeon Vincent , Yoav Weiss , এবং Mathias Bynens কে ধন্যবাদ, পাশাপাশি Stefan Zager-কেও একইভাবে Chrome-এ বৈশিষ্ট্যটি পর্যালোচনা এবং প্রয়োগ করার জন্য। আনস্প্ল্যাশে সের্গেই সেমিনের হিরো ছবি।