חדש ב-Chrome 73

פיט לה פייג'

Twitter GitHub Glitch Mastodon דף הבית

ב-Chrome 73 הוספנו תמיכה עבור:

• יצירת תוכן נייד בקלות רבה יותר באמצעות החלפות HTTP חתומות.
• בעזרת גיליונות סגנונות הניתנים ליצירה קל יותר לשנות סגנונות באופן דינמי.
• התמיכה ב-Progressive Web Apps מגיעה ל-Mac ומספקת תמיכה ב-PWA בכל הפלטפורמות למחשב ולנייד. כך קל ליצור אפליקציות שאפשר להתקין דרך האינטרנט.

ויש עוד עוד המון!

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

יומן שינויים

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

• רשימת שינויים במאגרי המקור ב-Chromium
• עדכונים ל-ChromeStatus.com בגרסה 73 של Chrome
• הוצאה משימוש והסרה של Chrome 73
• עדכוני מדיה בגרסה 73 של Chrome
• מה חדש ב-JavaScript ב-Chrome 73

Progressive Web Apps פועלות בכל מקום

אפליקציות מסוג Progressive Web App מספקות חוויה ניתנת להתקנה, דמויית אפליקציה, הבנויה ומסופקת ישירות דרך האינטרנט. בגרסה 73 של Chrome הוספנו תמיכה ב-macOS, שכוללת תמיכה ב-Progressive Web Apps בכל הפלטפורמות למחשב – Mac , Windows , ChromeOS ו-Linux, וגם בניידים, כדי לפשט את הפיתוח של אפליקציות אינטרנט.

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

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

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

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

1. הוספת מניפסט
2. יצירת קבוצת סמלים
3. הוספת קובץ שירות (service worker)

לאחר מכן, בצעו איטרציה משם.

Signed HTTP Exchange

Signed HTTP Exchange (SXG), חלק מטכנולוגיה מתפתחת שנקראת חבילות אינטרנט, זמינים עכשיו ב-Chrome 73. שירות Signed HTTP Exchange מאפשר ליצור תוכן "נייד" שצדדים אחרים יכולים לספק. זהו ההיבט המרכזי, הוא שומר על התקינות והשיוך של האתר המקורי.

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

המרות HTTP חתומות מאפשרות העברת תוכן מהירה יותר למשתמשים, וכך מאפשרת ליהנות מהיתרונות של CDN בלי לוותר על השליטה במפתח הפרטי של האישור. צוות AMP מתכנן להשתמש בהחלפות HTTP חתומות בדפי תוצאות החיפוש של Google כדי לשפר את כתובות ה-URL של AMP ולזרז את תהליך הקליקים על תוצאות החיפוש.

לפרטים על תחילת העבודה, קראו את הפוסט Signed HTTP Exchanges של Kinuko.

גיליונות סגנונות שניתנים לבנייה

גיליונות סגנונות ניתנים לבנייה, החדשים ב-Chrome 73, מספקים לנו דרך חדשה ליצור ולהפיץ סגנונות לשימוש חוזר, שחשובה במיוחד בעת השימוש ב-Shadow DOM.

תמיד היה אפשר ליצור גיליונות סגנונות באמצעות JavaScript. יוצרים רכיב <style> באמצעות document.createElement('style'). לאחר מכן צריך לגשת למאפיין הגיליון כדי לקבל הפניה למכונה הבסיסית CSSStyleSheet, ולהגדיר את הסגנון.

שימוש בשיטה הזו נוטה לגרום לעיוות של גיליון סגנונות. הדבר גרוע אף יותר הוא שהיא גורמת להבהוב של תוכן לא מעוצב. גיליונות סגנונות ניתנים ליצירה מאפשרים להגדיר ולהכין סגנונות CSS משותפים, ולאחר מכן להחיל את הסגנונות על מספר Roots (Root) או על המסמך בקלות וללא כפילויות.

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

קל להתחיל בעבודה: יוצרים מכונה חדשה של CSSStyleSheet ולאחר מכן משתמשים ב-replace או ב-replaceSync כדי לעדכן את הכללים של גיליון הסגנונות.

const sheet = new CSSStyleSheet();

// replace all styles synchronously:
sheet.replaceSync('a { color: red; }');

// this throws an exception:
try {
  sheet.replaceSync('@import url("styles.css")');
} catch (err) {
  console.error(err); // imports are not allowed
}

// replace all styles, allowing external resources:
sheet.replace('@import url("styles.css")')
  .then(sheet => {
    console.log('Styles loaded successfully');
  })
  .catch(err => {
    console.error('Failed to load:', err);
  });

לפרטים נוספים ולדוגמאות קוד, עיינו בפוסט Constructable Stylesheets: חלק סגנונות לשימוש חוזר של ג'ייסון מילר!

ועוד!

אלה רק כמה מהשינויים שב-Chrome 73 למפתחים, כמובן, ויש עוד הרבה יותר.

• matchAll() היא שיטת התאמה חדשה של ביטויים רגולריים באב הטיפוס של המחרוזת, והיא מחזירה מערך שמכיל את ההתאמות השלמות.
• הרכיב <link> תומך עכשיו במאפיינים imagesrcset ו-imagesizes בהתאם למאפיינים srcset ו-sizes של HTMLImageElement.
• היישום של רדיוס טשטוש הצללית ב-Blink תואם עכשיו גם ל-Firefox ול-Safari.
• מעכשיו יש תמיכה במצב כהה בממשק המשתמש של Chrome ב-Mac, ובקרוב תהיה תמיכה ל-Windows. בנוסף, יש שאילתה על מדיה של CSS: prefers-color-scheme, שיכולה לשמש לזיהוי אם המשתמש ביקש מהמערכת להשתמש בעיצוב בצבע בהיר או כהה. הבאג למעקב במקרה הזה הוא הוספת תמיכה בתכונת המדיה prefers-color-scheme של CSS ל-Chrome ול-Firefox.

הרשמה

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

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