ব্যাক/ফরওয়ার্ড ক্যাশে নট রিস্টোরড রিজনস এপিআই

bfcache ব্যবহার করে কোন নেভিগেশন ব্লক করা হয়েছিল এবং কেন তা খুঁজে বের করুন।

ক্রিস মিলস
ব্যারি পোলার্ড

PerformanceNavigationTiming ক্লাসে যোগ করা notRestoredReasons প্রপার্টি, ডকুমেন্টে উপস্থিত ফ্রেমগুলিকে নেভিগেশনে bfcache ব্যবহার থেকে ব্লক করা হয়েছিল কিনা এবং কেন তা সম্পর্কে তথ্য প্রদান করে। ডেভেলপাররা এই তথ্য ব্যবহার করে এমন পৃষ্ঠাগুলি সনাক্ত করতে পারেন যেগুলিকে bfcache-সামঞ্জস্যপূর্ণ করার জন্য আপডেটের প্রয়োজন, যার ফলে সাইটের কর্মক্ষমতা উন্নত হয়।

বর্তমান অবস্থা

notRestoredReasons API Chrome 123 থেকে পাঠানো হয়েছে এবং ধীরে ধীরে এটি চালু করা হচ্ছে।

ধারণা এবং ব্যবহার

আধুনিক ব্রাউজারগুলি ইতিহাস নেভিগেশনের জন্য একটি অপ্টিমাইজেশন বৈশিষ্ট্য প্রদান করে যাকে ব্যাক/ফরোয়ার্ড ক্যাশে (bfcache) বলা হয়। এটি ব্যবহারকারীদের ইতিমধ্যেই পরিদর্শন করা পৃষ্ঠায় ফিরে গেলে তাৎক্ষণিক লোডিং অভিজ্ঞতা প্রদান করে। পৃষ্ঠাগুলিকে bfcache-এ প্রবেশ করা থেকে ব্লক করা যেতে পারে অথবা bfcache-এ থাকাকালীন বিভিন্ন কারণে উচ্ছেদ করা যেতে পারে, কিছু নির্দিষ্টকরণের জন্য প্রয়োজনীয় এবং কিছু ব্রাউজার বাস্তবায়নের জন্য নির্দিষ্ট।

পূর্বে, ডেভেলপারদের জন্য কোন উপায় ছিল না যে কেন তাদের পৃষ্ঠাগুলিকে ফিল্ডে bfcache ব্যবহার থেকে ব্লক করা হয়েছে, যদিও Chrome dev tools-এ একটি পরীক্ষা করা হয়েছিল। ফিল্ডে মনিটরিং সক্ষম করার জন্য, PerformanceNavigationTiming ক্লাসটি একটি notRestoredReasons সম্পত্তি অন্তর্ভুক্ত করার জন্য বাড়ানো হয়েছে। এটি উপরের ফ্রেম এবং ডকুমেন্টে উপস্থিত সমস্ত আইফ্রেমে সম্পর্কিত তথ্য ধারণকারী একটি অবজেক্ট ফেরত দেয়:

  • যেসব কারণে তাদের bfcache ব্যবহার থেকে ব্লক করা হয়েছিল।

  • HTML-এ আইফ্রেম সনাক্ত করতে সাহায্য করার জন্য ফ্রেম id এবং name এর মতো বিশদ বিবরণ।

    এটি ডেভেলপারদের সেই পৃষ্ঠাগুলিকে bfcache-সামঞ্জস্যপূর্ণ করার জন্য পদক্ষেপ নিতে সাহায্য করে, যার ফলে সাইটের কর্মক্ষমতা উন্নত হয়।

উদাহরণ

Performance.getEntriesByType() এবং PerformanceObserver এর মতো বৈশিষ্ট্যগুলি থেকে একটি PerformanceNavigationTiming ইনস্ট্যান্স পাওয়া যেতে পারে।

উদাহরণস্বরূপ, আপনি নিম্নলিখিত ফাংশনটি ব্যবহার করে পারফরম্যান্স টাইমলাইনে উপস্থিত সমস্ত PerformanceNavigationTiming অবজেক্ট ফেরত দিতে পারেন এবং তাদের notRestoredReasons লগ করতে পারেন:

function returnNRR() {
  const navEntries = performance.getEntriesByType("navigation");
  for (let i = 0; i < navEntries.length; i++) {
    console.log(`Navigation entry ${i}`);
    let navEntry = navEntries[i];
    console.log(navEntry.notRestoredReasons);
  }
}

