חדש ב-Chrome 97

Pete LePage

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

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

Web Transport

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

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

הוא תומך בשליחת נתונים באופן מהימן עם ממשקי ה-API של מקורות הנתונים, ובאופן לא מהימן עם ממשקי ה-API של ה-datagram. היא נתמכת ב-Web worker. בנוסף, מאחר שהיא חושפת ממשק תואם ל-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.