পৃষ্ঠা জীবনচক্র API

Philip Walton

ব্রাউজার সমর্থন

• 68
• 79
• এক্স
• এক্স

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

পটভূমি

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

ওয়েবে, ঐতিহাসিকভাবে এমন কোন জীবনচক্র ছিল না এবং অ্যাপগুলিকে অনির্দিষ্টকালের জন্য জীবিত রাখা যেতে পারে। প্রচুর সংখ্যক ওয়েব পৃষ্ঠা চলমান থাকায়, মেমরি, সিপিইউ, ব্যাটারি এবং নেটওয়ার্কের মতো গুরুত্বপূর্ণ সিস্টেম রিসোর্স ওভারসাবস্ক্রাইব করা যেতে পারে, যার ফলে শেষ-ব্যবহারকারীর অভিজ্ঞতা খারাপ হয়।

যদিও ওয়েব প্ল্যাটফর্মে দীর্ঘকাল ধরে লাইফসাইকেল অবস্থার সাথে সম্পর্কিত ইভেন্টগুলি রয়েছে — যেমন load , unload এবং visibilitychange — এই ইভেন্টগুলি শুধুমাত্র বিকাশকারীদের ব্যবহারকারীর-সূচিত জীবনচক্রের অবস্থার পরিবর্তনগুলিতে প্রতিক্রিয়া জানাতে দেয়৷ ওয়েবের জন্য কম-পাওয়ার ডিভাইসে নির্ভরযোগ্যভাবে কাজ করার জন্য (এবং সাধারণভাবে সমস্ত প্ল্যাটফর্মে আরও সংস্থান সচেতন হতে হবে) ব্রাউজারগুলির সক্রিয়ভাবে সিস্টেম সংস্থানগুলি পুনরুদ্ধার এবং পুনরায় বরাদ্দ করার একটি উপায় প্রয়োজন৷

প্রকৃতপক্ষে, বর্তমানে ব্রাউজারগুলি ইতিমধ্যেই ব্যাকগ্রাউন্ড ট্যাবে পৃষ্ঠাগুলির জন্য সংস্থান সংরক্ষণের জন্য সক্রিয় ব্যবস্থা গ্রহণ করে এবং অনেক ব্রাউজার (বিশেষ করে ক্রোম) এটির আরও অনেক কিছু করতে চায় — তাদের সামগ্রিক সম্পদের পদচিহ্ন কমাতে।

সমস্যাটি হল বিকাশকারীদের এই ধরণের সিস্টেম-সূচিত হস্তক্ষেপের জন্য প্রস্তুত করার বা এমনকি তারা ঘটছে তা জানার কোনও উপায় নেই। এর মানে ব্রাউজারগুলিকে রক্ষণশীল হতে হবে বা ওয়েব পেজ ভাঙার ঝুঁকি নিতে হবে।

পেজ লাইফসাইকেল এপিআই এই সমস্যার সমাধান করার চেষ্টা করে:

• ওয়েবে লাইফ সাইকেল স্টেটের ধারণার প্রবর্তন এবং প্রমিতকরণ।
• নতুন, সিস্টেম-ইনিশিয়েটেড স্টেটগুলিকে সংজ্ঞায়িত করা যা ব্রাউজারগুলিকে লুকানো বা নিষ্ক্রিয় ট্যাবগুলির দ্বারা গ্রাস করা সম্পদগুলিকে সীমিত করার অনুমতি দেয়৷
• নতুন এপিআই এবং ইভেন্ট তৈরি করা যা ওয়েব ডেভেলপারদের এই নতুন সিস্টেম-ইনিশিয়েটেড স্টেটে এবং সেখান থেকে ট্রানজিশনে সাড়া দিতে দেয়।

এই সমাধানটি ওয়েব ডেভেলপারদের সিস্টেম হস্তক্ষেপের জন্য স্থিতিস্থাপক অ্যাপ্লিকেশন তৈরি করতে প্রয়োজনীয় পূর্বাভাস প্রদান করে এবং এটি ব্রাউজারগুলিকে আরও আক্রমনাত্মকভাবে সিস্টেম সংস্থানগুলিকে অপ্টিমাইজ করার অনুমতি দেয়, শেষ পর্যন্ত সমস্ত ওয়েব ব্যবহারকারীদের উপকার করে৷

এই পোস্টের বাকি অংশটি নতুন পেজ লাইফসাইকেল বৈশিষ্ট্যগুলিকে পরিচয় করিয়ে দেবে এবং সেগুলি সমস্ত বিদ্যমান ওয়েব প্ল্যাটফর্মের অবস্থা এবং ইভেন্টগুলির সাথে কীভাবে সম্পর্কিত তা অন্বেষণ করবে৷ এটি প্রতিটি রাজ্যে ডেভেলপারদের যে ধরনের কাজ করা উচিত (এবং করা উচিত নয়) সেগুলির জন্য সুপারিশ এবং সর্বোত্তম অনুশীলনও দেবে।

পেজ লাইফসাইকেলের অবস্থা এবং ইভেন্টগুলির ওভারভিউ

সমস্ত পেজ লাইফসাইকেল স্টেট আলাদা এবং পারস্পরিকভাবে একচেটিয়া, যার অর্থ একটি পৃষ্ঠা একবারে শুধুমাত্র একটি অবস্থায় থাকতে পারে। এবং একটি পৃষ্ঠার জীবনচক্র অবস্থার বেশিরভাগ পরিবর্তন সাধারণত DOM ইভেন্টের মাধ্যমে পর্যবেক্ষণযোগ্য হয় (ব্যতিক্রমের জন্য প্রতিটি রাজ্যের জন্য বিকাশকারীর সুপারিশগুলি দেখুন)।

সম্ভবত পেজ লাইফসাইকেল স্টেট ব্যাখ্যা করার সবচেয়ে সহজ উপায় — সেইসাথে ইভেন্টগুলি যেগুলি তাদের মধ্যে পরিবর্তনের সংকেত দেয় — একটি ডায়াগ্রামের সাহায্যে:

পৃষ্ঠা জীবনচক্র API অবস্থা এবং ইভেন্ট প্রবাহ।

রাজ্যগুলি

নিম্নলিখিত সারণী প্রতিটি রাজ্যের বিস্তারিত ব্যাখ্যা করে। এটি সম্ভাব্য রাজ্যগুলির তালিকাও করে যা আগে এবং পরে আসতে পারে এবং সেইসাথে ইভেন্ট বিকাশকারীরা পরিবর্তনগুলি পর্যবেক্ষণ করতে ব্যবহার করতে পারে।

