Back/Forward cache notRestoredReasons API

پیدا کنید کدام پیمایش‌ها از استفاده از bfcache مسدود شده‌اند و چرا.

کریس میلز
بری پولارد

ویژگی notRestoredReasons که به کلاس PerformanceNavigationTiming اضافه شده است، اطلاعاتی را در مورد اینکه آیا فریم های موجود در سند از استفاده از bfcache در مسیریابی مسدود شده اند یا خیر، گزارش می دهد. توسعه دهندگان می توانند از این اطلاعات برای شناسایی صفحاتی که نیاز به به روز رسانی دارند استفاده کنند تا آنها را با bfcache سازگار کند و در نتیجه عملکرد سایت را بهبود بخشد.

وضعیت فعلی

notRestoredReasons API از Chrome 123 ارسال شده است و به تدریج عرضه می شود.

مفاهیم و کاربرد

مرورگرهای مدرن یک ویژگی بهینه‌سازی برای پیمایش تاریخ ارائه می‌دهند که کش عقب/ جلو (bfcache) نامیده می‌شود. هنگامی که کاربران به صفحه‌ای که قبلاً بازدید کرده‌اند برمی‌گردند، این یک تجربه بارگذاری فوری را امکان‌پذیر می‌کند. صفحات را می توان از ورود به bfcache مسدود کرد یا به دلایل مختلف در bfcache خارج شد، برخی از آنها توسط یک مشخصات و برخی خاص به پیاده سازی مرورگر نیاز دارند.

پیش از این، هیچ راهی برای توسعه‌دهندگان وجود نداشت که بفهمند چرا صفحات آنها از استفاده از bfcache در فیلد مسدود شده است، اگرچه آزمایشی در ابزار توسعه کروم وجود داشت. برای فعال کردن نظارت در فیلد، کلاس PerformanceNavigationTiming گسترش یافته است تا ویژگی notRestoredReasons را شامل شود. این یک شی حاوی اطلاعات مرتبط در فریم بالایی و تمام iframe های موجود در سند را برمی گرداند:

  • دلایلی که چرا آنها از استفاده از bfcache مسدود شدند.

  • جزئیاتی مانند id قاب و name ، برای کمک به شناسایی iframes در HTML.

    این به توسعه دهندگان اجازه می دهد تا برای سازگار کردن آن صفحات با 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
رشته ای که نشان دهنده 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 در فریم های متقاطع را گزارش کنید

هنگامی که یک صفحه دارای فریم های متقاطع است، ما مقدار اطلاعات به اشتراک گذاشته شده در مورد آنها را محدود می کنیم تا از افشای اطلاعات متقاطع جلوگیری کنیم. ما فقط اطلاعاتی را درج می‌کنیم که صفحه بیرونی از قبل می‌داند، و اینکه آیا درخت فرعی cross-origin 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 handler را ثبت می کند که از استفاده bfcache در مرورگرهای خاص جلوگیری می کند. برای اطلاعات بیشتر به لغو رویداد تخلیه مراجعه کنید.
  • response-cache-control-no-store : صفحه از no-store به عنوان مقدار cache-control استفاده می کند.
  • related-active-contents : صفحه از صفحه دیگری باز شد (یا با استفاده از "برگه تکراری") که هنوز به این صفحه اشاره دارد.

بازخورد

تیم Chromium می‌خواهد در مورد تجربیات شما با bfcache notRestoredReasons API بشنود.

در مورد طراحی API به ما بگویید

آیا چیزی در مورد API وجود دارد که آنطور که انتظار داشتید کار نمی کند؟ یا آیا روش ها یا ویژگی هایی وجود دارد که برای اجرای ایده خود به آنها نیاز دارید؟ سوال یا نظری در مورد مدل امنیتی دارید؟ یک مشکل مشخصات را در مخزن GitHub مربوطه ثبت کنید یا افکار خود را به یک مشکل موجود اضافه کنید.

گزارش مشکل در اجرا

آیا با اجرای Chromium اشکالی پیدا کردید؟ یا اجرا با مشخصات متفاوت است؟ یک اشکال در ردیاب مشکل ما ثبت کنید. اطمینان حاصل کنید که تا جایی که می توانید جزئیات، دستورالعمل های ساده برای بازتولید را وارد کرده و جزء را به صورت UI > Browser > Navigation > BFCache مشخص کنید. Glitch برای به اشتراک گذاری سریع و آسان تکرارها عالی عمل می کند.

پشتیبانی از API را نشان دهید

آیا قصد دارید از bfcache notRestoredReasons API استفاده کنید؟ پشتیبانی عمومی شما به تیم Chromium کمک می‌کند ویژگی‌ها را اولویت‌بندی کند و به سایر فروشندگان مرورگر نشان می‌دهد که چقدر حمایت از آنها ضروری است.

با استفاده از هشتگ #NotRestoredReasons یک توییت به @ChromiumDev ارسال کنید و به ما اطلاع دهید که کجا و چگونه از آن استفاده می کنید.

لینک های مفید