חדש ב-Chrome 73

Pete LePage

בגרסה 73 של Chrome הוספנו תמיכה באפשרויות הבאות:

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

ויש עוד הרבה!

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

יומן שינויים

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

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

אפליקציות Progressive Web App פועלות בכל מקום

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

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

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

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

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

1. הוספת מניפסט
2. יצירת קבוצת סמלים
3. הוספת תבנית של שירות ל-Service Worker

לאחר מכן, ממשיכים משם.

Signed HTTP Exchanges

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

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

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

במאמר של Kinuko בנושא Signed HTTP Exchanges מוסבר איך מתחילים.

גיליונות סגנונות שניתן ליצור

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

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

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

עדכונים של 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);
  });

כדאי לעיין במאמר של Jason Miller‏ Constructable Stylesheets: seamless reusable styles כדי לקבל פרטים נוספים ודוגמאות קוד.

ועוד.

אלה רק כמה מהשינויים ב-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 ותקבלו התראה באימייל בכל פעם שנעלה סרטון חדש.

קוראים לי פיט לייפ (Pete LePage), ואחרי שגרסת Chrome 74 תפורסם, אספר לכם מה חדש ב-Chrome.