অবস্থা	বর্ণনা
সক্রিয়	একটি পৃষ্ঠা সক্রিয় অবস্থায় থাকে যদি এটি দৃশ্যমান হয় এবং ইনপুট ফোকাস থাকে। সম্ভাব্য পূর্ববর্তী অবস্থা: প্যাসিভ ( focus ইভেন্টের মাধ্যমে) হিমায়িত ( resume ইভেন্টের মাধ্যমে, তারপর pageshow ইভেন্ট) সম্ভাব্য পরবর্তী অবস্থা: প্যাসিভ ( blur ইভেন্টের মাধ্যমে)
নিষ্ক্রিয়	একটি পৃষ্ঠা প্যাসিভ অবস্থায় থাকে যদি এটি দৃশ্যমান হয় এবং ইনপুট ফোকাস না থাকে। সম্ভাব্য পূর্ববর্তী অবস্থা: সক্রিয় ( blur ইভেন্টের মাধ্যমে) লুকানো ( visibilitychange ইভেন্টের মাধ্যমে) হিমায়িত ( resume ইভেন্টের মাধ্যমে, তারপর pageshow ইভেন্ট) সম্ভাব্য পরবর্তী অবস্থা: সক্রিয় ( focus ইভেন্টের মাধ্যমে) লুকানো ( visibilitychange ইভেন্টের মাধ্যমে)
গোপন	একটি পৃষ্ঠা লুকানো অবস্থায় থাকে যদি এটি দৃশ্যমান না হয় (এবং হিমায়িত, বাতিল বা সমাপ্ত করা হয়নি)। সম্ভাব্য পূর্ববর্তী অবস্থা: প্যাসিভ ( visibilitychange ইভেন্টের মাধ্যমে) হিমায়িত ( resume ইভেন্টের মাধ্যমে, তারপর pageshow ইভেন্ট) সম্ভাব্য পরবর্তী অবস্থা: প্যাসিভ ( visibilitychange ইভেন্টের মাধ্যমে) হিমায়িত ( freeze ইভেন্টের মাধ্যমে) বাতিল (কোন ইভেন্ট বহিস্কার) সমাপ্ত (কোন ঘটনা বহিস্কার)
হিমায়িত	হিমায়িত অবস্থায় ব্রাউজার পৃষ্ঠাটির টাস্ক সারিগুলিতে ফ্রিজেবল কাজগুলি সম্পাদন স্থগিত করে যতক্ষণ না পৃষ্ঠাটি নিথর না হয়। এর মানে জাভাস্ক্রিপ্ট টাইমার এবং কলব্যাক আনার মতো জিনিসগুলি চলে না। ইতিমধ্যেই চলমান কাজগুলি শেষ করতে পারে (সবচেয়ে গুরুত্বপূর্ণভাবে freeze কলব্যাক), তবে তারা কী করতে পারে এবং কতক্ষণ চালাতে পারে তার মধ্যে সীমিত হতে পারে। ব্রাউজারগুলি সিপিইউ/ব্যাটারি/ডেটা ব্যবহার সংরক্ষণের উপায় হিসাবে পৃষ্ঠাগুলিকে হিমায়িত করে; তারা দ্রুত ব্যাক/ফরওয়ার্ড নেভিগেশন সক্ষম করার উপায় হিসাবে এটি করে — একটি সম্পূর্ণ পৃষ্ঠা পুনরায় লোড করার প্রয়োজন এড়াতে। সম্ভাব্য পূর্ববর্তী অবস্থা: লুকানো ( freeze ইভেন্টের মাধ্যমে) সম্ভাব্য পরবর্তী অবস্থা: সক্রিয় ( resume ইভেন্টের মাধ্যমে, তারপর pageshow ইভেন্ট) প্যাসিভ ( resume ইভেন্টের মাধ্যমে, তারপর pageshow ইভেন্ট) লুকানো ( resume ইভেন্টের মাধ্যমে) বাতিল (কোন ইভেন্ট বহিস্কার)
সমাপ্ত	ব্রাউজার দ্বারা মেমরি থেকে আনলোড করা এবং সাফ করা শুরু হলে একটি পৃষ্ঠা বন্ধ অবস্থায় থাকে। এই অবস্থায় কোনো নতুন কাজ শুরু করা যাবে না, এবং চলমান কাজগুলি যদি খুব বেশি সময় ধরে চলে তাহলে মারা যেতে পারে। সম্ভাব্য পূর্ববর্তী অবস্থা: লুকানো ( pagehide ইভেন্টের মাধ্যমে) সম্ভাব্য পরবর্তী অবস্থা: কোনটিই নয়
বাতিল করা হয়েছে	সম্পদ সংরক্ষণ করার জন্য ব্রাউজার দ্বারা আনলোড করা হলে একটি পৃষ্ঠা বাতিল অবস্থায় থাকে। এই অবস্থায় কোনো কাজ, ইভেন্ট কলব্যাক বা জাভাস্ক্রিপ্ট চালানো যাবে না, কারণ বর্জন করা সাধারণত সম্পদের সীমাবদ্ধতার অধীনে ঘটে, যেখানে নতুন প্রক্রিয়া শুরু করা অসম্ভব। বাতিল অবস্থায় ট্যাবটি নিজেই (ট্যাব শিরোনাম এবং ফেভিকন সহ) সাধারণত ব্যবহারকারীর কাছে দৃশ্যমান হয় যদিও পৃষ্ঠাটি চলে যায়। সম্ভাব্য পূর্ববর্তী অবস্থা: লুকানো (কোন ইভেন্ট গুলি করা হয়নি) হিমায়িত (কোন ইভেন্ট গুলি করা হয়নি) সম্ভাব্য পরবর্তী অবস্থা: কোনটিই নয়

ঘটনা

ব্রাউজারগুলি অনেকগুলি ইভেন্ট প্রেরণ করে, কিন্তু তাদের শুধুমাত্র একটি ছোট অংশই পেজ লাইফসাইকেল অবস্থায় সম্ভাব্য পরিবর্তনের ইঙ্গিত দেয়। নিম্নলিখিত সারণীটি জীবনচক্রের সাথে সম্পর্কিত সমস্ত ইভেন্টের রূপরেখা দেয় এবং তারা কোন রাজ্যে এবং সেখান থেকে স্থানান্তর করতে পারে তা তালিকাভুক্ত করে।

