חדש ב-Chrome 94

Pete LePage

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

אני Pete LePage, ואני עובדת וקולעת מהבית. בואו נצלול פנימה ונראה מה חדש למפתחים ב-Chrome 94.

מרחב צבעים המוגדר כברירת מחדל לרכיבים של canvas

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

opts = {colorSpace:'display-p3'};
const ctx = canvas.getContext('2d', opts);

חשוב יותר, עכשיו אפשר לציין את מרחב הצבעים שבו רוצים להשתמש כשיוצרים אובייקט 2D של הקשר עיבוד <canvas> או אובייקט ImageData, כולל מרחב הצבעים P3.

WebCodecs

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

אבל שליחת קודק משלכם פירושה כתיבת קוד שכבר קיים בדפדפן, והוא לא יכול לנצל את היתרונות של האצת חומרה. באמצעות Web Codecs API אפשר להשתמש ברכיבי המדיה ובקודקים שכבר נמצאים בדפדפן.

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

הנתיב מ-Canvas או מ-ImageBitmap לרשת או לאחסון
הנתיב מ-Canvas או ImageBitmap לרשת או לאחסון

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

קשה להציג משהו שימושי ב-30 שניות, לכן מומלץ לקרוא את המאמר עיבוד וידאו באמצעות WebCodecs ב-web.dev כדי לקבל הסבר מעמיק עם הרבה קוד וכמה הדגמות מגניבות.

WebGPU

WebGPU הוא ממשק API חדש שמציג יכולות גרפיקה מודרניות, במיוחד Direct3D 12,‏ Metal ו-Vulkan. אפשר להתייחס אליו כמו ל-WebGL, אבל הוא מספק גישה לתכונות מתקדמות יותר של ה-GPU, וגם תמיכה בביצוע חישובים כלליים ב-GPU.

תרשים ארכיטקטורה שבו מוצג החיבור של WebGPUs בין ממשקי ה-API של מערכת ההפעלה לבין Direct3D 12,‏ Metal ו-Vulkan.
תרשים הארכיטקטורה של WebGPU

אנחנו מתחילים גרסת מקור לניסיון ב-Chrome 94, וגם ב-Safari וב-Firefox עובדים כרגע על הטמעות.

הדגמה של Babylon.js שמדמה ים גשום באמצעות יכולת ההצללה (shader) של WebGPU.

פרנסואה פרסם מאמר מצוין בנושא גישה לתכונות מודרניות של GPU באמצעות WebGPU באתר web.dev, שבו הוא משווה בין הביצועים של כפל מטריצות שפועל במעבד (CPU) לבין הביצועים של כפל מטריצות שפועל ב-GPU. הנה רמז. ה-GPU מנצח.

PWA Summit

מפגש הפסגה בנושא PWA ייערך ב-6-7 באוקטובר. זו ועידה אונליין חינמית שמטרתה לעזור לכולם להצליח עם אפליקציות Progressive Web App. כנס PWA Summit הוא שיתוף פעולה בין אנשים מכמה חברות שונות שמעורבות ביצירה של טכנולוגיות PWA: Google,‏ Intel,‏ Microsoft ו-Samsung.

יש המון תוכן ושיחות מעולות. תוכלו לקרוא מידע נוסף ולהירשם באתר PWASummit.org. אני מקווה לראות אותך שם!

ועוד.

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

באמצעות scheduler.postTask() אתם יכולים לתזמן משימות ולשנות את סדר העדיפויות שלהן באופן דינמי או לבטל את כולן בבת אחת.

אם ניסיתם אי פעם לשנות את הפריסה כשהופיעו סרגליות גלילה, הנכס scrollbar-gutter יעזור לכם. כך אפשר לשלוט על הנוכחות של מרזבים בסרגל גלילה, וכך למנוע שינויים בפריסה כאשר התוכן מתרחב.

השימוש ב-WebSQL בהקשרים של צד שלישי הוצא משימוש, וההסרה צפויה להיות בגרסה 97 של Chrome. סטנדרט Web SQL Database הוצא משימוש בנובמבר 2010. היא אף פעם לא יושמה ב-Firefox, והוצאה משימוש ב-Safari בשנת 2019. הוא יוסר מ-Chrome כששיעור השימוש בו יהיה נמוך מספיק. אם אתם עדיין משתמשים ב-WebSQL, כדאי להתחיל לתכנן את ההעברה ממנו.

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

קריאה נוספת

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

להרשמה

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

קוראים לי פיט לייפיג', ואחרי שגרסת Chrome 95 תפורסם, אספר לכם מה חדש ב-Chrome.