חדש ב-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.

לפרטים מלאים, קראו את המאמר של ג'ף, URLדפוס מפנה את המסלול לפלטפורמת האינטרנט.

בחירת צבעים באמצעות 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.

גרסת מקור של הפחתת סוכני משתמשים

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

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

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

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

ועוד.

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

קריאה נוספת

זה כולל רק חלק מהעדכונים העיקריים. בקישורים הבאים מפורטים שינויים נוספים ב-Chrome 95.

להרשמה

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

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