নাম	বিস্তারিত
focus	একটি DOM উপাদান ফোকাস পেয়েছে। দ্রষ্টব্য: একটি focus ইভেন্ট অগত্যা রাষ্ট্র পরিবর্তনের সংকেত দেয় না। এটি শুধুমাত্র একটি অবস্থা পরিবর্তনের সংকেত দেয় যদি পৃষ্ঠায় আগে ইনপুট ফোকাস না থাকে। সম্ভাব্য পূর্ববর্তী অবস্থা: নিষ্ক্রিয় সম্ভাব্য বর্তমান অবস্থা: সক্রিয়
blur	একটি DOM উপাদান ফোকাস হারিয়েছে৷ দ্রষ্টব্য: একটি blur ঘটনা অগত্যা একটি রাষ্ট্র পরিবর্তনের সংকেত দেয় না। এটি শুধুমাত্র একটি অবস্থা পরিবর্তনের সংকেত দেয় যদি পৃষ্ঠাটিতে আর ইনপুট ফোকাস না থাকে (অর্থাৎ পৃষ্ঠাটি শুধুমাত্র একটি উপাদান থেকে অন্য উপাদানে ফোকাস পরিবর্তন করেনি)। সম্ভাব্য পূর্ববর্তী অবস্থা: সক্রিয় সম্ভাব্য বর্তমান অবস্থা: নিষ্ক্রিয়
visibilitychange	নথির visibilityState মান পরিবর্তিত হয়েছে৷ এটি ঘটতে পারে যখন একজন ব্যবহারকারী একটি নতুন পৃষ্ঠায় নেভিগেট করে, ট্যাব স্যুইচ করে, একটি ট্যাব বন্ধ করে, ব্রাউজারটি ছোট করে বা বন্ধ করে, বা মোবাইল অপারেটিং সিস্টেমে অ্যাপগুলি স্যুইচ করে। সম্ভাব্য পূর্ববর্তী অবস্থা: নিষ্ক্রিয় গোপন সম্ভাব্য বর্তমান অবস্থা: নিষ্ক্রিয় গোপন
freeze *	পৃষ্ঠাটি সবেমাত্র হিমায়িত করা হয়েছে। পৃষ্ঠার টাস্ক সারিগুলির মধ্যে কোনো ফ্রিজেবল কাজ শুরু করা হবে না। সম্ভাব্য পূর্ববর্তী অবস্থা: গোপন সম্ভাব্য বর্তমান অবস্থা: হিমায়িত
resume *	ব্রাউজার একটি হিমায়িত পৃষ্ঠা পুনরায় শুরু করেছে৷ সম্ভাব্য পূর্ববর্তী অবস্থা: হিমায়িত সম্ভাব্য বর্তমান অবস্থা: সক্রিয় ( pageshow ইভেন্ট অনুসরণ করলে) প্যাসিভ ( pageshow ইভেন্ট অনুসরণ করলে) গোপন
pageshow	একটি সেশন ইতিহাস এন্ট্রি করা হচ্ছে. এটি হয় একেবারে নতুন পৃষ্ঠা লোড হতে পারে বা পিছনে/ফরোয়ার্ড ক্যাশে থেকে নেওয়া একটি পৃষ্ঠা হতে পারে। যদি পৃষ্ঠাটি ব্যাক/ফরওয়ার্ড ক্যাশে থেকে নেওয়া হয়, তাহলে ইভেন্টের persisted সম্পত্তি true , অন্যথায় এটি false । সম্ভাব্য পূর্ববর্তী অবস্থা: হিমায়িত (একটি resume ইভেন্ট এছাড়াও বহিস্কার করা হবে) সম্ভাব্য বর্তমান অবস্থা: সক্রিয় নিষ্ক্রিয় গোপন
pagehide	একটি সেশন ইতিহাস এন্ট্রি থেকে ট্রাভার্স করা হচ্ছে. ব্যবহারকারী যদি অন্য পৃষ্ঠায় নেভিগেট করে এবং ব্রাউজারটি পরবর্তীতে পুনরায় ব্যবহার করার জন্য ব্যাক/ফরোয়ার্ড ক্যাশে বর্তমান পৃষ্ঠা যোগ করতে সক্ষম হয়, তাহলে ইভেন্টের persisted সম্পত্তি true । true হলে, পৃষ্ঠাটি হিমায়িত অবস্থায় প্রবেশ করছে, অন্যথায় এটি সমাপ্ত অবস্থায় প্রবেশ করছে। সম্ভাব্য পূর্ববর্তী অবস্থা: গোপন সম্ভাব্য বর্তমান অবস্থা: হিমায়িত ( event.persisted অব্যাহত সত্য, freeze ঘটনা অনুসরণ করে) সমাপ্ত ( event.persisted মিথ্যা, unload ইভেন্ট অনুসরণ করে)
beforeunload	উইন্ডো, নথি এবং এর সংস্থানগুলি আনলোড হতে চলেছে৷ দস্তাবেজটি এখনও দৃশ্যমান এবং এই সময়ে ইভেন্টটি এখনও বাতিলযোগ্য৷ গুরুত্বপূর্ণ: beforeunload ইভেন্ট শুধুমাত্র অসংরক্ষিত পরিবর্তনের ব্যবহারকারীকে সতর্ক করতে ব্যবহার করা উচিত। একবার এই পরিবর্তনগুলি সংরক্ষণ করা হলে, ইভেন্টটি সরানো উচিত। এটি কখনই পৃষ্ঠায় নিঃশর্তভাবে যোগ করা উচিত নয়, কারণ এটি করা কিছু ক্ষেত্রে কর্মক্ষমতা ক্ষতিগ্রস্ত করতে পারে। বিস্তারিত জানার জন্য উত্তরাধিকার APIs বিভাগ দেখুন। সম্ভাব্য পূর্ববর্তী অবস্থা: গোপন সম্ভাব্য বর্তমান অবস্থা: সমাপ্ত
unload	পৃষ্ঠাটি আনলোড করা হচ্ছে। সতর্কতা: unload ইভেন্ট ব্যবহার করার পরামর্শ দেওয়া হয় না কারণ এটি অবিশ্বস্ত এবং কিছু ক্ষেত্রে কর্মক্ষমতা ক্ষতিগ্রস্থ করতে পারে। আরো বিস্তারিত জানার জন্য উত্তরাধিকার APIs বিভাগ দেখুন. সম্ভাব্য পূর্ববর্তী অবস্থা: গোপন সম্ভাব্য বর্তমান অবস্থা: সমাপ্ত

* পেজ লাইফসাইকেল API দ্বারা সংজ্ঞায়িত একটি নতুন ইভেন্ট নির্দেশ করে

Chrome 68-এ নতুন বৈশিষ্ট্য যোগ করা হয়েছে

