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

Philip Walton

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

পটভূমি

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

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

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

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

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

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

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

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

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

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

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

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

রাজ্যগুলি

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

ঘটনা

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

* পেজ লাইফসাইকেল 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 উপাদানগুলিতে ফায়ার করা হয়।
• এই ইভেন্টগুলির বেশিরভাগই বুদবুদ করে না, যার অর্থ হল নন-ক্যাপচারিং ইভেন্ট শ্রোতাদের একটি সাধারণ পূর্বপুরুষ উপাদানে যুক্ত করা এবং সেগুলিকে পর্যবেক্ষণ করা অসম্ভব৷
• ক্যাপচার ফেজ টার্গেট বা বুদবুদ পর্যায়গুলির আগে কার্যকর হয়, তাই সেখানে শ্রোতাদের যোগ করা নিশ্চিত করতে সাহায্য করে যে তারা অন্য কোডগুলি বাতিল করতে পারে তার আগে তারা চলে।

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

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

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

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

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

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

আনলোড ইভেন্ট

অনেক ডেভেলপার 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 ইভেন্টের 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 ব্যবহার করে
• টেবিলের শিরোনাম বা ফেভিকন আপডেট করা হচ্ছে
• সতর্কতা দেখানো হচ্ছে
• পুশ বিজ্ঞপ্তি পাঠানো হচ্ছে

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

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

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

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

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

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

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

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

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

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

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

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

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

সারাংশ

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

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