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

पता लगाएं कि किन नेविगेशन को बैक-फ़ॉरवर्ड कैश मेमोरी का इस्तेमाल करने से ब्लॉक किया गया था और क्यों.

Chris Mills

Barry Pollard

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

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

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

ध्यान दें: ऑरिजिन ट्रायल के बाद से हुए बदलाव.

Chrome 109 से 114 तक यह एपीआई, ऑरिजिन ट्रायल के तौर पर उपलब्ध था. मानकीकरण की प्रोसेस के दौरान मिले सुझावों के बाद, शिप किए गए एपीआई में कई बदलाव किए गए थे:

blocked बूलियन (पिछले वर्शन में इसका नाम preventedBackForwardCache था) से पता चलता है कि bfcache को ब्लॉक किया गया था या नहीं. इसे इसलिए हटा दिया गया है, क्योंकि ब्लॉक करने की वजहों से इसका पता लगाया जा सकता है.
reasons वैल्यू, पहले स्ट्रिंग की ऐरे थी, लेकिन अब यह ऑब्जेक्ट की ऐरे है.
टेक्स्ट अपडेट करने की वजह (किसी खास टेक्स्ट पर निर्भर न रहने के बारे में जानकारी देखें).
खाली एट्रिब्यूट को खाली स्ट्रिंग ("") के तौर पर दिखाया जाता था, लेकिन अब इन्हें null के तौर पर दिखाया जाता है.

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

मॉडर्न ब्राउज़र, इतिहास में नेविगेट करने के लिए ऑप्टिमाइज़ेशन की सुविधा देते हैं. इसे बैक/फ़ॉरवर्ड कैश मेमोरी (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: यह स्ट्रिंग, नेविगेट किए गए पेज/आईफ़्रेम के यूआरएल को दिखाती है.

ऐसे 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"
}

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

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

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

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

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

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

चेतावनी: वजह के टेक्स्ट में बदलाव हो सकता है. ऐसा तब होता है, जब ज़्यादा वजहें जोड़ी जाती हैं और हटाई जाती हैं या वजह को ज़्यादा साफ़ तौर पर बताया जाता है. उदाहरण के लिए, Chrome 123 में unload-listener को unload-handler के तौर पर दिखाया जाता है.

इस एपीआई का इस्तेमाल करने वाले लोगों को, वजहों के लिए खास शब्दों पर निर्भर नहीं रहना चाहिए. साथ ही, उन्हें नई वजहों को जोड़ने और हटाने के लिए तैयार रहना चाहिए.

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

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

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

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

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

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

एपीआई के लिए अपना सपोर्ट दिखाना

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

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