পূর্ববর্তী চার্টে দুটি অবস্থা দেখায় যেগুলি ব্যবহারকারীর দ্বারা সূচিত না হয়ে সিস্টেম-প্রবর্তিত: হিমায়িত এবং বাতিল । পূর্বে উল্লিখিত হিসাবে, ব্রাউজারগুলি ইতিমধ্যেই মাঝে মাঝে লুকানো ট্যাবগুলিকে (তাদের বিবেচনার ভিত্তিতে) হিমায়িত করে এবং বাতিল করে দেয়, তবে এটি কখন ঘটছে তা বিকাশকারীদের জানার কোন উপায় নেই।

ক্রোম 68-এ, বিকাশকারীরা এখন পর্যবেক্ষণ করতে পারে যখন একটি লুকানো ট্যাব হিমায়িত হয় এবং document freeze এবং resume ঘটনাগুলি শোনার মাধ্যমে আনফ্রোজ হয়৷

document.addEventListener('freeze', (event) => {
  // The page is now frozen.
});

document.addEventListener('resume', (event) => {
  // The page has been unfrozen.
});

ক্রোম 68 থেকে document অবজেক্টে এখন ডেস্কটপ ক্রোমে একটি wasDiscarded সম্পত্তি অন্তর্ভুক্ত করা হয়েছে ( এই সমস্যাটিতে অ্যান্ড্রয়েড সমর্থন ট্র্যাক করা হচ্ছে )। একটি লুকানো ট্যাবে থাকা অবস্থায় একটি পৃষ্ঠা বাতিল করা হয়েছে কিনা তা নির্ধারণ করতে, আপনি পৃষ্ঠা লোডের সময় এই সম্পত্তির মান পরীক্ষা করতে পারেন (দ্রষ্টব্য: বাতিল করা পৃষ্ঠাগুলি আবার ব্যবহার করার জন্য পুনরায় লোড করতে হবে)৷

if (document.wasDiscarded) {
  // Page was previously discarded by the browser while in a hidden tab.
}

freeze এবং resume ইভেন্টগুলিতে কী কী করা গুরুত্বপূর্ণ, সেইসাথে কীভাবে পৃষ্ঠাগুলি বাতিল করা হচ্ছে তার জন্য কীভাবে পরিচালনা করা যায় এবং প্রস্তুত করা যায় সে সম্পর্কে পরামর্শের জন্য, প্রতিটি রাজ্যের জন্য বিকাশকারীর সুপারিশগুলি দেখুন৷

পরবর্তী বেশ কয়েকটি বিভাগে এই নতুন বৈশিষ্ট্যগুলি বিদ্যমান ওয়েব প্ল্যাটফর্মের অবস্থা এবং ইভেন্টগুলির সাথে কীভাবে ফিট করে তার একটি ওভারভিউ অফার করে৷

কোডে পেজ লাইফসাইকেল স্টেটগুলি কীভাবে পর্যবেক্ষণ করবেন

সক্রিয় , প্যাসিভ এবং লুকানো অবস্থায়, জাভাস্ক্রিপ্ট কোড চালানো সম্ভব যা বিদ্যমান ওয়েব প্ল্যাটফর্ম API থেকে বর্তমান পৃষ্ঠা লাইফসাইকেল অবস্থা নির্ধারণ করে।

const getState = () => {
  if (document.visibilityState === 'hidden') {
    return 'hidden';
  }
  if (document.hasFocus()) {
    return 'active';
  }
  return 'passive';
};

অন্যদিকে, হিমায়িত এবং সমাপ্ত রাজ্যগুলি শুধুমাত্র তাদের নিজ নিজ ইভেন্ট লিসেনারে সনাক্ত করা যেতে পারে ( freeze এবং pagehide ) কারণ রাষ্ট্র পরিবর্তন হচ্ছে৷

রাষ্ট্রের পরিবর্তনগুলি কীভাবে পর্যবেক্ষণ করবেন

পূর্বে সংজ্ঞায়িত getState() ফাংশনের উপর ভিত্তি করে, আপনি নিম্নলিখিত কোড সহ সমস্ত পৃষ্ঠা লাইফসাইকেল অবস্থার পরিবর্তনগুলি পর্যবেক্ষণ করতে পারেন৷

// Stores the initial state using the `getState()` function (defined above).
let state = getState();

// Accepts a next state and, if there's been a state change, logs the
// change to the console. It also updates the `state` value defined above.
const logStateChange = (nextState) => {
  const prevState = state;
  if (nextState !== prevState) {
    console.log(`State change: ${prevState} >>> ${nextState}`);
    state = nextState;
  }
};

// Options used for all event listeners.
const opts = {capture: true};

// These lifecycle events can all use the same listener to observe state
// changes (they call the `getState()` function to determine the next state).
['pageshow', 'focus', 'blur', 'visibilitychange', 'resume'].forEach((type) => {
  window.addEventListener(type, () => logStateChange(getState(), opts));
});

// The next two listeners, on the other hand, can determine the next
// state from the event itself.
window.addEventListener('freeze', () => {
  // In the freeze event, the next state is always frozen.
  logStateChange('frozen');
}, opts);

window.addEventListener('pagehide', (event) => {
  // If the event's persisted property is `true` the page is about
  // to enter the back/forward cache, which is also in the frozen state.
  // If the event's persisted property is not `true` the page is
  // about to be unloaded.
  logStateChange(event.persisted ? 'frozen' : 'terminated');
}, opts);

এই কোড তিনটি জিনিস করে:

• getState() ফাংশন ব্যবহার করে প্রাথমিক অবস্থা সেট করে।
• একটি ফাংশন সংজ্ঞায়িত করে যা একটি পরবর্তী অবস্থা গ্রহণ করে এবং, যদি কোনো পরিবর্তন হয়, তাহলে রাজ্যের পরিবর্তনগুলি কনসোলে লগ করে।
• সমস্ত প্রয়োজনীয় লাইফসাইকেল ইভেন্টের জন্য ক্যাপচারিং ইভেন্ট শ্রোতাদের যোগ করে, যা পরবর্তী অবস্থায় logStateChange() কল করে।

কোডটি সম্পর্কে একটি বিষয় লক্ষণীয় যে সমস্ত ইভেন্ট শ্রোতা window যোগ করা হয় এবং তারা সকলেই {capture: true} পাস করে। এই জন্য কয়েক কারণ আছে:

• সমস্ত পেজ লাইফসাইকেল ইভেন্টের লক্ষ্য একই নয়। pagehide , এবং pageshow window ফায়ার করা হয়; visibilitychange , freeze এবং resume document ফায়ার করা হয় এবং focus এবং blur তাদের নিজ নিজ DOM উপাদানগুলিতে ফায়ার করা হয়।
• এই ইভেন্টগুলির বেশিরভাগই বুদবুদ করে না, যার অর্থ হল নন-ক্যাপচারিং ইভেন্ট শ্রোতাদের একটি সাধারণ পূর্বপুরুষ উপাদানে যুক্ত করা এবং সেগুলিকে পর্যবেক্ষণ করা অসম্ভব৷
• ক্যাপচার ফেজ টার্গেট বা বুদবুদ পর্যায়গুলির আগে কার্যকর হয়, তাই সেখানে শ্রোতাদের যোগ করা নিশ্চিত করতে সাহায্য করে যে তারা অন্য কোডগুলি বাতিল করতে পারে তার আগে তারা চলে।

