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

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

Chris Mills

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

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

שלב סטטוס
1. יצירת הסבר הושלם
2. יצירת טיוטה ראשונית של מפרט לא התחיל
3. אוספים משוב וחוזרים על העיצוב בתהליך
4. גרסת מקור לניסיון התחיל
5. הפעלה לא התחיל

כדאי לנסות את ה-API של bfcache notRestoredReasons

החל מגרסה 109, ה-API של bfcache notRestoredReasons זמין כגרסת מקור לניסיון ב-Chromium. מידע עדכני על לוח הזמנים לפרסום של התכונה הזו זמין בדף התכונה ChromeStatus.com (אפשר לעיין במפת הדרכים של Chrome להצגת תאריכי ההפצה של הגרסה).

אפשר לנסות את ה-API של notRestoredReasons ל-bfcache. לשם כך צריך להירשם לגרסת המקור לניסיון ולהשתמש בו בניסויים. במאמר השתתפות בגרסת מקור לניסיון מוסבר איך להשתמש באסימון אחרי ההרשמה.

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

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

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

  • פרטים כמו מסגרת id ו-name, שיעזרו לזהות אותם ב-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 מחזיר אובייקט עם המבנה הבא, שמייצג את המצב החסום של המסגרת ברמה העליונה:

{
  blocked: true,
  children: [],
  id: "",
  name: "",
  reasons: [ "Internal Error", "Unload handler" ],
  src: "",
  url: "a.com"
}

המאפיינים הם:

blocked
ערך בוליאני שמציין אם בדף שבו מתבצע ניווט אין אפשרות להשתמש במטמון לדף הקודם/הבא (true) או לא (false).
children
מערך אובייקטים שמייצג את המצב החסום של פריימים שמוטמעים במסגרת ברמה העליונה. לכל אובייקט יש מבנה זהה לאובייקט ההורה - כך, כל מספר רמות של פריימים מוטמעים ניתן לייצג בתוך האובייקט באופן רקורסיבי. אם למסגרת אין צאצאים, המערך יהיה ריק.
id
מחרוזת שמייצגת את ערך המאפיין id של המסגרת (לדוגמה <iframe id="foo" src="...">). אם למסגרת אין id, הערך יהיה מחרוזת ריקה.
name
מחרוזת שמייצגת את ערך המאפיין name של המסגרת (לדוגמה <iframe name="bar" src="...">). אם למסגרת אין name, הערך יהיה מחרוזת ריקה.
reasons
מערך של מחרוזות מייצגות את הסיבה לכך שהדף שאליו בוצע ניווט נחסם לשימוש במטמון לדף הקודם/הבא. עשויות להיות סיבות רבות ושונות לחסימה. למידע נוסף, ניתן לעיין בקטע סיבות לחסימה בהמשך.
src
מחרוזת שמייצגת את הנתיב למקור המסגרת (לדוגמה <iframe src="b.html">). אם למסגרת אין src, הערך יהיה מחרוזת ריקה.
url
מחרוזת שמייצגת את כתובת ה-URL של הדף שאליו מתבצע ניווט.

לאובייקטים מסוג PerformanceNavigationTiming שלא מייצגים ניווטים בהיסטוריה, המאפיין notRestoredReasons יחזיר null. זו שיטה שימושית שמאפשרת לקבוע אם המטמון לדף הקודם/הבא לא רלוונטי לניווט מסוים, בניגוד ל-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"
}

דיווח על חסימה של מטמון לדף הקודם/הבא במסגרות ממקורות שונים

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

למשל:

{
  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 אחד ממקורות שונים ומדווחים אם הוא חסם את המטמון לדף הקודם/הבא. לגבי שאר המסגרות, נדווח על null עבור הערך blocked. המטרה היא למנוע מגורמים זדוניים להסיק מידע על מצב המשתמש באתרים שאינם בשליטתם, על ידי הטמעת מספר מסגרות של צד שלישי בדף והשוואה של נתוני החסימה מכל אחת מהן.

{
  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 מושבת עקב מחסור בזיכרון או שה-Service Worker ביצע בדף פעולה שמונעת את שמירתו במטמון.
  • Extensions: יש כמה סיבות שונות להודעות שקשורות לתוספים. באופן כללי, אנחנו משלבים לא מעט סיבות שונות תחת הסיבה "תוספים". אנחנו ערניים באופן מכוון לגבי סיבות החסימה הקשורות לתוספים, כי אנחנו לא רוצים למסור יותר מדי מידע על התוספים שהמשתמש התקין, אילו תוספים פעילים בדף, מה הוא עושה וכו'.
  • PageSupportNeeded: הקוד של המפתח משתמש בתכונה של פלטפורמת אינטרנט, שאחרת לא חוסמת bfcache, אבל הוא נמצא כרגע במצב שבו מוגדרת חסימה של bfcache. לדוגמה, בדף יש כרגע BroadcastChannel עם פונקציות listener רשומות, או חיבור IndexedDB פתוח. לחלופין, בדף רשום handler של unload, שכרגע שמונע שימוש במטמון לדף הקודם/הבא בדפדפנים מסוימים.
  • SupportPending: הקוד של המפתח משתמש בתכונה של פלטפורמת אינטרנט שמונעת את הצגת הדף במטמון לדף הקודם/הבא, לדוגמה Web Serial API , Web Authentication API, File System Access API או Media Session API. או שנעשה בדף שימוש ב-Cache-Control: no-store, שכרגע מונע שימוש במטמון לדף הקודם/הבא בדפדפנים מסוימים. הקטגוריה הזו משמשת גם לדיווח על הנוכחות של כלי מחוץ לדף עצמו שחוסם את המטמון לדף הקודם/הבא, כמו קורא מסך או מנהל הסיסמאות של Chrome.

משוב

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

לספר לנו על עיצוב ה-API

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

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

האם מצאת באג בהטמעה של Chromium? או שההטמעה שונה מהמפרט? דווחו על באג בכתובת new.crbug.com. הקפידו לכלול כמה שיותר פרטים, הוראות פשוטות לשחזור וציינו את הרכיב בתור UI > Browser > Navigation > bfcache. גליץ' הוא כלי מעולה לשיתוף גיבויים מהירים וקלים.

הבעת תמיכה ב-API

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

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

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