जानें कि किन नेविगेशन को बैक-फ़ॉरवर्ड कैश मेमोरी का इस्तेमाल करने से रोका गया है और क्यों.
PerformanceNavigationTiming क्लास में जोड़ी गई notRestoredReasons प्रॉपर्टी से यह जानकारी मिलती है कि दस्तावेज़ में मौजूद फ़्रेम को, नेविगेशन में bfcache का इस्तेमाल करने से ब्लॉक किया गया है या नहीं. साथ ही, इससे यह जानकारी भी मिलती है कि ऐसा क्यों हुआ. डेवलपर इस जानकारी का इस्तेमाल उन पेजों का पता लगाने के लिए कर सकते हैं जिन्हें बैक-फ़ॉरवर्ड कैश मेमोरी के साथ काम करने के लिए अपडेट करने की ज़रूरत है. इससे साइट की परफ़ॉर्मेंस बेहतर होती है.
मौजूदा स्थिति
| चरण | स्थिति |
|---|---|
| 1. जानकारी बनाएं | पूरा हुआ |
| 2. खास जानकारी का शुरुआती ड्राफ़्ट बनाएं | Not started |
| 3. लोगों की राय जानें और डिज़ाइन को बेहतर बनाएं | प्रोसेस जारी है |
| 4. ऑरिजिन ट्रायल | शुरू की गई |
| 5. लॉन्च करना | Not started |
bfcache notRestoredReasons API आज़माएं
वर्शन 109 से, bfcache notRestoredReasons API ऑरिजिन ट्रायल के तौर पर उपलब्ध है. इस सुविधा के ChromeStatus.com सुविधा पेज पर जाकर, इस सुविधा के रिलीज़ शेड्यूल पर अपडेट की गई जानकारी पाएं. वर्शन के रिलीज़ की तारीखों के बारे में जानने के लिए, Chrome का रोडमैप देखें.
bfcache notRestoredReasons API को आज़माने के लिए, ऑरिजिन ट्रायल के लिए रजिस्टर करें और अपने एक्सपेरिमेंट में इसका इस्तेमाल करें. रजिस्टर करने के बाद, टोकन इस्तेमाल करने का तरीका जानने के लिए, ऑरिजिन ट्रायल में हिस्सा लेना लेख पढ़ें.
सिद्धांत और इस्तेमाल
आधुनिक ब्राउज़र, इतिहास नेविगेशन के लिए एक ऑप्टिमाइज़ेशन सुविधा उपलब्ध कराते हैं. इस सुविधा को बैक/फ़ॉरवर्ड कैश मेमोरी (bfcache) कहा जाता है. इससे, जब उपयोगकर्ता किसी ऐसे पेज पर वापस जाते हैं जिस पर वे पहले जा चुके हैं, तो ऐप्लिकेशन तुरंत लोड हो जाता है. पेज को बैक-फ़ॉरवर्ड कैश मेमोरी में सेव करने से रोका जा सकता है या पेज को कैश मेमोरी में सेव किए जाने पर, अलग-अलग वजहों से हटाया जा सकता है. इनमें से कुछ, खास जानकारी के हिसाब से ज़रूरी होते हैं और कुछ ब्राउज़र पर लागू करने के लिए भी ज़रूरी होते हैं.
इससे पहले, डेवलपर के पास यह पता लगाने का कोई तरीका नहीं था कि उनके पेजों को फ़ील्ड में bfcache का इस्तेमाल करने से क्यों ब्लॉक किया गया था. हालांकि, Chrome Dev टूल में एक टेस्ट किया जा रहा था. फ़ील्ड में मॉनिटरिंग की सुविधा चालू करने के लिए, PerformanceNavigationTiming क्लास को notRestoredReasons प्रॉपर्टी को शामिल करने के लिए बढ़ा दिया गया है. इससे एक ऑब्जेक्ट दिखता है, जिसमें दस्तावेज़ में मौजूद सभी फ़्रेम से जुड़ी जानकारी होती है:
- फ़्रेम
idऔरnameजैसी जानकारी, ताकि उन्हें एचटीएमएल में पहचानने में मदद मिल सके. - उन्हें bfcache का इस्तेमाल करने से ब्लॉक किया गया था या नहीं.
उन्हें 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 प्रॉपर्टी इस स्ट्रक्चर वाला एक ऑब्जेक्ट दिखाती है. इससे, टॉप-लेवल फ़्रेम की ब्लॉक की गई स्थिति के बारे में पता चलता है:
{
blocked: true,
children: [],
id: "",
name: "",
reasons: [ "Internal Error", "Unload handler" ],
src: "",
url: "a.com"
}
प्रॉपर्टी नीचे दी गई हैं:
blocked- बूलियन वैल्यू से यह पता चलता है कि नेविगेट किए गए पेज को, bfcache (
true) का इस्तेमाल करने से ब्लॉक किया गया है या नहीं (false). children- ऑब्जेक्ट का कलेक्शन, जिसमें टॉप लेवल फ़्रेम में एम्बेड किए गए किसी भी फ़्रेम की ब्लॉक की गई स्थिति के बारे में बताया गया है. हर ऑब्जेक्ट का स्ट्रक्चर, पैरंट ऑब्जेक्ट की तरह ही होता है. इस तरह, एम्बेड किए गए फ़्रेम के किसी भी लेवल को ऑब्जेक्ट के अंदर बार-बार दिखाया जा सकता है. अगर फ़्रेम में कोई चाइल्ड नहीं है, तो अरे खाली हो जाएगा.
id- फ़्रेम की
idएट्रिब्यूट की वैल्यू दिखाने वाली स्ट्रिंग (उदाहरण के लिए,<iframe id="foo" src="...">). अगर फ़्रेम में कोईidनहीं है, तो वैल्यू एक खाली स्ट्रिंग होगी. name- फ़्रेम की
nameएट्रिब्यूट की वैल्यू दिखाने वाली स्ट्रिंग (उदाहरण के लिए,<iframe name="bar" src="...">). अगर फ़्रेम में कोईnameनहीं है, तो वैल्यू एक खाली स्ट्रिंग होगी. reasons- स्ट्रिंग का यह कलेक्शन, हर उस वजह को दिखाता है जिसकी वजह से नेविगेट किए गए पेज को bfcache का इस्तेमाल करने से ब्लॉक किया गया था. ब्लॉक करने की कई वजहें हो सकती हैं. ज़्यादा जानकारी के लिए, नीचे दिया गया ब्लॉक करने की वजहें सेक्शन देखें.
src- फ़्रेम के सोर्स का पाथ दिखाने वाली स्ट्रिंग (उदाहरण के लिए,
<iframe src="b.html">). अगर फ़्रेम में कोईsrcनहीं है, तो वैल्यू एक खाली स्ट्रिंग होगी. url- नेविगेट किए गए पेज का यूआरएल दिखाने वाली स्ट्रिंग.
इतिहास नेविगेशन नहीं दिखाने वाले PerformanceNavigationTiming ऑब्जेक्ट के लिए, notRestoredReasons प्रॉपर्टी null दिखाएगी. इससे यह पता करने में मदद मिलती है कि bfcache किसी खास नेविगेशन के लिए काम का नहीं है या नहीं. ऐसा इसलिए है, क्योंकि notRestoredReasons के काम न करने पर, यह undefined के तौर पर दिखता है.
एक ही ऑरिजिन वाले फ़्रेम में बैक-फ़ॉरवर्ड कैश मेमोरी को ब्लॉक करने की शिकायत करना
जब किसी पेज में एक जैसे ऑरिजिन वाले फ़्रेम एम्बेड किए जाते हैं, तो दिखाए गए notRestoredReasons वैल्यू में children प्रॉपर्टी के अंदर एक ऑब्जेक्ट शामिल होगा. इस ऑब्जेक्ट से, एम्बेड किए गए हर फ़्रेम की ब्लॉक की गई स्थिति के बारे में पता चलता है.
उदाहरण के लिए:
{
blocked: false,
children: [
{ url: "a.com", src: "b.a.com", id: "b", name: "b", blocked: false, reasons: [], children: [] },
{ url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "BroadcastChannel" ], children: [] },
{ url: "a.com", src: "d.a.com", id: "d", name: "d", blocked: false, reasons: [], children: [] }
],
id: "",
name: "",
reasons: [],
src: "",
url:"a.com"
}
क्रॉस-ऑरिजिन फ़्रेम में बैक-फ़ॉरवर्ड कैश मेमोरी को ब्लॉक करने की शिकायत करना
जब किसी पेज में क्रॉस-ऑरिजिन फ़्रेम एम्बेड किए जाते हैं, तो हम क्रॉस-ऑरिजिन जानकारी लीक से बचने के लिए, उनके बारे में शेयर की गई जानकारी की मात्रा को सीमित कर देते हैं. हम सिर्फ़ वह जानकारी शामिल करते हैं जिसके बारे में बाहरी पेज को पहले से पता है. साथ ही, हम यह भी बताते हैं कि क्रॉस-ऑरिजिन सबट्री ने bfcache को ब्लॉक किया है या नहीं. हम सबट्री के निचले लेवल के बारे में, ब्लॉक करने की वजह या जानकारी शामिल नहीं करते हैं. भले ही, कुछ सब-लेवल एक ही मूल के हों.
उदाहरण के लिए:
{
blocked: false,
children: [
{ url: "a.com", src: "c.a.com", id: "c", name: "c", blocked: true, reasons: [ "ScreenReader" ], children: [] },
/* cross-origin frame */
{ url: "", src: "b.com", id: "d", name: "d", blocked: true, reasons: [], children: [] }
],
id: "",
name: "",
reasons: [],
src: "",
url:"a.com"
}
अगर कई क्रॉस-ऑरिजिन फ़्रेम की वजह से ऐप्लिकेशन को ब्लॉक किया जा रहा है, तो हम रैंडम तरीके से एक क्रॉस-ऑरिजिन iframe चुनते हैं. साथ ही, हमें यह बताते हैं कि उसने बैक-फ़ॉरवर्ड कैश मेमोरी को ब्लॉक किया है या नहीं. बाकी फ़्रेम के लिए, हम blocked की वैल्यू के लिए null को रिपोर्ट करते हैं. इसका मकसद, बुरे मकसद से काम करने वाले लोगों को किसी ऐसी साइट पर उपयोगकर्ता की स्थिति का पता लगाने से रोकना है जिसे वे कंट्रोल नहीं करते. इसके लिए, तीसरे पक्ष के कई फ़्रेम को एक पेज में एम्बेड करके, हर एक पेज से ब्लॉक करने वाली जानकारी की तुलना की जाती है.
{
blocked: false,
children: [
/* cross-origin frames */
{url: "", src: "b.com", id: "b", name: "b", blocked: null, reasons: [], children: []},
{url: "", src: "c.com", id: "c", name: "c", blocked: true, reasons: [], children: []},
{url: "", src: "d.com", id: "d", name: "d", blocked: null, reasons: [], children: []}
]
id: "",
name: "",
reasons: [],
src: "",
url:"a.com"
}
सुरक्षा और निजता से जुड़ी बातों के बारे में ज़्यादा जानने के लिए, जानकारी में सुरक्षा और निजता सेक्शन देखें.
ब्लॉक करने की वजहें
जैसा कि हमने पहले बताया था, ब्लॉक करने की कई वजहें हो सकती हैं. हमने एक आसान स्प्रेडशीट बनाई है, जिसमें प्रॉडक्ट की सभी वजहों और उनका मतलब बताया गया है.
अलग-अलग तरह की कुछ मुख्य कैटगरी के बारे में बताना फ़ायदेमंद होता है:
Circumstantial: इससे ब्लॉक करने की उन वजहों के बारे में पता चलता है जो सीधे तौर पर डेवलपर के पेज कोड से जुड़ी हुई नहीं हैं. उदाहरण के लिए, संबंधित कॉम्पोनेंट बंद हो गया, लोड होने की प्रोसेस में कोई गड़बड़ी हुई, पेज को कैश मेमोरी में सेव नहीं किया जा सकता, मेमोरी कम होने की वजह से bfcache बंद हो गया है या किसी सर्विस वर्कर ने पेज पर कोई ऐसी गड़बड़ी की है जिसकी वजह से वह कैश मेमोरी में सेव नहीं हो पा रहा.Extensions: एक्सटेंशन से जुड़े मैसेज की कुछ दूसरी वजहें हैं. आम तौर पर, हम "एक्सटेंशन" की वजह में कुछ अलग-अलग वजहों को जोड़ते हैं. हम एक्सटेंशन से जुड़ी ब्लॉक करने की वजहों के बारे में जान-बूझकर कुछ नहीं बताना चाहते, क्योंकि हम इस बारे में ज़्यादा जानकारी नहीं देना चाहते कि उपयोगकर्ता ने कौनसे एक्सटेंशन इंस्टॉल किए हैं, पेज पर कौनसे एक्सटेंशन चालू हैं, वे क्या कर रहे हैं वगैरह.PageSupportNeeded: डेवलपर का कोड ऐसी वेब प्लैटफ़ॉर्म सुविधा का इस्तेमाल कर रहा है जो bfcache ब्लॉक नहीं है. हालांकि, अभी यह bfcache ब्लॉक होने की स्थिति में है. उदाहरण के लिए, फ़िलहाल पेज पर रजिस्टर किए गए लिसनर के साथ BroadcastChannel या ओपन IndexedDB कनेक्शन मौजूद है. इसके अलावा, इस पेज ने एकunloadहैंडलर भी रजिस्टर किया है. इस वजह से, फ़िलहाल कुछ ब्राउज़र में bfcache के इस्तेमाल को रोका जा रहा है.SupportPending: डेवलपर का कोड, वेब प्लैटफ़ॉर्म की ऐसी सुविधा का इस्तेमाल कर रहा है जो पेज को बैक-फ़ॉरवर्ड कैश मेमोरी की सुविधा से अलग कर रही है. उदाहरण के लिए, Web Serial API, Web Authentication API, File System Access API या Media Session API. इसके अलावा, यह पेजCache-Control: no-storeका इस्तेमाल कर रहा है. इस वजह से, फ़िलहाल कुछ ब्राउज़र में bfcache के इस्तेमाल को रोका जा रहा है. इस कैटगरी का इस्तेमाल किसी ऐसे टूल की मौजूदगी की शिकायत करने के लिए भी किया जाता है जो पेज के बाहर भी मौजूद होता है. यह पेज, बैक-फ़ॉरवर्ड कैश मेमोरी को ब्लॉक करता है. जैसे, स्क्रीन रीडर या Chrome पासवर्ड मैनेजर.
सुझाव/राय दें या शिकायत करें
Chromium की टीम, bfcache notRestoredReasons API के साथ आपके अनुभवों के बारे में जानना चाहती है.
हमें इस एपीआई के डिज़ाइन के बारे में बताएं
क्या एपीआई में ऐसा कुछ है जो आपकी उम्मीद के मुताबिक काम नहीं करता? या ऐसा नहीं है कि अपना आइडिया लागू करने के लिए, ऐसे तरीके या प्रॉपर्टी मौजूद नहीं हैं जिनकी ज़रूरत आपको है? क्या सुरक्षा मॉडल के बारे में आपका कोई सवाल या टिप्पणी है? इससे जुड़े [GitHub रेपो][feedback] के बारे में कोई खास समस्या बताएं या किसी मौजूदा समस्या पर अपने विचार जोड़ें.
लागू करने से जुड़ी समस्या की शिकायत करें
क्या आपको Chromium को लागू करने में कोई गड़बड़ी मिली? या क्या इसे लागू करने की प्रक्रिया खास जानकारी से अलग है?
new.crbug.com पर गड़बड़ी की शिकायत करें. जितना हो सके ज़्यादा से ज़्यादा जानकारी दें, पेज को फिर से बनाने के आसान निर्देश दें और कॉम्पोनेंट के बारे में UI > Browser > Navigation > bfcache बताएं.
Glitch का इस्तेमाल करके, तुरंत और आसान तरीकों को शेयर किया जा सकता है.
एपीआई के साथ काम करता है
क्या आपको bfcache notRestoredReasons API का इस्तेमाल करना है? आपकी सार्वजनिक सहायता से, Chromium की टीम को सुविधाओं को प्राथमिकता देने में मदद मिलती है. साथ ही, वह दूसरे ब्राउज़र वेंडर को दिखाती है कि उनकी मदद करना कितना ज़रूरी है.
हैशटैग #NotRestoredReasons का इस्तेमाल करके @ChromiumDev को एक ट्वीट भेजें
और हमें बताएं कि आप उसका इस्तेमाल कहां और कैसे कर रहे हैं.