প্রতিটি রাজ্যের জন্য বিকাশকারীর সুপারিশ

ডেভেলপার হিসেবে, পেজ লাইফসাইকেল স্টেটগুলি বোঝা এবং কোডে সেগুলি কীভাবে পর্যবেক্ষণ করতে হয় তা জানা উভয়ই গুরুত্বপূর্ণ কারণ আপনার যে ধরনের কাজ করা উচিত (এবং করা উচিত নয়) আপনার পৃষ্ঠাটি কী অবস্থায় রয়েছে তার উপর নির্ভর করে৷

উদাহরণস্বরূপ, যদি পৃষ্ঠাটি লুকানো অবস্থায় থাকে তবে ব্যবহারকারীর কাছে একটি ক্ষণস্থায়ী বিজ্ঞপ্তি প্রদর্শন করা স্পষ্টভাবে বোঝা যায় না। যদিও এই উদাহরণটি বেশ সুস্পষ্ট, তবে অন্যান্য সুপারিশ রয়েছে যা এতটা স্পষ্ট নয় যেগুলি গণনা করার মতো।

অবস্থা	বিকাশকারী সুপারিশ
Active	সক্রিয় অবস্থা হল ব্যবহারকারীর জন্য সবচেয়ে গুরুত্বপূর্ণ সময় এবং এইভাবে আপনার পৃষ্ঠাটি ব্যবহারকারীর ইনপুটের প্রতি প্রতিক্রিয়াশীল হওয়ার জন্য সবচেয়ে গুরুত্বপূর্ণ সময়। যেকোন নন-ইউআই কাজ যা মূল থ্রেডকে ব্লক করতে পারে তা নিষ্ক্রিয় সময়ের জন্য বঞ্চিত করা উচিত বা ওয়েব ওয়ার্কারকে অফলোড করা উচিত ।
Passive	প্যাসিভ অবস্থায় ব্যবহারকারী পৃষ্ঠাটির সাথে ইন্টারঅ্যাক্ট করছে না, কিন্তু তারা এখনও এটি দেখতে পারে। এর মানে হল UI আপডেট এবং অ্যানিমেশনগুলি এখনও মসৃণ হওয়া উচিত, তবে এই আপডেটগুলি কখন ঘটবে তার সময় কম গুরুত্বপূর্ণ। যখন পৃষ্ঠাটি সক্রিয় থেকে প্যাসিভ তে পরিবর্তিত হয়, তখন অসংরক্ষিত অ্যাপ্লিকেশন অবস্থা বজায় রাখার জন্য এটি একটি ভাল সময়।
Hidden	যখন পৃষ্ঠাটি প্যাসিভ থেকে লুকানোতে পরিবর্তিত হয়, তখন এটি পুনরায় লোড না হওয়া পর্যন্ত ব্যবহারকারী এটির সাথে আর ইন্টারঅ্যাক্ট করবে না। লুকানো রূপান্তরও প্রায়শই শেষ অবস্থার পরিবর্তন যা ডেভেলপারদের দ্বারা নির্ভরযোগ্যভাবে পর্যবেক্ষণ করা যায় (এটি বিশেষ করে মোবাইলে সত্য, কারণ ব্যবহারকারীরা ট্যাব বা ব্রাউজার অ্যাপ নিজেই বন্ধ করতে পারে এবং সেই ক্ষেত্রে beforeunload , pagehide এবং unload ইভেন্টগুলি বরখাস্ত করা হয় না ) এর অর্থ হল আপনার লুকানো অবস্থাটিকে ব্যবহারকারীর সেশনের সম্ভাব্য সমাপ্তি হিসাবে বিবেচনা করা উচিত। অন্য কথায়, যেকোনো অসংরক্ষিত অ্যাপ্লিকেশনের অবস্থা বজায় রাখুন এবং কোনো অপ্রেরিত বিশ্লেষণ ডেটা পাঠান। আপনার UI আপডেট করাও বন্ধ করা উচিত (যেহেতু সেগুলি ব্যবহারকারীর দ্বারা দেখা যাবে না), এবং আপনার এমন কোনও কাজ বন্ধ করা উচিত যা ব্যবহারকারী ব্যাকগ্রাউন্ডে চলতে চায় না।
Frozen	হিমায়িত অবস্থায়, টাস্ক সারিগুলিতে ফ্রিজেবল কাজগুলি স্থগিত করা হয় যতক্ষণ না পৃষ্ঠাটি নিথর না হয় — যা কখনই ঘটতে পারে না (যেমন যদি পৃষ্ঠাটি বাতিল করা হয়)। এর মানে হল যখন পৃষ্ঠাটি লুকানো থেকে হিমায়িত হয়ে যায় তখন এটি অপরিহার্য যে আপনি যেকোন টাইমার বন্ধ করুন বা এমন কোনো সংযোগ ছিঁড়ে ফেলুন যা, যদি হিমায়িত করা হয়, একই মূলের অন্যান্য খোলা ট্যাবগুলিকে প্রভাবিত করতে পারে, অথবা পৃষ্ঠাটিকে পিছনে রাখার ব্রাউজারের ক্ষমতাকে প্রভাবিত করতে পারে/ ফরোয়ার্ড ক্যাশে বিশেষ করে, এটা গুরুত্বপূর্ণ যে আপনি: সমস্ত খোলা IndexedDB সংযোগ বন্ধ করুন। খোলা BroadcastChannel সংযোগ বন্ধ করুন. সক্রিয় WebRTC সংযোগ বন্ধ করুন। যেকোনো নেটওয়ার্ক পোলিং বন্ধ করুন বা খোলা ওয়েব সকেট সংযোগ বন্ধ করুন। যে কোনো ওয়েব লক রিলিজ করুন। আপনি sessionStorage (অথবা IndexedDB-এর মাধ্যমে commit() ) যেকোন গতিশীল ভিউ স্টেট (যেমন একটি অসীম তালিকা ভিউতে স্ক্রোল পজিশন) বজায় রাখতে হবে যেটি যদি পৃষ্ঠাটি বাতিল এবং পরে পুনরায় লোড করা হয় তবে আপনি পুনরুদ্ধার করতে চান। যদি পৃষ্ঠাটি হিমায়িত থেকে লুকানো অবস্থায় রূপান্তরিত হয়, তাহলে আপনি যেকোন বন্ধ সংযোগ পুনরায় খুলতে পারেন বা পৃষ্ঠাটি শুরুতে হিমায়িত হওয়ার সময় বন্ধ করা কোনো পোলিং পুনরায় চালু করতে পারেন৷
Terminated	যখন একটি পৃষ্ঠা সমাপ্ত অবস্থায় রূপান্তরিত হয় তখন আপনাকে সাধারণত কোনো পদক্ষেপ নিতে হবে না। যেহেতু ব্যবহারকারীর ক্রিয়াকলাপের ফলে পৃষ্ঠাগুলি আনলোড করা হয় সেগুলি বন্ধ অবস্থায় প্রবেশ করার আগে সর্বদা লুকানো অবস্থার মধ্য দিয়ে যায়, লুকানো অবস্থা হল যেখানে সেশন-এন্ডিং লজিক (যেমন অ্যাপ্লিকেশানের অবস্থা বজায় রাখা এবং বিশ্লেষণে রিপোর্ট করা) করা উচিত৷ এছাড়াও ( লুকানো অবস্থার জন্য সুপারিশগুলিতে উল্লিখিত হিসাবে) বিকাশকারীদের জন্য এটি উপলব্ধি করা অত্যন্ত গুরুত্বপূর্ণ যে সমাপ্ত অবস্থায় স্থানান্তরটি অনেক ক্ষেত্রে (বিশেষত মোবাইলে) নির্ভরযোগ্যভাবে সনাক্ত করা যায় না, তাই বিকাশকারীরা যারা সমাপ্তির ইভেন্টের উপর নির্ভর করে (উদাঃ beforeunload , pagehide , এবং unload ) সম্ভবত ডেটা হারাচ্ছে।
Discarded	একটি পৃষ্ঠা বাতিল করার সময় বিকাশকারীদের দ্বারা পরিত্যাগ করা অবস্থাটি পর্যবেক্ষণযোগ্য নয়৷ এর কারণ হল পৃষ্ঠাগুলি সাধারণত সম্পদের সীমাবদ্ধতার অধীনে বাতিল করা হয় এবং একটি বাতিল ইভেন্টের প্রতিক্রিয়া হিসাবে স্ক্রিপ্ট চালানোর অনুমতি দেওয়ার জন্য একটি পৃষ্ঠাকে আনফ্রিজ করা বেশিরভাগ ক্ষেত্রেই সম্ভব নয়। ফলস্বরূপ, আপনার লুকানো থেকে হিমায়িত পরিবর্তনের একটি বাতিল হওয়ার সম্ভাবনার জন্য প্রস্তুত হওয়া উচিত এবং তারপর আপনি document.wasDiscarded চেক করে পৃষ্ঠা লোডের সময় একটি বাতিল পৃষ্ঠার পুনরুদ্ধারে প্রতিক্রিয়া জানাতে পারেন।

