חדש ב-Chrome 95

Pete LePage

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

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

במאמר של ג'ף URLPattern brings routing to the web platform תמצאו פרטים נוספים.

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

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

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

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

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

PWA Summit

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

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

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

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

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

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

כל הפרטים וציר הזמן מופיעים בפוסט User-Agent Reduction origin trial באתר developer.chrome.com.

ועוד!

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

קריאה נוספת

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

הרשמה

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

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