ইতিহাস নেভিগেশনের জন্য, PerformanceNavigationTiming.notRestoredReasons প্রোপার্টি নিম্নলিখিত কাঠামো সহ একটি অবজেক্ট ফেরত দেয়, যা শীর্ষ-স্তরের ফ্রেমের ব্লক করা অবস্থাকে প্রতিনিধিত্ব করে:

{
  children: [],
  id: null,
  name: null,
  reasons: [
    {"reason", "unload-listener"}
  ],
  src: null,
  url: "https://www.example.com/page/"
}

বৈশিষ্ট্যগুলি নিম্নরূপ:

children
শীর্ষ-স্তরের ফ্রেমে এমবেড করা যেকোনো একই-অরিজিন ফ্রেমের ব্লক করা অবস্থা প্রতিনিধিত্বকারী অবজেক্টের একটি অ্যারে। প্রতিটি অবজেক্টের কাঠামো প্যারেন্ট অবজেক্টের মতো একই - এইভাবে, যেকোনও সংখ্যক স্তরের এমবেডেড ফ্রেমকে অবজেক্টের ভিতরে পুনরাবৃত্তভাবে উপস্থাপন করা যেতে পারে। যদি ফ্রেমের কোনও সন্তান না থাকে, তাহলে অ্যারেটি খালি থাকবে।
id
ফ্রেমের id অ্যাট্রিবিউট মান প্রতিনিধিত্বকারী একটি স্ট্রিং (উদাহরণস্বরূপ <iframe id="foo" src="..."> )। যদি ফ্রেমের কোন id না থাকে, তাহলে মানটি null হবে। শীর্ষ-স্তরের পৃষ্ঠার জন্য এটি null ।
name
ফ্রেমের name অ্যাট্রিবিউট মান প্রতিনিধিত্বকারী একটি স্ট্রিং (উদাহরণস্বরূপ <iframe name="bar" src="..."> )। যদি ফ্রেমের কোন name না থাকে, তাহলে মানটি একটি খালি স্ট্রিং হবে। শীর্ষ-স্তরের পৃষ্ঠার জন্য এটি null ।
reasons
প্রতিটি স্ট্রিংয়ের একটি অ্যারে নেভিগেট করা পৃষ্ঠাটি bfcache ব্যবহার থেকে কেন ব্লক করা হয়েছিল তার একটি কারণ উপস্থাপন করে। ব্লকিং ঘটতে পারে তার বিভিন্ন কারণ রয়েছে। আরও বিস্তারিত জানার জন্য ব্লকিং কারণ বিভাগটি দেখুন।
src
ফ্রেমের উৎসের পথ নির্দেশ করে এমন একটি স্ট্রিং (উদাহরণস্বরূপ <iframe src="b.html"> )। যদি ফ্রেমে কোন src না থাকে, তাহলে মানটি একটি খালি স্ট্রিং হবে। শীর্ষ-স্তরের পৃষ্ঠার জন্য এটি null ।
url
নেভিগেট করা পৃষ্ঠা/আইফ্রেমের URL প্রতিনিধিত্বকারী একটি স্ট্রিং।

PerformanceNavigationTiming অবজেক্টের জন্য যা ইতিহাস নেভিগেশনের প্রতিনিধিত্ব করে না, notRestoredReasons প্রপার্টি null রিটার্ন করবে।

মনে রাখবেন যে notRestoredReasons যখন কোনও ব্লকিং কারণ না থাকে তখনও null রিটার্ন করে, তাই null থাকা মানে bfcache ব্যবহার করা হয়েছিল কিনা তা নির্দেশ করে না। এর জন্য, আপনাকে event.persisted প্রোপার্টি ব্যবহার করতে হবে।

একই-অরিজিন ফ্রেমে bfcache ব্লকিং রিপোর্ট করুন

যখন কোনও পৃষ্ঠায় একই-অরিজিন ফ্রেম এমবেড করা থাকে, তখন ফেরত আসা notRestoredReasons মানটিতে children প্রপার্টির ভিতরে একটি অবজেক্ট থাকবে যা প্রতিটি এমবেডেড ফ্রেমের ব্লক করা অবস্থা উপস্থাপন করবে।

উদাহরণস্বরূপ:

{
  children: [
    {
      children: [],
      id: "iframe-id",
      name: "iframe-name",
      reasons: [],
      src: "./index.html",
      url: "https://www.example.com/"
    },
    {
      children: [],
      id: "iframe-id2",
      name: "iframe-name2",
      reasons: [
        {"reason": "unload-listener"}
      ],
      src: "./unload-examples.html",
      url: "https://www.example.com/unload-examples.html"
    },
  ],
  id: null,
  name: null,
  reasons: [],
  src: null,
  url:"https://www.example.com"
}

ক্রস-অরিজিন ফ্রেমে bfcache ব্লকিং রিপোর্ট করুন

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

