חדש ב-Chrome 95

Pete LePage

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

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

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

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

כמעט כל אפליקציות האינטרנט תלויות בניתוב בדרך מסוימת, בין אם מדובר בקוד שרץ בשרת שממפה נתיב לקבצים בדיסק או ללוגיקה באפליקציה עם דף יחיד שמעדכנת את ה-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 מופעל כברירת מחדל בגרסאות 95 ואילך של Chrome ו-Edge. בדפדפנים או בסביבות כמו Node שעדיין לא תומכים בה, תוכלו להשתמש בספרייה urlpattern-polyfill.

לפרטים מלאים, קראו את המאמר של ג'ף 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

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

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

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

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

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

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

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

ופעולות נוספות.

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

קריאה נוספת

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

להרשמה

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

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