חדש בגרסה 107 של Chrome

Adriana Jara

דברים שעליך לדעת:

שמי Adriana Jara. בואו נראה מה חדש למפתחים ב-Chrome 107.

מאפיינים חדשים ב-Screen Capture API

בגרסה הזו, Screen Capture API מוסיף מאפיינים חדשים כדי לשפר את חוויות השיתוף של המסך.

הנכס selfBrowserSurface נוסף על ידי DisplayMediaStreamOptions. בעזרת הרמז הזה האפליקציה יכולה להגיד לדפדפן שבקריאה ל-getDisplayMedia() אין לכלול את הכרטיסייה הנוכחית.

// Exclude the streaming tab
const options = {
  selfBrowserSurface: 'exclude',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

היא עוזרת למנוע צילום עצמי בטעות ולהימנע מאפקט "היכל המראות" שראינו בשיחות ועידה בווידאו.

DisplayMediaStreamOptionsיש עכשיו גם את הנכס surfaceSwitching. בנכס הזה נוספת אפשרות לקבוע באופן פרוגרמטי אם ב-Chrome יוצג לחצן למעבר בין כרטיסיות בזמן שיתוף המסך. האפשרויות האלה יועברו אל getDisplayMedia(). הלחצן Share this tab instead מאפשר למשתמשים לעבור לכרטיסייה חדשה בלי לחזור לכרטיסייה של שיחת הוועידה בווידאו או לבחור מתוך רשימה ארוכה של כרטיסיות, אבל ניתן יהיה להציג את ההתנהגות הזו באופן מותנה למקרה שאפליקציית האינטרנט לא תטפל בה.

// Show the switch to this tab button
const options = {
  surfaceSwitching: 'include',
};
const stream = await navigator
                    .mediaDevices
                    .getDisplayMedia(options);

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

לדוגמה, היא יכולה לעזור למנוע שיתוף יתר בטעות, כי שיתוף של כרטיסייה אחת הוא ברירת המחדל. צילומי מסך של ההנחיות של בורר המדיה הישנה והחדשה.

זיהוי משאבים החוסמים עיבוד

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

כעת ה-Performance API כולל את המאפיין generateblockStatus שמספק אות ישיר מהדפדפן שמזהה את המשאבים שמונעים את הצגת הדף עד שהם מורידים אותם.

קטע הקוד כאן מראה כיצד לקבל רשימה של כל המשאבים שלך ולהשתמש במאפיין החדש buildblockStatus כדי לפרט את כל המשאבים שחוסמים.

// Get all resources
const res = window.performance.getEntriesByType('resource');

// Filter to get only the blocking ones
const blocking =   res.filter(({renderBlockingStatus}) =>
      renderBlockingStatus === 'blocking');

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

גרסת המקור לניסיון של PendingBeacon API

ה-PendingBeacon API המוצהר מאפשר לדפדפן לקבוע מתי ה-beacons נשלחים.

איתות Bluetooth הוא חבילת נתונים שנשלחת לשרת קצה עורפי, בלי לצפות לתגובה מסוימת.

לעיתים קרובות, אפליקציות רוצות לשלוח את איתותי Bluetooth האלה בסיום ביקור של משתמש, אבל אין זמן מתאים לביצוע הקריאה הזו. ה-API הזה מאציל את השליחה לדפדפן עצמו, כך שהוא יכול לתמוך במשׂואות רשת (beacon) ב-page unload או ב-page hide, בלי שהמפתח יצטרך להטמיע קריאות שליחה בדיוק ברגעים הנכונים.

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

ופעולות נוספות.

כמובן שיש עוד המון אפשרויות.

  • כותרת ה-http expect-ct הוצאה משימוש.
  • המאפיין rel נתמך עכשיו ברכיבי <form>.
  • בפעם הקודמת הזכרתי אינטרפולציה grid-template, הפעם צריך לכלול אותה.

קריאה נוספת

המאמר הזה מתייחס רק לחלק מההדגשות העיקריות. בקישורים שבהמשך תוכלו למצוא שינויים נוספים בגרסה 107 של Chrome.

להרשמה

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

שמי אדריאנה ג'ארה, וברגע ש-Chrome 108 יושק, אהיה כאן כדי לספר לכם מה חדש ב-Chrome!