חדש ב-Chrome 85

פיט לפייג'
פיט לה פייג'
Twitter GitHub Glitch Mastodon דף הבית

אנחנו מתחילים להשיק את Chrome 85 כדי לשמור על היציבות.

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

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

חשיפת התוכן

תהליך עיבוד של דפדפנים

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

החלה של content-visibility: auto על רכיב מורה לדפדפן שהוא יכול לדלג על פעולת העיבוד של אותו רכיב עד לגלילה אל אזור התצוגה, וכך לספק עיבוד ראשוני מהיר יותר.


.my-class {
  content-visibility: auto;
}

כדי להפיק את המקסימום מ-content-visibility, כדאי ליישם אותו בקטעי הורה עם אלגוריתמים מורכבים יותר של פריסה, כמו flexbox ו-grid, או שכוללים צאצאים עם פריסות משלהם משל עצמם.

על ידי כיווץ תוכן והוספת content-visibility: auto;, זמן העיבוד של הדף הוא 232 אלפיות השנייה ל-30 אלפיות השנייה בלבד.

מידע נוסף על חשיפה של התוכן יכול לעזור לכם לשפר את ביצועי הרינדור.

המשתנים @property ו-CSS

משתני CSS, שנקראים באופן טכני מאפיינים מותאמים אישית, הם מדהימים. באמצעות ה-API של המאפיינים והערכים של Houdini CSS, תוכלו להגדיר סוג וערך ברירת מחדל חלופי למאפיינים המותאמים אישית. הסברתי בעבר במאמר חדש ב-Chrome 78 כשהוספנו תמיכה בהגדרה שלהן ב-JavaScript.

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

@property --colorPrimary {
  syntax: '<color>';
  initial-value: magenta;
  inherits: false;
}

ל-Una יש פוסט מעולה @property: מתן כוחות-על למשתני CSS שמראה איך אפשר להשתמש בהם.

התקנת אפליקציות קשורות

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

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

כשהוא נשלח לראשונה ב-Chrome 80, הוא עבד רק באפליקציות Android. עכשיו, ב-Android אפשר גם לבדוק אם ה-PWA מותקן. בנוסף ב-Windows, הוא יכול לבדוק אם אפליקציית Windows UWP מותקנת.

const relatedApps = await navigator.getInstalledRelatedApps();
relatedApps.forEach((app) => {
  console.log(app.id, app.platform, app.url);
});

עיינו במאמר שלי האם האפליקציה שלכם מותקנת? getInstalledRelatedApps() יספר לכם! באתר web.dev כדי לראות איך זה עובד, ואיך לחתום על אפליקציות כדי להוכיח שהן בבעלותכם.

קיצורי דרך לסמל האפליקציה

קיצור דרך לסמל האפליקציה ב-Windows

בגרסה 84 של Chrome הוספנו תמיכה בקיצורי דרך לסמלי אפליקציות. אמרתי בטעות שהם זמינים בכל מקום, אבל הם זמינים רק ב-Android. עכשיו, ב-Chrome 85, הם זמינים ב-Android וב-Windows, וגם ב-Chrome וב-Edge.


"shortcuts": [
  {
    "name": "Open Play Later",
    "short_name": "Play Later",
    "description": "View the list you saved for later",
    "url": "/play-later",
    "icons": [
      { "src": "//play-later.png", "sizes": "192x192" }
    ]
  }
]

לפרטים המלאים, קראו את המאמר בנושא קיצורים של סמלי אפליקציות באתר web.dev, ואני מתנצלת על הבלבול שנוצר.

גרסת מקור לניסיון: בקשות סטרימינג עם fetch()

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

const { readable, writable } = new TransformStream();

const responsePromise = fetch(url, {
  method: 'POST',
  body: readable,
});

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

ג'ייק קיבל מבט מעמיק בקטע סטרימינג של בקשות עם ממשק ה-API לאחזור ב-web.dev, והוא גם פירט אותו בסרטון האחרון של HTTP203 - Streaming requests with appeal.

ועוד

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

באמצעות Promise.any, מוחזרת התחייבות שממומשת על ידי ההבטחה הראשונה שניתנה למימוש או לדחייה.

try {
  const first = await Promise.any(arrayOfPromises);
  console.log(first);
} catch (error) {
  console.log(error.errors);
}

קל יותר להחליף את כל המכונות במחרוזת עם .replaceAll(), אין עוד ביטויים רגולריים!

const myName = 'My name is Bond, James Bond.'
    .replaceAll('Bond', 'Powers')
    .replace('James', 'Austin');
console.log(myName);
// My name is Powers, Austin Powers.

ב-Chrome 85 נוספה תמיכה בפענוח הקוד של AVIF – פורמט תמונה שמקודד באמצעות AV1 ותואם ל-Alliance for Open Media. פורמט AVIF מציע רווחי דחיסה משמעותיים לעומת JPEG ו-WebP, כאשר במחקר שנערך לאחרונה ב-Netflix נמצא חיסכון של 50% לעומת JPEG רגילה וחיסכון של יותר מ-60% בתוכן ביחס של 4:4:4.

בנוסף, ההסרה של AppCache התחילה.

קריאה נוספת

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

הרשמה

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

אני פיט לפייג', וסוף סוף הסתפרתי!

ברגע ש-Chrome 86 יוצא, אני כאן כדי לספר לכם מה חדש ב-Chrome!