উদাহরণস্বরূপ:

{
  children: [
    {
      children: [],
      id: "iframe-id",
      name: "iframe-name",
      reasons: [],
      src: "./index.html",
      url: "https://www.example2.com/"
    }
  ],
  id: null,
  name: null,
  reasons: [
        {"reason": "masked"}
  ],
  src: null,
  url:"https://www.example.com"
}

সকল ক্রস-অরিজিন আইফ্রেমের ক্ষেত্রে, আমরা ফ্রেমের reasons মানের জন্য null রিপোর্ট করি এবং শীর্ষ-স্তরের ফ্রেম "masked" এর একটি কারণ দেখাবে। মনে রাখবেন যে "masked" ব্যবহারকারী এজেন্ট-নির্দিষ্ট কারণেও ব্যবহার করা যেতে পারে তাই সবসময় একটি আইফ্রেমে কোনও সমস্যা নির্দেশ নাও করতে পারে।

নিরাপত্তা এবং গোপনীয়তা বিবেচনা সম্পর্কে আরও বিস্তারিত জানার জন্য ব্যাখ্যাকারীতে নিরাপত্তা এবং গোপনীয়তা বিভাগটি দেখুন।

ব্লক করার কারণ

যেমনটি আমরা আগেই বলেছি, ব্লকিং ঘটতে পারে তার অনেকগুলি ভিন্ন কারণ রয়েছে:

bfcache ব্যবহার না করার কিছু সাধারণ কারণের উদাহরণ নিচে দেওয়া হল:

  • unload-listener : পৃষ্ঠাটি একটি unload হ্যান্ডলার নিবন্ধন করে, যা নির্দিষ্ট ব্রাউজারে bfcache ব্যবহার প্রতিরোধ করে। আরও তথ্যের জন্য unload ইভেন্টটি অবচয় করা দেখুন।
  • response-cache-control-no-store : পৃষ্ঠাটি cache-control মান হিসেবে no-store ব্যবহার করে।
  • related-active-contents : পৃষ্ঠাটি অন্য একটি পৃষ্ঠা থেকে খোলা হয়েছে (হয় "ডুপ্লিকেট ট্যাব" ব্যবহার করে) যেখানে এখনও এই পৃষ্ঠার একটি রেফারেন্স রয়েছে।

প্রতিক্রিয়া

Chromium টিম bfcache notRestoredReasons API এর সাথে আপনার অভিজ্ঞতা সম্পর্কে শুনতে চায়।

API ডিজাইন সম্পর্কে আমাদের বলুন

API-তে কি এমন কিছু আছে যা আপনার প্রত্যাশা অনুযায়ী কাজ করছে না? অথবা আপনার ধারণা বাস্তবায়নের জন্য প্রয়োজনীয় কোনও পদ্ধতি বা বৈশিষ্ট্য অনুপস্থিত? নিরাপত্তা মডেল সম্পর্কে আপনার কোন প্রশ্ন বা মন্তব্য আছে? সংশ্লিষ্ট GitHub রেপোতে একটি স্পেসিফিকেশন সমস্যা ফাইল করুন, অথবা বিদ্যমান কোনও সমস্যায় আপনার মতামত যোগ করুন।

বাস্তবায়নে কোনও সমস্যার কথা জানান

Chromium এর বাস্তবায়নে কি আপনি কোন বাগ খুঁজে পেয়েছেন? নাকি বাস্তবায়নটি স্পেসিফিকেশন থেকে আলাদা? আমাদের ইস্যু ট্র্যাকারে একটি বাগ ফাইল করুন। যতটা সম্ভব বিস্তারিত তথ্য, পুনরুৎপাদনের জন্য সহজ নির্দেশাবলী অন্তর্ভুক্ত করতে ভুলবেন না এবং উপাদানটি UI > Browser > Navigation > BFCache হিসাবে নির্দিষ্ট করুন।

API এর জন্য সমর্থন দেখান

আপনি কি bfcache notRestoredReasons API ব্যবহার করার পরিকল্পনা করছেন? আপনার পাবলিক সাপোর্ট Chromium টিমকে বৈশিষ্ট্যগুলিকে অগ্রাধিকার দিতে সাহায্য করে এবং অন্যান্য ব্রাউজার বিক্রেতাদের দেখায় যে তাদের সমর্থন করা কতটা গুরুত্বপূর্ণ।

#NotRestoredReasons হ্যাশট্যাগ ব্যবহার করে @ChromiumDev- এ একটি টুইট পাঠান এবং আপনি এটি কোথায় এবং কীভাবে ব্যবহার করছেন তা আমাদের জানান।

সহায়ক লিঙ্ক