חדש ב-Chrome 97

Pete LePage

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

שנה טובה! שמי Pete LePage. בואו נראה מה חדש למפתחים ב-Chrome 97.

העברת אינטרנט

אם אתם משתמשים ב-Web Sockets או בממשק ה-API של ערוץ הנתונים WebRTC כדי לשלוח הודעות בין השרת לדף, יש לכם אפשרות חדשה. WebTransport הוא API חדש שמציע העברת הודעות שרת-לקוח עם זמן אחזור קצר ודו-כיווני.

זמן האחזור שלו קצר יותר מזה של WebSockets, ובניגוד ל-RTC Data Channel API, שתוכנן להעברת הודעות מקצה לקצה (P2P), ה-Web Transport API תוכנן במיוחד להעברת הודעות בין שרתים.

הוא תומך בשליחת נתונים בצורה אמינה באמצעות ממשקי ה-API של מקורות הנתונים, ובאופן לא מהימן באמצעות ממשקי ה-API של ה-datagram. יש תמיכה ב-work Workers. מכיוון שהוא חושף ממשק שתואם ל-Streams, הוא תומך באופטימיזציות של לחץ חוזר.

כדי להשתמש בו צריך שרת שתומך ב-HTTP/3, ובדרך כלל קל יותר להגדיר שרת WebRTC. פותחים מכונה חדשה של WebTransport, ממתינים שהיא תתחבר ואפשר יהיה להתחיל לשלוח נתונים.

const url = 'https://example.com:4999/foo/bar';
const transport = new WebTransport(url);
await transport.ready;

const writer = transport.datagrams.writable.getWriter();
const data1 = new Uint8Array([65, 66, 67]);
writer.write(data1);

הפרטים המלאים מופיעים במאמר התנסות עם WebTransport באתר web.dev.

זיהוי תכונות של סוג סקריפט

כיום אנחנו יכולים להשתמש במאפיין nomodule כדי לזהות תמיכה במודולים של JavaScript בדפדפן. אבל יש מספר הצעות לתכונות חדשות, כמו מפות ייבוא, כללי ספקולציות וטעינה מראש של חבילות. אנחנו צריכים דרך לדעת מה הדפדפן תומך.

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

if (HTMLScriptElement.supports('importmap')) {
  // Use <script type="importmap" ...>
} else if (HTMLScriptElement.supports('module')) {
  // Use <script type="module" ...>
} else {
  // Use classic method...
}

מערך חדש של אבות טיפוס

אני אוהב ש-JavaScript נעשה קל יותר. Array ו-TypedArray תומכים עכשיו בשיטות הסטטיות findLast() ו-findLastIndex().

הפונקציות האלה זהות בפועל ל-find() ול-findIndex(), אבל החיפוש מתבצע בסוף המערך ולא בהתחלה שלו.

לדוגמה, כדי למצוא את המספר האחרון במערך שגדול מ-10, קוראים לפונקציה findLast() עם פונקציית בדיקה שבודקת אם הערך גדול מ-10, וזהו!

const array1 = [5, 12, 8, 130, 44, 3, 6];

function greaterThanTen(val) {
  return val > 10;
}

const last = array1.findLast(greaterThanTen);
// 44

const lIdx = array1.findLastIndex(greaterThanTen);
// 4

אמולציה של Chrome 100 במחרוזת UA

תוך כמה חודשים נגיע ל-Chrome 100, מספר גרסה בן שלוש ספרות. צריך לבדוק כל קוד שבודק את מספרי הגרסאות או מנתח את מחרוזת ה-UA כדי לוודא שהוא מטפל בשלוש ספרות.

יש דגל בשם #force-major-version-to-100 שמשנה את מספר הגרסה הנוכחית ל-100, כדי לוודא שהכול עובד כמו שצריך.

דף סימונים של Chrome מדגיש אפשרות #force-major-version-to-100 חדשה

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

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

שורות חדשות ברשומות של טפסים מנורמלות עכשיו, באותו אופן כמו Gecko ו-WebKit, במטרה לשפר את יכולת הפעולה ההדדית בין דפדפנים.

אנחנו סטנדרטיים לשמות של טיפים ללקוחות על ידי הוספת התחילית sec-ch לשמות. לדוגמה, dpr הופך ל-sec-ch-dpr. נמשיך לתמוך בגרסאות קיימות של הרמזים האלה, אבל כדאי להיערך לקראת ההוצאה משימוש וההסרה שלהן.

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

קריאה נוספת

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

להרשמה

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

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