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

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 כולל את המאפיין 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');

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

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

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

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

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

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

ועוד!

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

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

קריאה נוספת

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

הרשמה

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

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