আপনার পছন্দের ভাষায় কন্টেন্ট অনুবাদ করতে Google তার AI প্রযুক্তি ব্যবহার করে। AI-এর মাধ্যমে করা অনুবাদে ভুল থাকতে পারে।

Page Visibility API ব্যবহার করা

Ernest Delgado

ভূমিকা

ওয়েব ডেভেলপার হিসেবে, আমরা নতুন প্রযুক্তি নিয়ে উৎসাহিত হয়ে পড়ি যা আমাদের আরও বেশি আকর্ষণীয়, ইন্টার‍্যাক্টিভ ওয়েব পেজ তৈরি করতে সাহায্য করে। WebGL-এর মাধ্যমে 3D গ্রাফিক্স? অবশ্যই। WebAudio-এর সাথে উন্নত অডিও ক্ষমতা? নিশ্চয়ই। ওয়েব ক্যামেরা ও মাইক্রোফোন ব্যবহার করে রিয়েল-টাইম কোলাবরেশন অ্যাপ্লিকেশন? আমি সাইন-আপ করতে চাই!

কম উত্তেজনাপূর্ণ হলেও, সমানভাবে গুরুত্বপূর্ণ হল সেইসব প্রযুক্তি যা আমাদের এমন অ্যাপ্লিকেশন তৈরি করতে দেয় যা আরও দক্ষতার সাথে চলে এবং সামগ্রিকভাবে আরও ভাল ব্যবহারকারীর অভিজ্ঞতা প্রদান করে। এখানেই PageVisibility-এর মতো API-এর প্রয়োজন হয়।

Page Visibility API একটি সহজ কিন্তু গুরুত্বপূর্ণ কাজ করে – এটি আপনার অ্যাপ্লিকেশনকে জানায় যে কখন কোনও পৃষ্ঠা ব্যবহারকারীকে দেখানো হচ্ছে। এই প্রাথমিক তথ্যটি এমন ওয়েব পেজ তৈরি করতে সাহায্য করে যা না দেখার সময় অন্যভাবে কাজ করে। কয়েকটি উদাহরণ দেখুন:

সার্ভার থেকে তথ্য সংগ্রহ করে এমন ওয়েব পেজ সক্রিয়ভাবে না দেখলে, তার আপডেট চক্রের গতি কমে যেতে পারে
যে পৃষ্ঠায় রোটেটিং ইমেজ ক্যারোজেল বা ভিডিও/অডিও কন্টেন্ট দেখানো হয়, সেটি ব্যবহারকারী আবার পৃষ্ঠাটি না দেখা পর্যন্ত পজ করা থাকতে পারে
কোনও অ্যাপ্লিকেশন ব্যবহারকারীকে বিজ্ঞপ্তি দেখানোর সিদ্ধান্ত তখনই নিতে পারে যখন এটি ভিউ থেকে লুকানো থাকে

প্রথমত, এই API ব্যবহারকারীর সুবিধার বাইরে খুব একটা উপযোগী বলে মনে নাও হতে পারে, তবে মোবাইল ওয়েব ব্রাউজিংয়ের বিপুল বৃদ্ধির কথা বিবেচনা করলে, ডিভাইসের ব্যাটারি পাওয়ার বাঁচাতে সাহায্য করে এমন যেকোনও কিছু খুবই গুরুত্বপূর্ণ হয়ে ওঠে। PageVisibility API ব্যবহার করে, আপনার সাইট ব্যবহারকারীর ডিভাইসকে কম পাওয়ার খরচ করতে এবং আরও বেশি সময় ধরে চলতে সাহায্য করতে পারে।

Browser Support

Source

API স্পেসিফিকেশন, যা এই লেখার সময় ক্যান্ডিডেট সাজেশন পর্যায়ে রয়েছে, ডকুমেন্টের দৃশ্যমানতার অবস্থা শনাক্ত করার জন্য উভয় প্রপার্টি এবং দৃশ্যমানতার পরিবর্তনের প্রতিক্রিয়া জানানোর জন্য একটি ইভেন্ট প্রদান করে।

এই টিউটোরিয়ালে, আমি API-এর প্রাথমিক বিষয়গুলি কভার করব এবং কিছু বাস্তব উদাহরণে এটি কীভাবে প্রয়োগ করতে হয় তা দেখাব (আপনি যদি অধৈর্য হন, তাহলে নির্দ্বিধায় সেগুলি এড়িয়ে যান)।

ডকুমেন্ট দৃশ্যমানতা সংক্রান্ত প্রপার্টি

PageVisibilityAPI স্পেসিফিকেশনের বর্তমান ভার্সন দুটি ডকুমেন্ট প্রপার্টি নির্ধারণ করে: বুলিয়ান hidden এবং এনিউমারেশন visibilityState। visibilityState প্রপার্টিতে বর্তমানে চারটি সম্ভাব্য ভ্যালু আছে: hidden, visible, prerender এবং unloaded।

মনে রাখবেন: এই প্রপার্টিগুলি শুধুমাত্র Android ব্রাউজারে ভেন্ডর-প্রিফিক্সড, যেখানে আপনাকে webkitHidden এবং webkitVisibilityState-এর মতো প্রিফিক্সড ভার্সন ব্যবহার করতে হবে। অন্যান্য সব কাজ করে এমন ব্রাউজার (IE 10+, Firefox, Chrome, Safari) প্রিফিক্স ছাড়া ভার্সন প্রয়োগ করে।

