אלו העדכונים העיקריים בגרסה 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
. באמצעות קריאה
אמצעי תשלום ReadableStream.getReader()
, מקבלים ReadableStreamDefaultReader
ואז אפשר read()
לראות ממנו נתונים עד לסיום הסטרימינג.
כדי לכתוב נתונים צריך להפעיל את ה-method WritableStream.getWriter()
,
WritableStreamDefaultWriter
, כדי שתהיה לך אפשרות write()
לראות בו נתונים.
הצגת שיפורים במעברים
התכונות של 'הצגת מעברים' משמחות אותי, ויש שתי תכונות חדשות ב-Chrome 124 שנועד להקל על מעבר בין תצוגות.
האירוע pageswap
מופעל על אובייקט חלון של מסמך בזמן ניווט
יחליף את המסמך במסמך חדש.
document.addEventListener("pageswap", event => {
if (!event.viewTransition) {
return;
}
});
וחסימת עיבוד מסמכים שמאפשרת לחסום את העיבוד של מסמך עד שהתוכן הקריטי ינותח, כדי להבטיח צבע ראשון עקבי בכל הדפדפנים.
ופעולות נוספות.
כמובן שיש עוד הרבה.
disallowReturnToOpener
הודעה לדפדפן שלא צריך להציג לחצן במצב 'תמונה בתוך תמונה' חלון שמאפשר למשתמש לחזור לכרטיסיית הפתיחה.מאגרי גלילה שניתן להתמקד בהם במקלדת שיפור הנגישות באמצעות הפיכת קונטיינרים של גלילה למיקוד באמצעות רצף ניווט ממוקד.
וההתקנה אוניברסלית מאפשרת למשתמשים להתקין כל דף, אפילו לעמוד בקריטריונים הנוכחיים של ה-PWA.
קריאה נוספת
הנושאים האלה כוללים רק חלק מהעדכונים העיקריים. בקישורים הבאים ניתן למצוא מידע על שינויים נוספים בגרסה 124 של Chrome.
- נתוני הגרסה של Chrome 124
- מה חדש בכלי הפיתוח ל-Chrome (124)
- עדכונים ל-ChromeStatus.com ל-Chrome 124
- רשימת השינויים במאגר המקור של Chromium
- יומן הגרסאות של Chrome
להרשמה
כדי להישאר מעודכנים, אפשר להירשם ערוץ YouTube למפתחי Chrome, ואתה תקבל התראה באימייל בכל פעם שנשיק סרטון חדש.
אני פיט לעמוד, וברגע ש-Chrome 125 יפורסם, נגיע כאן לספר לך מה חדש ב-Chrome!