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

देखें कि किन नेविगेशन को bfcache का इस्तेमाल करने से रोका गया है और क्यों.

Chris Mills
Barry Pollard

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

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

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

सिद्धांत और उनका इस्तेमाल

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

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

  • उन्हें bfcache का इस्तेमाल करने से क्यों रोका गया, इसकी वजहें.

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

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

उदाहरण

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 होना इस बात की जानकारी नहीं देता है कि बैक-कैश मेमोरी का इस्तेमाल किया गया था या नहीं किया गया था. इसके लिए, आपको 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"
}

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

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

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

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

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

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

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

Chromium की टीम, bfcache notRestoredReasons API के बारे में आपके अनुभव जानना चाहती है.

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

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

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

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

यह एपीआई काम करता है

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

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

मददगार लिंक