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

Pete LePage

אלה השיפורים בגרסה 124 של Chrome:

• יש שני ממשקי API חדשים שמאפשרים להשתמש בDOM של הצל המוצהר מ-JavaScript.
• אפשר להשתמש בסטרימינג ב-Web Sockets.
• הצג את המעברים קצת יותר טוב.
• ויש הרבה עוד.

רוצים להגיע לסיכום? כדאי לקרוא את נתוני הגרסה של Chrome 124.

שימוש ב-DOM של צל מוצהר ב-JavaScript

יש שני ממשקי API חדשים שמאפשרים להשתמש ב-DOM של הצל המוצהר מ-JavaScript.

setHTMLUnsafe() דומה ל-innerHTML, ומאפשר להגדיר את ה-HTML הפנימי של רכיב למחרוזת שצוינה. זה עוזר כשיש HTML שכולל DOM של צל מוצהר, כמו זה.

<my-custom-element>
  <template shadowrootmode="open">
    <style>
      :host {
        display: block;
        color: yellow;
      }
    </style>
    Hello, <slot></slot>
  </template>
</my-custom-element>

אם משתמשים רק ב-innerHTML, הדפדפן לא ינתח אותו כמו שצריך ואין DOM צל. אבל עם setHTMLUnsafe(), ה-DOM של הצל נוצר והרכיב מנותח כפי שציפיתם.

const section = document.createElement("section");
section.setHTMLUnsafe(`<my-custom-element>...</my-custom-element>`);

ה-API השני הוא parseHTMLUnsafe(), והוא פועל בדומה ל-DOMParser.parseFromString().

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

ולבסוף, שני ממשקי ה-API האלה כבר נתמכים בגרסה האחרונה של Firefox ו-Safari!

ממשק API של WebSocket Stream

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

אבל מה קורה אם הנתונים מגיעים מהר יותר מכפי שאתם יכולים לטפל בו?

זה נקרא לחץ גב, והוא יכול לגרום לכאבי ראש חמורים. לצערנו, ל-WebSocket API אין דרך נחמדה להתמודד עם לחץ גב.

ה-WebSocket Stream API מאפשר להשתמש בזרימות ובשקעי אינטרנט, כך שאפשר להפעיל לחץ חזרה ללא עלות נוספת.

קודם כול יוצרים WebSocketStream חדש ומעבירים אליו את כתובת ה-URL של שרת WebSocket.

const wss = new WebSocketStream(WSS_URL);
const {readable, writable} = await wss.opened;
const reader = readable.getReader();
const writer = writable.getWriter();

while (true) {
  const {value, done} = await reader.read();
  if (done) {
    break;
  }
  const result = await process(value);
  await writer.write(result);
}

לאחר מכן, ממתינים לפתיחת החיבור, והתוצאה היא ReadableStream ו-WritableStream. קריאה ל-method ReadableStream.getReader() מתקבלת עם מקור הנתונים ReadableStreamDefaultReader, שממנו אפשר לקבל read() נתונים עד סיום השידור.

כדי לכתוב נתונים, צריך לקרוא לשיטה WritableStream.getWriter(), שמעניקה WritableStreamDefaultWriter, ואז אפשר לקבל נתונים של write().

הצגת שיפורים במעברים

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

האירוע pageswap מופעל באובייקט חלון של מסמך, כאשר ניווט יחליף את המסמך במסמך חדש.

document.addEventListener("pageswap", event => {
  if (!event.viewTransition) {
     return;
  }
});

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

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

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

• disallowReturnToOpener רמז לדפדפן שלא צריך להציג לחצן בחלון של תמונה בתוך תמונה, שמאפשר למשתמש לחזור לכרטיסייה הפותחת.

• מאגרי גלילה עם מיקוד באמצעות מקלדת משפרים את הנגישות על ידי מתן אפשרות להתמקד בקונטיינרים של גלילה באמצעות ניווט רציף עם מיקוד.

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

קריאה נוספת

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

• נתוני גרסה של Chrome 124
• מה חדש בכלי הפיתוח ל-Chrome (124)
• עדכונים ל-ChromeStatus.com ל-Chrome 124
• רשימת שינויים במאגרי מקורות של Chromium
• יומן ההפצה של Chrome

להרשמה

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

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