ה-API של 'מטמון לדף הקודם/הבא' notRestoredReasons ב-API

אפשר לבדוק אילו ניווטים נחסמו לשימוש במטמון לדף הקודם/הבא ולמה.

Chris Mills
Barry Pollard

הנכס notRestoredReasons, שהתווסף למחלקה PerformanceNavigationTiming, מדווח מידע על האופן שבו המסגרות שנמצאות במסמך חסומות לשימוש במטמון לדף הקודם/הבא בניווט והסיבה לכך. המפתחים יכולים להשתמש במידע הזה כדי לזהות דפים שדורשים עדכונים כדי שיהיו תואמים למטמון לדף הקודם/הבא, וכך לשפר את ביצועי האתר.

הסטטוס הנוכחי

ה-API של notRestoredReasons נשלח מ-Chrome 123 ואנחנו משיקים אותו בהדרגה.

מושגים ושימוש

דפדפנים מודרניים מספקים תכונת אופטימיזציה לניווט בהיסטוריה שנקראת מטמון לדף הקודם/הבא (bfcache). כך מתאפשרת טעינה מיידית כשמשתמשים חוזרים לדף שהם כבר ביקרו בו. אפשר לחסום דפים כך שלא יוכלו להיכנס למטמון לדף הקודם/הבא, או להוציא אותם מהמטמון לדף הקודם/הבא מסיבות שונות, חלקן בהתאם למפרט וחלקן ספציפיות להטמעות של הדפדפן.

בעבר, לא הייתה למפתחים דרך לברר למה השימוש במטמון לדף הקודם/הבא נחסם בדפים שלהם, אבל הייתה בדיקה בכלים למפתחים של Chrome. כדי להפעיל מעקב בשדה, הורחב המחלקה PerformanceNavigationTiming כך שתכלול את המאפיין notRestoredReasons. הפעולה הזו מחזירה אובייקט שמכיל מידע קשור במסגרת העליונה ואת כל מסגרות ה-iframe שבמסמך:

  • הסיבות לחסימת השימוש שלהם במטמון לדף הקודם/הבא.

  • פרטים כמו מסגרת id ו-name, שיעזרו לזהות מסגרות iframe ב-HTML.

    כך מפתחים יכולים לנקוט פעולה כדי להתאים את הדפים האלה למטמון לדף הקודם/הבא, וכך לשפר את ביצועי האתר.

דוגמאות

אפשר לקבל מופע של 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
מערך מחרוזות, שכל אחת מהן מייצגת את הסיבה לכך שדף המעבר נחסם לשימוש במטמון לדף הקודם/הבא. יכולות להיות סיבות רבות ושונות לחסימה. פרטים נוספים זמינים בקטע סיבות לחסימה.
src
מחרוזת שמייצגת את הנתיב למקור של המסגרת (לדוגמה, <iframe src="b.html">). אם למסגרת אין src, הערך יהיה מחרוזת ריקה. עבור הדף ברמה העליונה הוא null.
url
מחרוזת שמייצגת את כתובת ה-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 במסגרות ממקורות שונים

כשבדף כלשהו מוטמעות פריימים ממקורות שונים, אנחנו מגבילים את כמות המידע שמשותף לגביהם כדי למנוע הדלפת מידע ממקורות שונים. אנחנו כוללים רק מידע שהדף החיצוני כבר יודע, והאם עץ המשנה ממקורות שונים חסם את המטמון לדף הקודם/הבא או לא. אנחנו לא כוללים סיבות לחסימה או מידע על רמות נמוכות יותר של עץ המשנה (גם אם חלק מרמות המשנה הן מאותו המקור).

למשל:

{
  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 ממקורות שונים, אנחנו מדווחים על null עבור הערך reasons של המסגרת, והמסגרת ברמה העליונה תציג את הסיבה "masked". שימו לב ש-"masked" עשוי לשמש גם מסיבות ספציפיות לסוכן המשתמש, ולכן לא תמיד תופיע בעיה ב-iframe.

לפרטים נוספים על שיקולי אבטחה ופרטיות, אפשר לעיין בקטע אבטחה ופרטיות בהודעת ההסבר.

סיבות לחסימה

כפי שציינו קודם, יש סיבות רבות ושונות לחסימה:

ריכזנו כאן דוגמאות לכמה מהסיבות הנפוצות ביותר לכך שאי אפשר להשתמש במטמון לדף הקודם/הבא:

  • unload-listener: הדף רושם handler של unload, שמונע שימוש במטמון לדף הקודם/הבא בדפדפנים מסוימים. מידע נוסף זמין במאמר הוצאה משימוש של אירוע הסרת הנתונים שנטענו.
  • response-cache-control-no-store: הדף משתמש ב-no-store כערך cache-control.
  • related-active-contents: הדף נפתח מדף אחר (באמצעות 'כרטיסייה כפולה') שעדיין יש בו הפניה לדף הזה.

משוב

צוות Chromium רוצה לשמוע על חוויית השימוש שלך ב-API notRestoredReasons של המטמון לדף הקודם/הבא.

מתארים את עיצוב ה-API

האם יש משהו ב-API שלא פועל כצפוי? או שיש שיטות או מאפיינים חסרים שאתם צריכים ליישם את הרעיון שלכם? יש לכם שאלה או הערה לגבי מודל האבטחה? דווחו על בעיית מפרט במאגר GitHub המתאים, או הוסיפו את דעתכם לגבי בעיה קיימת.

דיווח על בעיה בהטמעה

מצאת באג בהטמעה של Chromium? או שההטמעה שונה מהמפרט? דווחו על באג בכלי למעקב אחר בעיות. חשוב לכלול כמה שיותר פרטים, הוראות פשוטות לשחזור הקובץ ולציין את הרכיב כ-UI > Browser > Navigation > BFCache. Glitch היא אפשרות טובה לשיתוף תגובות מהירות וקלות.

הצגת תמיכה ב-API

האם בכוונתך להשתמש ב-API notRestoredReasons של bfcache? התמיכה הציבורית שלכם עוזרת לצוות Chromium לתעדף פיצ'רים ומראה לספקי דפדפנים אחרים עד כמה חשוב לתמוך בהם.

שלחו ציוץ אל @ChromiumDev בעזרת ה-hashtag #NotRestoredReasons, וספרו לנו איפה אתם משתמשים בו ואיך אתם משתמשים בו.

קישורים שימושיים