חדש ב-Chrome 95

Pete LePage

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

  • קל יותר לבצע ניתוב כש-URLPattern מוטמע בדפדפן.
  • Eye Dropper API מספק כלי מובנה לבחירת צבעים.
  • יש עכשיו תקופת ניסיון חדשה למקור שמאפשרת לכם להביע הסכמה לקבלת מחרוזת UA מקוצרת.
  • כל הסרטונים של PWA Summit זמינים באינטרנט.
  • ויש עוד הרבה.

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

ניתוב באמצעות URLPattern

כמעט כל אפליקציות האינטרנט תלויות בחיבור (routing) באופן כלשהו, בין אם מדובר בקוד שפועל בשרת וממפה נתיב לקבצים בדיסק, ובין אם מדובר בלוגיקה באפליקציה של דף יחיד שמעדכנת את DOM כשכתובת ה-URL משתנה. URLPattern הוא ממשק API חדש לפלטפורמת אינטרנט שמסדיר את התחביר של דפוסי הניתוב.

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

אם אתם כבר מכירים את תחביר הניתוב שנעשה בו שימוש ב-Express, ב-Ruby on Rails או ב-path-to-regexp, סביר להניח שהקוד הזה נראה לכם מוכר.

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

const p = new URLPattern({
  protocol: 'https',
  hostname: 'example.com',
  pathname: '/:folder/*/:fileName.jpg',
  search: '*',
  hash: '*',
});

לדוגמה, נבחן את השדה URLPattern שמערכת Google Docs עשויה להשתמש בו. נספק את kind של הקובץ, את ID של הקובץ ואת mode שבו פותחים אותו. לאחר מכן, כדי להשתמש בדפוס, אפשר להפעיל את test() או את exec().

const url = 'https://docs.google.com/document/d/1s...5c/edit#heading=h.8...c';

const pattern = new URLPattern({
  pathname: '/:kind/d/:fileID/:mode',
  hash: '*',
});

const r = pattern.exec(url);
// {
//   "pathname": {"groups": {
//     "fileID": "1s...5c",
//     "kind": "document",
//     "mode": "edit"
//   }, ...},
//   "hash": {"groups": {"0":"heading=h.8...c"}, ...},
//   ...
// }

URLPattern מופעל כברירת מחדל ב-Chrome וב-Edge מגרסה 95 ואילך. בדפדפנים או בסביבות כמו Node שעדיין לא תומכים בכך, אפשר להשתמש בספרייה urlpattern-polyfill.

במאמר של Jeff, URLPattern מביא ניתוב לפלטפורמת האינטרנט, מוסבר בהרחבה על הנושא.

בחירת צבעים באמצעות Eye Dropper API

כמעט בכל אפליקציית עיצוב שבה השתמשתי יש כלי טפטפת, שמאפשר לזהות בקלות את הצבע של רכיב כלשהו. בדפדפנים מסוימים יש יכולת טפטפת מובנית ב-<input type=color>, אבל היא לא אידיאלית.

ממשק ה-API של כלי הטיפטוף, שהוטמע על ידי חלק מהאנשים ב-Microsoft, מביא את הפונקציונליות הזו לאינטרנט. כדי להשתמש בו, יוצרים מכונה חדשה של EyeDropper() ומפעילים את open().

const eyeDropper = new EyeDropper();
const result = await eyeDropper.open();
// result = {sRGBHex: '#160731'}

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

אתם יכולים לנסות הדגמה מהירה ולראות את הקוד ב-Glitch.

PWA Summit

האם צפית בכנס PWA Summit מוקדם יותר החודש?

היה נהדר לראות כל כך הרבה אנשים מדברים על אפליקציות לנייד (PWA) ומשתפים את החוויות שלהם. אם פספסתם, כל הסרטונים זמינים לצפייה באתר PWASummit.org או בערוץ YouTube של PWA Summit.

גרסת מקור לניסיון של הפחתת מידע בסוכן משתמש

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

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

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

כל הפרטים וציר הזמן מפורטים בפוסט גרסת המקור לניסיון של הפחתת מידע בסוכן משתמש בכתובת developer.chrome.com.

ועוד.

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

קריאה נוספת

כאן מפורטות רק כמה מהנקודות העיקריות. בקישורים שבהמשך מפורטים שינויים נוספים ב-Chrome 95.

להרשמה

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

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