बैक/फ़ॉरवर्ड कैश मेमोरी isNoteरिकवरीज़ एपीआई

जानें कि किन नेविगेशन को bfcache का इस्तेमाल करने से ब्लॉक किया गया था और क्यों.

Chris Mills
Barry Pollard

PerformanceNavigationTiming क्लास में जोड़ी गई notRestoredReasons प्रॉपर्टी, इस बारे में जानकारी देती है कि दस्तावेज़ में मौजूद फ़्रेम को नेविगेशन पर bfcache का इस्तेमाल करने से ब्लॉक किया गया था या नहीं. साथ ही, इसकी वजह भी बताती है. डेवलपर इस जानकारी का इस्तेमाल करके, उन पेजों की पहचान कर सकते हैं जिन्हें bfcache के साथ काम करने के लिए अपडेट करना ज़रूरी है. इससे साइट की परफ़ॉर्मेंस बेहतर होती है.

मौजूदा स्थिति

notRestoredReasons एपीआई, Chrome 123 से शिप किया गया है और इसे धीरे-धीरे रोल आउट किया जा रहा है.

कॉन्सेप्ट और इस्तेमाल

आधुनिक ब्राउज़र, इतिहास नेविगेशन के लिए ऑप्टिमाइज़ेशन की सुविधा देते हैं. इसे बैक/फ़ॉरवर्ड कैश मेमोरी (bfcache) कहा जाता है. इससे, जब उपयोगकर्ता किसी ऐसे पेज पर वापस जाते हैं जिस पर वे पहले भी जा चुके हैं, तो पेज तुरंत लोड हो जाता है. पेजों को bfcache में शामिल होने से ब्लॉक किया जा सकता है या bfcache में मौजूद होने के दौरान, उन्हें अलग-अलग वजहों से हटाया जा सकता है. इनमें से कुछ वजहें, किसी खास स्पेसिफ़िकेशन की ज़रूरत होती हैं और कुछ ब्राउज़र के लागू होने से जुड़ी होती हैं.

इससे पहले, डेवलपर के पास यह पता करने का कोई तरीका नहीं था कि फ़ील्ड में उनके पेजों को bfcache का इस्तेमाल करने से क्यों ब्लॉक किया गया था. हालांकि, Chrome के डेवलपर टूल में एक टेस्ट मौजूद था. फ़ील्ड में मॉनिटरिंग की सुविधा चालू करने के लिए, PerformanceNavigationTiming क्लास को notRestoredReasons प्रॉपर्टी के साथ जोड़ा गया है. इससे एक ऑब्जेक्ट मिलता है, जिसमें दस्तावेज़ में मौजूद टॉप फ़्रेम और सभी iframe के बारे में जानकारी होती है:

  • bfcache का इस्तेमाल करने से ब्लॉक किए जाने की वजहें.

  • एचटीएमएल में iframe की पहचान करने के लिए, फ़्रेम id और name जैसी जानकारी.

    इससे डेवलपर, उन पेजों को bfcache के साथ काम करने लायक बनाने के लिए कार्रवाई कर सकते हैं. इससे साइट की परफ़ॉर्मेंस बेहतर होती है.

उदाहरण

PerformanceNavigationTiming इंस्टेंस, Performance.getEntriesByType() और PerformanceObserver जैसी सुविधाओं से मिल सकता है.

उदाहरण के लिए, परफ़ॉर्मेंस टाइमलाइन में मौजूद सभी 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 के यूआरएल को दिखाती है.

इतिहास नेविगेशन को दिखाने वाले 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"
}

सभी क्रॉस-ऑरिजिन iframes के लिए, हम फ़्रेम की reasons वैल्यू के लिए null की रिपोर्ट करते हैं. साथ ही, टॉप-लेवल फ़्रेम में "masked" की वजह दिखेगी. ध्यान दें कि "masked" का इस्तेमाल, उपयोगकर्ता एजेंट से जुड़ी वजहों से भी किया जा सकता है. इसलिए, हो सकता है कि यह हमेशा iframe में किसी समस्या का संकेत न दे.

सुरक्षा और निजता से जुड़ी बातों के बारे में ज़्यादा जानने के लिए, 'एक्सप्लेनर' में सुरक्षा और निजता सेक्शन देखें.

ब्लॉक करने की वजहें

जैसा कि हमने पहले बताया था, ब्लॉक करने की कई वजहें हो सकती हैं:

bfcache का इस्तेमाल न किए जाने की कुछ सामान्य वजहों के उदाहरण यहां दिए गए हैं:

  • unload-listener: पेज पर unload हैंडलर रजिस्टर होता है, जो कुछ ब्राउज़र में bfcache के इस्तेमाल को रोकता है. ज़्यादा जानकारी के लिए, unload इवेंट को बंद करना लेख पढ़ें.
  • response-cache-control-no-store: पेज, no-store को cache-control वैल्यू के तौर पर इस्तेमाल करता है.
  • related-active-contents: पेज को किसी दूसरे पेज से खोला गया था. यह पेज, "डुप्लीकेट टैब" का इस्तेमाल करके खोला गया हो सकता है. हालांकि, इस पेज का रेफ़रंस अब भी मौजूद है.

सुझाव/राय दें या शिकायत करें

Chromium की टीम, bfcache notRestoredReasons API के इस्तेमाल से जुड़े आपके अनुभवों के बारे में जानना चाहती है.

हमें एपीआई के डिज़ाइन के बारे में बताएं

क्या एपीआई में कोई ऐसी चीज़ है जो आपकी उम्मीद के मुताबिक काम नहीं करती? क्या आपके आइडिया को लागू करने के लिए, कोई तरीका या प्रॉपर्टी मौजूद नहीं है? क्या आपका सुरक्षा मॉडल के बारे में कोई सवाल या टिप्पणी है? उससे जुड़े GitHub repo पर, खास समस्या की शिकायत करें या किसी मौजूदा समस्या में अपने सुझाव जोड़ें.

लागू करने से जुड़ी समस्या की शिकायत करना

क्या आपको Chromium को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने का तरीका, खास जानकारी से अलग है? हमारे समस्या ट्रैकर पर गड़बड़ी की शिकायत दर्ज करें. ज़्यादा से ज़्यादा जानकारी दें. साथ ही, समस्या को दोहराने के लिए आसान निर्देश दें और कॉम्पोनेंट को UI > Browser > Navigation > BFCache के तौर पर बताएं. Glitch, तुरंत और आसानी से समस्या की जानकारी शेयर करने के लिए बहुत अच्छा है.

एपीआई के लिए सहायता दिखाना

क्या आपको bfcache notRestoredReasons API का इस्तेमाल करना है? सार्वजनिक तौर पर सहायता करने से, Chromium टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, इससे ब्राउज़र के अन्य वेंडर को यह पता चलता है कि इन सुविधाओं को उपलब्ध कराना कितना ज़रूरी है.

@ChromiumDev को ट्वीट करें. इसके लिए, हैशटैग #NotRestoredReasons का इस्तेमाल करें और हमें बताएं कि इसका इस्तेमाल कहां और कैसे किया जा रहा है.

मदद के लिए लिंक