ভূমিকা
ওয়েব ডেভেলপার হিসেবে, আমরা নতুন প্রযুক্তির দ্বারা উত্তেজিত হওয়ার প্রবণতা রাখি যা আমাদেরকে আরও আকর্ষক, ইন্টারেক্টিভ ওয়েব পেজ তৈরি করতে সক্ষম করে। WebGL সহ 3D গ্রাফিক্স? একেবারে। WebAudio এর সাথে উন্নত অডিও ক্ষমতা? ঠিক. ওয়েব ক্যামেরা এবং মাইক্রোফোন ব্যবহার করে রিয়েল-টাইম সহযোগিতা অ্যাপ্লিকেশন? আমাকে সাইন আপ করুন!
কম উত্তেজনাপূর্ণ, যদিও সমানভাবে গুরুত্বপূর্ণ, প্রযুক্তিগুলি যা আমাদের অ্যাপ্লিকেশনগুলি তৈরি করতে দেয় যা আরও দক্ষতার সাথে চলে এবং একটি ভাল সামগ্রিক ব্যবহারকারীর অভিজ্ঞতা প্রদান করে। এখানেই PageVisibility-এর মত একটি API আসে।
পৃষ্ঠা দৃশ্যমানতা API একটি সহজ কিন্তু গুরুত্বপূর্ণ ফাংশন সম্পাদন করে - এটি আপনার অ্যাপ্লিকেশনকে জানতে দেয় যখন একটি পৃষ্ঠা ব্যবহারকারীর কাছে দৃশ্যমান হয়। তথ্যের এই মৌলিক অংশটি ওয়েব পৃষ্ঠাগুলি তৈরি করতে সক্ষম করে যেগুলি যখন দেখা হয় না তখন ভিন্নভাবে আচরণ করে। কয়েকটি উদাহরণ বিবেচনা করুন:
- একটি ওয়েব পৃষ্ঠা যা সার্ভার থেকে তথ্য পুনরুদ্ধার করে সক্রিয়ভাবে দেখা না হলে তার আপডেট চক্রকে ধীর করে দিতে পারে
- একটি পৃষ্ঠা যা একটি ঘূর্ণায়মান চিত্র ক্যারাউজেল বা ভিডিও/অডিও সামগ্রী প্রদর্শন করে ব্যবহারকারী পৃষ্ঠাটি পুনরায় প্রদর্শন না করা পর্যন্ত বিরতি দিতে পারে
- একটি অ্যাপ্লিকেশন ব্যবহারকারীর কাছে বিজ্ঞপ্তিগুলি প্রদর্শন করার সিদ্ধান্ত নিতে পারে যখন এটি দৃশ্য থেকে লুকানো হয়
প্রথমদিকে, এই API ব্যবহারকারীর সুবিধার বাইরে খুব বেশি কার্যকর নাও মনে হতে পারে, কিন্তু মোবাইল ওয়েব ব্রাউজিংয়ের বিশাল বৃদ্ধি বিবেচনা করে, ডিভাইসের ব্যাটারি শক্তি বাঁচাতে সাহায্য করে এমন যেকোনো কিছু খুবই গুরুত্বপূর্ণ হয়ে ওঠে। PageVisibility API ব্যবহার করে, আপনার সাইট ব্যবহারকারীর ডিভাইসকে কম শক্তি খরচ করতে এবং দীর্ঘস্থায়ী করতে সাহায্য করতে পারে।
এপিআই স্পেসিফিকেশন, যা এই লেখাটি প্রার্থীর সুপারিশ পর্যায়ে রয়েছে, নথির দৃশ্যমানতার অবস্থা সনাক্ত করার পাশাপাশি দৃশ্যমানতার পরিবর্তনের প্রতিক্রিয়া দেওয়ার জন্য একটি ইভেন্ট উভয় বৈশিষ্ট্যই প্রদান করে।
এই টিউটোরিয়ালে, আমি API এর মূল বিষয়গুলি কভার করব এবং কিছু ব্যবহারিক উদাহরণে এটি কীভাবে প্রয়োগ করতে হয় তা দেখাব (যদি আপনি অধৈর্য টাইপের হন তবে নির্দ্বিধায় তাদের কাছে এড়িয়ে যান)।
নথি দৃশ্যমান বৈশিষ্ট্য
PageVisibilityAPI স্পেকের বর্তমান সংস্করণটি দুটি নথির বৈশিষ্ট্যকে সংজ্ঞায়িত করে: বুলিয়ান hidden এবং গণনা visibilityState । visibilityState প্রপার্টির বর্তমানে চারটি সম্ভাব্য মান রয়েছে: hidden , visible , prerender এবং unloaded ।
আপনি আশা করতে পারেন, লুকানো বৈশিষ্ট্যটি সত্য হয়ে ওঠে যখন নথিটি দৃশ্যমান হয় না। সাধারণত, এর মানে হল ডকুমেন্টটি হয় মিনিমাইজ করা হয়েছে, একটি ব্যাকগ্রাউন্ড ট্যাবে, OS এর লক স্ক্রিন আপ আছে, ইত্যাদি। নথির কোনো অংশ অন্তত একটি ডিসপ্লেতে অন্তত আংশিকভাবে দৃশ্যমান হলে অ্যাট্রিবিউটটি মিথ্যাতে সেট করা হয়। উপরন্তু, অ্যাক্সেসিবিলিটি সরঞ্জামগুলিকে মিটমাট করার জন্য, লুকানো বৈশিষ্ট্যটি মিথ্যাতে সেট করা যেতে পারে যখন একটি স্ক্রিন ম্যাগনিফায়ারের মতো একটি টুল নথিটিকে সম্পূর্ণরূপে অস্পষ্ট করে, কিন্তু এটির একটি দৃশ্য দেখায়।
বিক্রেতা উপসর্গ সঙ্গে লেনদেন
সমস্ত বিক্রেতা-নির্দিষ্ট উপসর্গের পরিবর্তে কোডের উপর ফোকাস রাখতে, আমি ব্রাউজার-নির্দিষ্টকে আলাদা করতে কিছু সহায়ক ফাংশন ব্যবহার করতে যাচ্ছি। যত তাড়াতাড়ি আপনি অ্যান্ড্রয়েড 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: যদি নথিটি আনলোড করতে হয়, তবে এই মানটি ফেরত দেওয়া হবে (এই মান ঐচ্ছিক; সমস্ত ব্রাউজার অপরিহার্যভাবে এটি সমর্থন করবে না)
দৃশ্যমানতা পরিবর্তন ইভেন্ট
দৃশ্যমানতার বৈশিষ্ট্যগুলি ছাড়াও, একটি দৃশ্যমানতা পরিবর্তন ইভেন্ট রয়েছে যা যখনই নথির দৃশ্যমানতার অবস্থা পরিবর্তিত হয় তখনই ফায়ার হয়৷ আপনি সরাসরি নথি বস্তুতে এই ইভেন্টের জন্য একটি ইভেন্ট শ্রোতা নিবন্ধন করতে পারেন:
ইভেন্ট উদাহরণ
// 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 হল সেই ধাঁধার একটি গুরুত্বপূর্ণ অংশ। সম্পদ-সচেতন ওয়েব অ্যাপ্লিকেশন তৈরির বিষয়ে আরও জানতে, আমাদের অন্যান্য কর্মক্ষমতা-সম্পর্কিত নিবন্ধগুলি দেখুন।