আপনি যেমন আশা করতে পারেন, ডকুমেন্টটি একেবারেই দৃশ্যমান না হলে লুকানো অ্যাট্রিবিউটটি সত্য দেখায়। সাধারণত, এর অর্থ হল ডকুমেন্টটি মিনিমাইজ করা আছে, ব্যাকগ্রাউন্ড ট্যাবে আছে, OS-এর লক স্ক্রিন চালু আছে ইত্যাদি। ডকুমেন্টের কোনও অংশ অন্তত একটি ডিসপ্লেতে আংশিকভাবে দৃশ্যমান হলে অ্যাট্রিবিউটটি false হিসেবে সেট করা হয়। এছাড়াও, অ্যাক্সেসিবিলিটি টুল ব্যবহার করার জন্য, স্ক্রিন ম্যাগনিফায়ারের মতো টুল ডকুমেন্টকে সম্পূর্ণভাবে আড়াল করে দিলেও, তার ভিউ দেখানোর সময় লুকানো অ্যাট্রিবিউটকে 'মিথ্যা' হিসেবে সেট করা যেতে পারে।

ভেন্ডর প্রিফিক্স নিয়ে কাজ করা

সব বিক্রেতা-নির্দিষ্ট প্রিফিক্সিংয়ের পরিবর্তে কোডের উপর ফোকাস রাখতে, আমি ব্রাউজার-নির্দিষ্ট বিষয়গুলিকে আলাদা করতে কিছু হেল্পার ফাংশন ব্যবহার করতে যাচ্ছি। Android 4.4 ব্রাউজারের জন্য সহায়তা বন্ধ করার সাথে সাথেই আপনি এই অংশটি সরিয়ে দিতে এবং স্ট্যান্ডার্ড নাম ব্যবহার করতে পারবেন।

function getHiddenProp(){
    var prefixes = ['webkit','moz','ms','o'];

    // if 'hidden' is natively supported just return it
    if ('hidden' in document) return 'hidden';

    // otherwise loop over all the known prefixes until we find one
    for (var i = 0; i < prefixes.length; i++){
        if ((prefixes[i] + 'Hidden') in document)
            return prefixes[i] + 'Hidden';
    }

    // otherwise it's not supported
    return null;
}

ডকুমেন্ট প্রপার্টির উদাহরণ

এখন আমরা একটি ক্রস-ব্রাউজার ফাংশন, isHidden(), লিখতে পারি, যাতে ডকুমেন্টটি দেখা যাচ্ছে কিনা তা দেখা যায়।

function isHidden() {
    var prop = getHiddenProp();
    if (!prop) return false;

    return document[prop];
}

ডকুমেন্টের দৃশ্যমানতার আরও বিস্তারিত ভিউয়ের জন্য, আপনি visibilityState প্রপার্টি ব্যবহার করতে পারেন। এই প্রপার্টি চারটি ভ্যালুর মধ্যে একটি দেখায়:

hidden: ডকুমেন্টটি সম্পূর্ণভাবে আড়াল করা আছে
visible: ডকুমেন্টটি অন্তত একটি ডিসপ্লে ডিভাইসে আংশিকভাবে দেখা যাচ্ছে
prerender: ডকুমেন্টটি অফ-স্ক্রিনে লোড করা হয়েছে এবং দেখা যাচ্ছে না (এই মানটি ঐচ্ছিক; সব ব্রাউজার এটি সাপোর্ট করবে এমন নয়)
unloaded: ডকুমেন্ট আনলোড করতে হলে, এই ভ্যালু রিটার্ন করা হবে (এই ভ্যালু ঐচ্ছিক; সব ব্রাউজার এটি সাপোর্ট নাও করতে পারে)

VisibilityChange ইভেন্ট

দৃশ্যমানতা সংক্রান্ত প্রপার্টি ছাড়াও, একটি visibilitychange ইভেন্ট আছে যা ডকুমেন্টের দৃশ্যমানতার স্ট্যাটাস পরিবর্তন হলেই ট্রিগার হয়। আপনি সরাসরি ডকুমেন্ট অবজেক্টে এই ইভেন্টের জন্য ইভেন্ট লিসনার রেজিস্টার করতে পারবেন:

ইভেন্টের উদাহরণ

// use the property name to generate the prefixed event name
var visProp = getHiddenProp();
if (visProp) {
  var evtname = visProp.replace(/[H|h]idden/,'') + 'visibilitychange';
  document.addEventListener(evtname, visChange);
}

function visChange() {
   var txtFld = document.getElementById('visChangeText');

   if (txtFld) {
      if (isHidden())
         txtFld.value += "Tab Hidden!\n";
      else
         txtFld.value += "Tab Visible!\n";
   }
}

সারাংশ

একটি দুর্দান্ত ওয়েব অ্যাপ্লিকেশন তৈরি করার জন্য ব্যবহারকারীরা দেখতে এবং ইন্টারঅ্যাক্ট করতে পারে এমন চোখ ধাঁধানো, নজরকাড়া ফিচারগুলি ব্যবহার করার চেয়ে আরও অনেক কিছু প্রয়োজন। একটি সত্যিই দুর্দান্ত অ্যাপ্লিকেশন ব্যবহারকারীর রিসোর্স এবং মনোযোগের বিবেচনাপূর্ণ ব্যবহার করে এবং পৃষ্ঠা দৃশ্যমানতা API হল সেই ধাঁধার একটি গুরুত্বপূর্ণ অংশ। রিসোর্স-কনশাস ওয়েব অ্যাপ্লিকেশন তৈরি করা সম্পর্কে আরও জানতে, আমাদের পারফর্ম্যান্স-সম্পর্কিত অন্যান্য নিবন্ধ চেক করুন।