আবারও, যেহেতু লাইফসাইকেল ইভেন্টগুলির নির্ভরযোগ্যতা এবং ক্রম সব ব্রাউজারে ধারাবাহিকভাবে প্রয়োগ করা হয় না, তাই সারণীতে দেওয়া পরামর্শ অনুসরণ করার সবচেয়ে সহজ উপায় হল PageLifecycle.js ব্যবহার করা।

লিগ্যাসি লাইফসাইকেল API এড়ানোর জন্য

যেখানে সম্ভব সেখানে নিম্নলিখিত ঘটনাগুলি এড়ানো উচিত।

আনলোড ইভেন্ট

সতর্কতা: আধুনিক ব্রাউজারে কখনই unload ইভেন্ট ব্যবহার করবেন না।

অনেক ডেভেলপার unload ইভেন্টটিকে একটি গ্যারান্টিযুক্ত কলব্যাক হিসাবে বিবেচনা করে এবং রাষ্ট্র সংরক্ষণ এবং বিশ্লেষণ ডেটা পাঠাতে এটিকে সেশনের শেষ সংকেত হিসাবে ব্যবহার করে, কিন্তু এটি করা অত্যন্ত অবিশ্বস্ত , বিশেষ করে মোবাইলে! মোবাইলে ট্যাব সুইচার থেকে একটি ট্যাব বন্ধ করা বা অ্যাপ সুইচার থেকে ব্রাউজার অ্যাপ বন্ধ করা সহ অনেক সাধারণ আনলোড পরিস্থিতিতে unload ইভেন্টটি চালু হয় না।

এই কারণে, একটি সেশন কখন শেষ হবে তা নির্ধারণ করতে visibilitychange ইভেন্টের উপর নির্ভর করা সর্বদা ভাল, এবং লুকানো অবস্থাটিকে অ্যাপ এবং ব্যবহারকারীর ডেটা সংরক্ষণের শেষ নির্ভরযোগ্য সময় বিবেচনা করুন৷

তদুপরি, একটি নিবন্ধিত unload ইভেন্ট হ্যান্ডলারের নিছক উপস্থিতি (হয় onunload বা addEventListener() এর মাধ্যমে) ব্রাউজারগুলিকে দ্রুত ব্যাক এবং ফরোয়ার্ড লোডের জন্য পিছনে/ফরোয়ার্ড ক্যাশে পৃষ্ঠাগুলি রাখতে সক্ষম হতে বাধা দিতে পারে।

সমস্ত আধুনিক ব্রাউজারে, unload ইভেন্টের পরিবর্তে সম্ভাব্য পৃষ্ঠা আনলোড (ওরফে সমাপ্ত অবস্থা) সনাক্ত করতে সর্বদা pagehide ইভেন্ট ব্যবহার করার পরামর্শ দেওয়া হয়। আপনার যদি ইন্টারনেট এক্সপ্লোরার সংস্করণ 10 এবং তার নীচের সংস্করণগুলিকে সমর্থন করার প্রয়োজন হয়, তাহলে আপনাকে pagehide ইভেন্ট সনাক্ত করতে হবে এবং ব্রাউজারটি pagehide সমর্থন না করলে শুধুমাত্র unload ব্যবহার করা উচিত:

const terminationEvent = 'onpagehide' in self ? 'pagehide' : 'unload';

window.addEventListener(terminationEvent, (event) => {
  // Note: if the browser is able to cache the page, `event.persisted`
  // is `true`, and the state is frozen rather than terminated.
});

আগে আনলোড ইভেন্ট

