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

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

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

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

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

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

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

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

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

  • কেন তারা bfcache ব্যবহার থেকে ব্লক করা হয়েছে.

  • বিশদ বিবরণ যেমন ফ্রেম 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
একটি স্ট্রিং যা নেভিগেট করা পৃষ্ঠা/iframe-এর 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 ব্যবহার প্রতিরোধ করে। আরো তথ্যের জন্য আনলোড ইভেন্ট অবমূল্যায়ন দেখুন.
  • response-cache-control-no-store : পৃষ্ঠাটি cache-control মান হিসাবে no-store ব্যবহার করে।
  • related-active-contents : পৃষ্ঠাটি অন্য পৃষ্ঠা থেকে খোলা হয়েছিল (হয় "ডুপ্লিকেট ট্যাব" ব্যবহার করে) যার এখনও এই পৃষ্ঠাটির একটি রেফারেন্স রয়েছে।

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

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

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

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

বাস্তবায়নের সাথে একটি সমস্যা রিপোর্ট করুন

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

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

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

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

সহায়ক লিঙ্ক