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

Adriana Jara

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

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

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

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

הנכס DisplayMediaStreamOptions הוסיף את הנכס selfBrowserSurface. בעזרת ההצעה הזו, האפליקציה יכולה להודיע לדפדפן שכאשר קוראים ל-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 כולל את המאפיין renderBlockingStatus, שמספק אות ישיר מהדפדפן שמזהה את המשאבים שמונעים את הצגת הדף, עד שהם יורדו.

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

// 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, לחפש את המשאבים שמונעים את העיבוד ולבצע אופטימיזציה.

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

PendingBeacon API הדקלרטיבי מאפשר לדפדפן לקבוע מתי יישלחו סמלי ה-beacon.

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

לרוב, האפליקציות רוצות לשלוח את הסמנים האלה בסוף הביקור של המשתמש, אבל אין זמן מתאים לביצוע הקריאה 'שליחה'. ממשק ה-API הזה מעביר את השליחה לדפדפן עצמו, כך שהוא יכול לתמוך בסמנים ב-page unload או ב-page hide, בלי שהמפתח יצטרך להטמיע קריאות שליחה בזמנים הנכונים בדיוק.

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

ועוד.

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

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

קריאה נוספת

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

להרשמה

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

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