সতর্কতা: নিঃশর্তভাবে beforeunload শ্রোতা যোগ করবেন না বা এটিকে সেশন-অন্ত-সংকেত হিসাবে ব্যবহার করবেন না। ব্যবহারকারীর অসংরক্ষিত কাজ থাকলেই এটি যোগ করুন এবং সেই কাজটি সংরক্ষিত হওয়ার সাথে সাথে এটিকে সরিয়ে দিন।

beforeunload ইভেন্টের unload ইভেন্টের অনুরূপ সমস্যা আছে, ঐতিহাসিকভাবে, beforeunload ইভেন্টের উপস্থিতি পৃষ্ঠাগুলিকে ব্যাক/ফরোয়ার্ড ক্যাশের জন্য যোগ্য হতে বাধা দিতে পারে। আধুনিক ব্রাউজারগুলিতে এই সীমাবদ্ধতা নেই। যদিও কিছু ব্রাউজার, সতর্কতা হিসাবে, ব্যাক/ফরোয়ার্ড ক্যাশে একটি পৃষ্ঠা রাখার চেষ্টা করার সময় beforeunload ইভেন্টটি ফায়ার করবে না, যার মানে ইভেন্টটি সেশন-অন্ত-সংকেত হিসাবে নির্ভরযোগ্য নয়। অতিরিক্তভাবে, কিছু ব্রাউজার ( Chrome সহ) এর আগে beforeunload ইভেন্টটিকে ফায়ার করার অনুমতি দেওয়ার আগে পৃষ্ঠায় একটি ব্যবহারকারী-মিথস্ক্রিয়া প্রয়োজন, যা এর নির্ভরযোগ্যতাকে আরও প্রভাবিত করে৷

beforeunload এবং unload মধ্যে একটি পার্থক্য হল beforeunload বৈধ ব্যবহার রয়েছে। উদাহরণ স্বরূপ, আপনি যখন ব্যবহারকারীকে সতর্ক করতে চান যে তাদের অসংরক্ষিত পরিবর্তন আছে তারা যদি পৃষ্ঠাটি আনলোড করা চালিয়ে যান তাহলে তারা হারাবেন।

যেহেতু beforeunload ব্যবহার করার বৈধ কারণ রয়েছে, তাই এটি সুপারিশ করা হয় যে আপনি শুধুমাত্র beforeunload শ্রোতাদের যোগ করুন যখন কোনও ব্যবহারকারীর অসংরক্ষিত পরিবর্তনগুলি থাকে এবং তারপরে সেগুলি সংরক্ষিত হওয়ার সাথে সাথেই সেগুলি সরিয়ে ফেলুন৷

অন্য কথায়, এটি করবেন না (যেহেতু এটি শর্তহীনভাবে একটি শ্রোতাকে beforeunload করে):

addEventListener('beforeunload', (event) => {
  // A function that returns `true` if the page has unsaved changes.
  if (pageHasUnsavedChanges()) {
    event.preventDefault();

    // Legacy support for older browsers.
    return (event.returnValue = true);
  }
});

পরিবর্তে এটি করুন (যেহেতু এটি প্রয়োজন হলে এটি শুধুমাত্র beforeunload শ্রোতা যোগ করে এবং যখন এটি না হয় তখন এটি সরিয়ে দেয়):

const beforeUnloadListener = (event) => {
  event.preventDefault();
  
  // Legacy support for older browsers.
  return (event.returnValue = true);
};

// A function that invokes a callback when the page has unsaved changes.
onPageHasUnsavedChanges(() => {
  addEventListener('beforeunload', beforeUnloadListener);
});

// A function that invokes a callback when the page's unsaved changes are resolved.
onAllChangesSaved(() => {
  removeEventListener('beforeunload', beforeUnloadListener);
});

FAQs

কেন একটি "লোডিং" অবস্থা নেই?

পেজ লাইফসাইকেল API রাজ্যগুলিকে পৃথক এবং পারস্পরিকভাবে একচেটিয়া বলে সংজ্ঞায়িত করে৷ যেহেতু একটি পৃষ্ঠা সক্রিয়, প্যাসিভ বা লুকানো অবস্থায় লোড করা যেতে পারে, এবং যেহেতু এটি লোডিং শেষ হওয়ার আগে স্থিতিগুলি পরিবর্তন করতে পারে—বা এমনকি বন্ধও করা যেতে পারে—তাহলে একটি পৃথক লোডিং অবস্থা এই দৃষ্টান্তের মধ্যে বোঝা যায় না।

আমার পৃষ্ঠাটি গুরুত্বপূর্ণ কাজ করে যখন এটি লুকানো থাকে, আমি কীভাবে এটিকে হিমায়িত বা বাতিল করা থেকে আটকাতে পারি?

লুকানো অবস্থায় চলার সময় ওয়েব পৃষ্ঠাগুলিকে হিমায়িত করা উচিত নয় এমন অনেক বৈধ কারণ রয়েছে৷ সবচেয়ে সুস্পষ্ট উদাহরণ হল একটি অ্যাপ যা সঙ্গীত বাজায়।

এমন পরিস্থিতিও রয়েছে যেখানে Chrome-এর পক্ষে একটি পৃষ্ঠা বাতিল করা ঝুঁকিপূর্ণ হবে, যেমন যদি এটিতে জমা না দেওয়া ব্যবহারকারীর ইনপুট সহ একটি ফর্ম থাকে, অথবা যদি এটির beforeunload একটি আনলোড হ্যান্ডলার থাকে যা পৃষ্ঠাটি আনলোড করার সময় সতর্ক করে।

এই মুহুর্তের জন্য, পৃষ্ঠাগুলি বাতিল করার সময় Chrome রক্ষণশীল হতে চলেছে এবং শুধুমাত্র তখনই তা করে যখন এটি নিশ্চিত হয় যে এটি ব্যবহারকারীদের প্রভাবিত করবে না৷ উদাহরণস্বরূপ, যে পৃষ্ঠাগুলি লুকানো অবস্থায় থাকা অবস্থায় নিম্নলিখিতগুলির যে কোনও একটি করতে দেখা গেছে সেগুলি বাতিল করা হবে না যদি না চরম সম্পদের সীমাবদ্ধতার অধীনে থাকে:

• অডিও বাজানো হচ্ছে
• WebRTC ব্যবহার করে
• টেবিলের শিরোনাম বা ফেভিকন আপডেট করা হচ্ছে
• সতর্কতা দেখানো হচ্ছে
• পুশ বিজ্ঞপ্তি পাঠানো হচ্ছে

একটি ট্যাব নিরাপদে হিমায়িত বা বাতিল করা যেতে পারে কিনা তা নির্ধারণ করতে ব্যবহৃত বর্তমান তালিকা বৈশিষ্ট্যগুলির জন্য, দেখুন: হিউরিস্টিকস ফর ফ্রিজিং এবং ক্রোমে বাতিল করা ।

