חדש ב-Chrome 97

Pete LePage

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

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

Web Transport

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

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

הוא תומך בשליחת נתונים באופן מהימן באמצעות ממשקי ה-API שלו להעברת נתונים בזרם, ובאופן לא מהימן באמצעות ממשקי ה-API שלו להעברת נתונים ב-datagram. הוא נתמך ב-web 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 נעשה קל יותר. עכשיו יש תמיכה בשיטות הסטטיות findLast() ו-findLastIndex() ב-Array וב-TypedArray.

הפונקציות האלה זהות למעשה לפונקציות 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

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

קוראים לי פיט לייפ (Pete LePage), ואחרי שגרסת Chrome 98 תפורסם, אספר לכם מה חדש ב-Chrome.