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

קטע הקוד הזה מראה איך לקבל רשימה של כל המשאבים ולהשתמש במאפיין החדש 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.