দ্রষ্টব্য: ব্যবহারকারীদের অপঠিত বিজ্ঞপ্তিগুলি সম্পর্কে সতর্ক করতে শিরোনাম বা ফেভিকন আপডেট করে এমন পৃষ্ঠাগুলির ক্ষেত্রে, পরিষেবা কর্মী থেকে এই ধরণের আপডেটগুলি সক্ষম করার জন্য আমাদের কাছে একটি প্রস্তাব রয়েছে, যা Chrome কে পৃষ্ঠাটিকে নিথর বা বাতিল করতে দেয় কিন্তু তারপরেও পরিবর্তনগুলি দেখায়৷ ট্যাব শিরোনাম বা ফেভিকন।

পিছনে / ফরোয়ার্ড ক্যাশে কি?

ব্যাক/ফরওয়ার্ড ক্যাশে এমন একটি শব্দ যা একটি নেভিগেশন অপ্টিমাইজেশান বর্ণনা করতে ব্যবহৃত হয় যা কিছু ব্রাউজার প্রয়োগ করে যা পিছনে এবং ফরোয়ার্ড বোতামগুলিকে দ্রুত ব্যবহার করে।

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

সমস্ত অভিপ্রায় এবং উদ্দেশ্যে, এই ফ্রিজিংটি কার্যকরীভাবে একই রকম যা ফ্রিজিং ব্রাউজারগুলি CPU/ব্যাটারি সংরক্ষণের জন্য সম্পাদন করে; যে কারণে এটি হিমায়িত জীবনচক্র অবস্থার অংশ হিসাবে বিবেচিত হয়।

যদি আমি হিমায়িত বা সমাপ্ত অবস্থায় অ্যাসিঙ্ক্রোনাস এপিআই চালাতে না পারি, তাহলে আমি কীভাবে ইনডেক্সডডিবিতে ডেটা সংরক্ষণ করতে পারি?

হিমায়িত এবং সমাপ্ত অবস্থায়, একটি পৃষ্ঠার টাস্ক সারিগুলিতে ফ্রিজেবল কাজগুলি স্থগিত করা হয়, যার অর্থ অসিঙ্ক্রোনাস এবং কলব্যাক-ভিত্তিক API যেমন IndexedDB নির্ভরযোগ্যভাবে ব্যবহার করা যায় না।

ভবিষ্যতে, আমরা IDBTransaction অবজেক্টে একটি commit() পদ্ধতি যোগ করব, যা ডেভেলপারদের কার্যকরভাবে লিখতে-শুধু লেনদেন করার জন্য একটি উপায় দেবে যার জন্য কলব্যাকের প্রয়োজন নেই। অন্য কথায়, যদি ডেভেলপার শুধুমাত্র IndexedDB-তে ডেটা লেখে এবং রিড এবং রাইট সমন্বিত একটি জটিল লেনদেন সম্পাদন না করে, তাহলে কাজ সারি সাসপেন্ড হওয়ার আগে commit() পদ্ধতিটি শেষ করতে সক্ষম হবে (ধরে নিচ্ছে যে IndexedDB ডাটাবেস ইতিমধ্যেই খোলা আছে)।

কোডের জন্য যা আজ কাজ করতে হবে, তবে, বিকাশকারীদের দুটি বিকল্প রয়েছে:

• সেশন স্টোরেজ ব্যবহার করুন: সেশন স্টোরেজ সিঙ্ক্রোনাস এবং পৃষ্ঠা বাতিল করা জুড়ে থাকে।
• আপনার পরিষেবা কর্মী থেকে IndexedDB ব্যবহার করুন: পৃষ্ঠাটি বন্ধ বা বাতিল করার পরে একজন পরিষেবা কর্মী IndexedDB-এ ডেটা সংরক্ষণ করতে পারেন। freeze বা pagehide ইভেন্ট লিসেনারে আপনি postMessage() এর মাধ্যমে আপনার পরিষেবা কর্মীকে ডেটা পাঠাতে পারেন, এবং পরিষেবা কর্মী ডেটা সংরক্ষণ করতে পারে৷

দ্রষ্টব্য: যদিও দ্বিতীয় বিকল্পটি কাজ করবে, এটি এমন পরিস্থিতিতে আদর্শ নয় যেখানে ডিভাইসটি মেমরির চাপের কারণে পৃষ্ঠাটি জমা বা বাতিল করে দিচ্ছে কারণ ব্রাউজারটিকে পরিষেবা কর্মী প্রক্রিয়াটিকে জাগিয়ে তুলতে হতে পারে, যা সিস্টেমে আরও চাপ সৃষ্টি করবে৷

হিমায়িত এবং বাতিল অবস্থায় আপনার অ্যাপ পরীক্ষা করা হচ্ছে

আপনার অ্যাপ হিমায়িত এবং বাতিল অবস্থায় কীভাবে আচরণ করে তা পরীক্ষা করতে, আপনি আপনার খোলা ট্যাবগুলির যেকোনও ফ্রিজ বা বাতিল করতে chrome://discards এ যেতে পারেন৷

Chrome UI বাতিল করে

এটি আপনাকে নিশ্চিত করতে দেয় যে আপনার পৃষ্ঠাগুলিকে freeze এবং resume ইভেন্টগুলিকে সঠিকভাবে পরিচালনা করে সেইসাথে document.wasDiscarded ডিসকার্ডড পতাকা যখন পৃষ্ঠাগুলি বাতিল করার পরে পুনরায় লোড করা হয়।

সারসংক্ষেপ

ডেভেলপাররা যারা তাদের ব্যবহারকারীর ডিভাইসের সিস্টেম রিসোর্সকে সম্মান করতে চায় তাদের উচিত তাদের অ্যাপ তৈরি করা উচিত Page Lifecycle স্টেটস মাথায় রেখে। এটি গুরুত্বপূর্ণ যে ওয়েব পৃষ্ঠাগুলি এমন পরিস্থিতিতে অত্যধিক সিস্টেম সংস্থান গ্রহণ করছে না যা ব্যবহারকারী আশা করবেন না

যত বেশি ডেভেলপাররা নতুন পেজ লাইফসাইকেল এপিআই প্রয়োগ করা শুরু করবে, ব্রাউজারদের জন্য ব্যবহার করা হচ্ছে না এমন পৃষ্ঠাগুলিকে ফ্রিজ করা এবং বাতিল করা তত নিরাপদ হবে। এর মানে ব্রাউজারগুলি কম মেমরি, CPU, ব্যাটারি এবং নেটওয়ার্ক সংস্থানগুলি ব্যবহার করবে, যা ব্যবহারকারীদের জন্য একটি জয়।