חדש ב-Chrome 73

Pete LePage

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

• אפשר ליצור תוכן נייד בקלות רבה יותר בעזרת החלפת HTTP חתומה.
• שינוי דינמי של סגנונות הופך לקל יותר באמצעות גיליונות סגנונות שניתן ליצור.
• התמיכה ב-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, כדי לספק תמיכה ב-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 Exchanges

Signed HTTP Exchanges‏ (SXG), חלק מטכנולוגיה מתפתחת שנקראת חבילות אינטרנט, זמין עכשיו ב-Chrome 73. Signed HTTP 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.